TabControl overlays Minimize, Maximize and Close button of window

Question

If I create for example 12 Tabs at start of my app the tabpages are overlapping the Close, Minimize and Maximize buttons,

I have used the official sample from Microsoft:

https://github.com/microsoft/WinUI-Gallery/blob/master/XamlControlsGallery/TabViewPages/TabViewWindowingSamplePage.xaml.cs

I only changed the number of tabs created at start to 12 like this:

// Main Window -- add some default items
for (int i = 0; i < 12; i++)
{
    Tabs.TabItems.Add(CreateNewTVI($"Item {i}", $"Page {i}"));
}

And then this happens:

And I really don't know why this happens

Edit:

The Xaml Code:

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <muxc:TabView x:Name="Tabs"                           
        VerticalAlignment="Stretch"                
        <muxc:TabView.TabStripHeader>
            <Grid x:Name="ShellTitlebarInset" Background="Transparent" />
        </muxc:TabView.TabStripHeader>
        <muxc:TabView.TabStripFooter>
            <Grid x:Name="CustomDragRegion" Background="Transparent" HorizontalAlignment="Right" Width="188"/>
        </muxc:TabView.TabStripFooter>
    </muxc:TabView>
</Grid>

The MainPage.xaml.cs

public MainPage()
{
    this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    Tabs.SelectedIndex = 0;

    // Extend into the titlebar
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;

    Window.Current.SetTitleBar(CustomDragRegion);
    // Main Window - add some tabs
    for (int i = 0; i < 24; i++)
    {
        Tabs.TabItems.Add(CreateNewTVI($"Item {i}", $"Page {i}"));
    }
}
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // To ensure that the tabs in the titlebar are not occluded by shell
    // content, we must ensure that we account for left and right overlays.
    // In LTR layouts, the right inset includes the caption buttons and the
    // drag region, which is flipped in RTL. 

    // The SystemOverlayLeftInset and SystemOverlayRightInset values are
    // in terms of physical left and right. Therefore, we need to flip
    // then when our flow direction is RTL.
    if (FlowDirection == FlowDirection.LeftToRight)
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayRightInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayLeftInset;
    }
    else
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayLeftInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayRightInset;
    }

    // Ensure that the height of the custom regions are the same as the titlebar.
    CustomDragRegion.Height = ShellTitlebarInset.Height = sender.Height;
}

private TabViewItem CreateNewTVI(string header, string dataContext)
{
    var newTab = new TabViewItem()
    {
        IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource()
        {
            Symbol = Symbol.Placeholder
        },
        Header = header,
        Content = new TextBlock()
        {
            Text = "This is a text:\n" + dataContext, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center,
            FontSize = 25,
        }
    };
    return newTab;
}

Answer 1

To fix this, you have to first add a Loaded event to your CustomDragRegion. Now you can remove the code from the OnNavigateTo function and paste it into the Loaded function. That's it.

private void CustomDragRegion_Loaded(object sender, RoutedEventArgs e)
{
    Tabs.SelectedIndex = 0;

    // Extend into the titlebar
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;

    Window.Current.SetTitleBar(CustomDragRegion);
    // Main Window - add some tabs
    for (int i = 0; i < 24; i++)
    {
        Tabs.TabItems.Add(CreateNewTVI($"Item {i}", $"Page {i}"));
    }
}