How do I view TabView in Title Bar? In UWP WinUI 2 Application-CodePudding

I want to view TabView in title bar like image below. I'm using UWP WinUI 2.

I'm trying to view my TabView in title bar. But TabView is viewing under title bar.

My MainPage.xaml code:

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

CodePudding user response：

This is actually pretty easy:

In your xaml code: This piece of code adds a ShellTitlebarInset and a CustomDragRegion to the TabView. This is needed, to add a margin to the left and right side of the window.

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

In your MainPage:

The LayoutMetricsChanged event handles the FlowDirection either from LeftToRight or RightToLeft to add the specific margin to the CustomDragRegion and 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);
}

Here also the official documentation from Microsoft:

https://learn.microsoft.com/en-us/windows/apps/design/controls/tab-view