时间戳

首页 > 解决方案 > 选项卡视图在 UWP Windows UI 库上无法正常工作

c# - 选项卡视图在 UWP Windows UI 库上无法正常工作

问题描述

我正在为 Visual Studio 上的 UWP 制作一个应用程序，它使用 Windows UI 库作为选项卡视图组件。我正在关注文档，它提供了以下代码供使用：

xml: <muxc:TabView AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested"/>
c#:

// Add a new Tab to the TabView
private void TabView_AddTabButtonClick(muxc.TabView sender, object args)
{
    var newTab = new muxc.TabViewItem();
    newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Header = "New Document";

    // The Content of a TabViewItem is often a frame which hosts a page.
    Frame frame = new Frame();
    newTab.Content = frame;
    frame.Navigate(typeof(Page1));

    sender.TabItems.Add(newTab);
}

// Remove the requested tab from the TabView
private void TabView_TabCloseRequested(muxc.TabView sender, muxc.TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);
}



我将该代码添加到我的项目中，乍一看它看起来很正常。但是，当尝试交互时，就会出现问题。如果我单击“+”图标的最底部边缘，我只能创建一个新选项卡。我也无法退出任何选项卡或与它们交互。
这是我的问题的 gif 图像：
https

: //im7.ezgif.com/tmp/ezgif-7-565b1f0b4531.gif 有人解决这个问题吗？
谢谢你的帮助

标签： c#xamluwp

解决方案

您需要创建一个 TabStripHeader 和 TabStripFooter。TabStripHeader 的子项为 Grid 并将其命名为ShellTitlebarInset，TabStripFooter 的子项为 Grid 并将其命名为CustomDragRegion 并将其背景设置Transparent为两者。

用作CustomDragRegion标题栏。

像例子： -

<muxc:TabView>
    <muxc:TabView.TabStripHeader>
        <Grid x:Name="ShellTitlebarInset" Background="Transparent" />
    </muxc:TabView.TabStripHeader>
    <muxc:TabView.TabStripFooter>
        <Grid Grid.Column="3" x:Name="CustomDragRegion" Background="Transparent" />
    </muxc:TabView.TabStripFooter>
</muxc:TabView>

和 C# 示例：-

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    Window.Current.SetTitleBar(CustomDragRegion);
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (FlowDirection == FlowDirection.LeftToRight)
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayRightInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayLeftInset;
    }
    else
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayLeftInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayRightInset;
    }

    CustomDragRegion.Height = ShellTitlebarInset.Height = sender.Height;
}

注意：为确保标题栏中的选项卡不被外壳内容遮挡，您必须考虑左右覆盖。在 LTR 布局中，右插图包括标题按钮和拖动区域。在 RTL 中情况正好相反。SystemOverlayLeftInset和SystemOverlayRightInset值是物理左右的，所以在 RTL 中也可以颠倒这些值。

点击这里了解更多信息

推荐阅读