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

Question

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

xaml：<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

有人能解决这个问题吗
感谢的帮助

Answer 1

您需要创建一个TabStripHeader和TabStripFooter。TabStripHeader的子级是Grid，并将其名称设置为CCD_，TabStripFooter的子级是Grid，并将其名称设置为CustomDragRegion并将两者的背景设置为CCD_ 4。

使用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中也可以反过来。

点击此处查看更多信息