TabControl 覆盖 window 的最小化、最大化和关闭按钮

Question

如果我在我的应用程序开始时创建例如 12 个选项卡，则选项卡页面与关闭、最小化和最大化按钮重叠，

我用过微软官方的示例：

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

我只是将开始时创建的选项卡数量更改为 12，如下所示：

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

然后发生了这样的事情：

而且我真的不知道为什么会这样

编辑：

Xaml代码：

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

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

要解决此问题，您必须先将 Loaded 事件添加到您的 CustomDragRegion。现在您可以从 OnNavigateTo 函数中删除代码并将其粘贴到 Loaded 函数中。就是这样。

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

TabControl 覆盖 window 的最小化、最大化和关闭按钮

TabControl overlays Minimize, Maximize and Close button of window

c#

uwp