.net 如何查看标题栏中的TabView?在UWP WinUI 2应用程序中

ltqd579y  于 2023-01-27  发布在  .NET
关注(0)|答案(1)|浏览(179)

我想在标题栏中查看TabView,如下图所示。

我使用的是UWP WinUI 2。
我试图在标题栏中查看TabView。但TabView在标题栏下查看。
我的主页.xaml代码:

<muxc:TabView Grid.Row="2">
    <muxc:TabViewItem Header="New Tab">
                
    </muxc:TabViewItem>
</muxc:TabView>
j9per5c4

j9per5c41#

这其实很简单:
在XAML代码中:这段代码向TabView添加了一个ShellTitlebarInset和一个CustomDragRegion。这是在窗口的左边和右边添加边距所必需的。

<muxc:TabView x:Name="tabView">
    <muxc:TabView.TabStripHeader>
        <Grid x:Name="ShellTitlebarInset" Background="Transparent" />
    </muxc:TabView.TabStripHeader>
    <muxc:TabView.TabStripFooter>
        <Grid x:Name="CustomDragRegion" MinWidth="188" Loaded="CustomDragRegion_Loaded" Background="Transparent" />
    </muxc:TabView.TabStripFooter>
    
    <muxc:TabViewItem Header="Tab1"/>
    <muxc:TabViewItem Header="Tab2"/>
    <muxc:TabViewItem Header="Tab3"/>
</muxc:TabView>

在您的主页中:
LayoutMetricsChanged事件处理从左向右或从右向左的流向,以将特定边距添加到CustomDragRegion和ShellTitlebarInset。

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;
}

//Make sure to extend the view after the CustomDragRegion loaded, otherwise the tabs may clip under the minimize, maximize and close buttons of the window:
private void CustomDragRegion_Loaded(object sender, RoutedEventArgs e)
{
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    Window.Current.SetTitleBar(CustomDragRegion);
}

这里还有微软的官方文档:
https://learn.microsoft.com/en-us/windows/apps/design/controls/tab-view

相关问题