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

um6iljoc 于 2023-02-01 发布在 Windows

关注(0)|答案(1)|浏览(165)

我正在Visual Studio上为UWP制作一个应用程序，该应用程序使用Windows UI库作为选项卡视图组件。我遵循the documentation，它提供了以下代码供用途：
示例：<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);
}

我把这些代码添加到我的项目中，乍一看，它看起来很正常。然而，当尝试交互时，却出现了问题。我只能在“+“图标的最底部边缘单击，才能创建一个新的标签页。我也无法退出任何标签页或与它们交互。

这是我的问题

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

xaml

来源：https://stackoverflow.com/questions/65210583/tab-view-not-working-right-on-uwp-windows-ui-library

1条答案

按热度按时间

e4yzc0pl1#

您需要创建一个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;
}

***注意：***要确保标题栏中的选项卡不被 shell 内容遮挡，您必须考虑左右重叠。在LTR布局中，右插入包括标题按钮和拖动区域。在RTL中则相反。SystemOverlayLeftInset和SystemOverlayRightInset值表示物理左和右，因此在RTL中也要反转这些值。

单击此处获取***更多信息***

赞(0）回复(0）举报 2023-02-01

我来回答

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

1条答案

相关问题

热门标签

最新问答