如何让Microsoft.UI.Xaml.TabView内容全屏且标签栏留右侧间隙

需要实现类似浏览器的布局效果：标题栏按钮与Tab布局之间保留间隙；使用Microsoft.UI.Xaml.TabView，当前标签栏被限制在宽度300的列中，要求TabViewItem的内容铺满全屏，同时标签栏的结束位置保持不变。

当前使用的XAML代码：

<Grid x:Name="TitleBar">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="300"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="AppTitleTextBlock"
               Text="App title" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
    </Grid>

    <Grid x:Name="MainGrid">
        <c:TabView VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Tabs" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested" Visibility="Visible" Margin="0 0 0 0">
        </c:TabView>
    </Grid>
</Grid>

当前效果：标签栏和内容区域都被限制在300宽的范围内，无法实现内容全屏展示。

核心思路是拆分TabView的标签栏与内容区域的布局：让标签栏留在指定的300宽列中，内容区域脱离列的限制，跨越整个窗口宽度。

以下是修改后的实现代码：

<Grid x:Name="RootGrid">
    <!-- 标题栏区域 -->
    <Grid x:Name="TitleBar" Height="32">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="300"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="AppTitleBar" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                <ColumnDefinition/>
                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="AppTitleTextBlock"
                   Text="App title" 
                   Style="{StaticResource CaptionTextBlockStyle}" 
                   Grid.Column="1"
                   VerticalAlignment="Center"
                   Margin="28,0,0,0"/>
        </Grid>
        <!-- Tab标签栏单独放在300宽的列中 -->
        <c:TabView x:Name="Tabs" 
                   Grid.Column="1"
                   VerticalAlignment="Stretch" 
                   HorizontalAlignment="Stretch"
                   AddTabButtonClick="TabView_AddTabButtonClick" 
                   TabCloseRequested="TabView_TabCloseRequested"
                   Visibility="Visible">
            <!-- 自定义标签头模板 -->
            <c:TabView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}"/>
                </DataTemplate>
            </c:TabView.ItemTemplate>
        </c:TabView>
    </Grid>

    <!-- Tab内容区域：跨越整个窗口宽度，放在标题栏下方 -->
    <ContentPresenter x:Name="TabContentPresenter"
                      Margin="0,32,0,0"
                      Content="{Binding SelectedItem.Content, ElementName=Tabs}"/>
</Grid>

关键改动说明 #

1. 重构外层布局，将标题栏与Tab内容区域分离，避免布局重叠
2. 把TabView的标签栏固定在宽度300的Column="1"中，保留与标题栏按钮的间隙
3. 自定义TabView.ItemTemplate仅展示标签头，屏蔽默认的内容容器
4. 使用独立的ContentPresenter绑定TabView的选中项内容，让内容不受300列限制，铺满整个窗口宽度

这种方式既保留了标签栏的固定位置，又实现了内容全屏的需求，完全符合浏览器式的布局逻辑。

内容的提问来源于stack exchange，提问作者XTREME