WinUI3中TabViewItem无法自动填充Page的问题求助

核心原因 #

TabViewItem的Content区域默认不会强制子元素拉伸，同时Frame和Page的根元素默认对齐方式并非铺满容器，导致Page无法自动填充TabViewItem。

解决方案 #

1. 显式设置Frame的对齐属性

在创建Frame时，直接指定HorizontalAlignment和VerticalAlignment为Stretch，确保Frame填满TabViewItem的Content区域：

Frame frame = new Frame()
{
    HorizontalAlignment = HorizontalAlignment.Stretch,
    VerticalAlignment = VerticalAlignment.Stretch
};
frame.Navigate(typeof(OrderV));

TabViewItem tabViewItem = new()
{
    Header = "Order",
    Content = frame,
    HorizontalAlignment = HorizontalAlignment.Stretch,
    VerticalAlignment = VerticalAlignment.Stretch
};

tabViewItem.IsSelected = true;
TabViewControl.TabItems.Add(tabViewItem);

2. 确认Page根元素的布局设置

检查OrderV.xaml的根容器（如Grid）是否设置了拉伸属性，避免页面内容自身限制了填充范围：

<Page x:Class="YourAppNamespace.OrderV"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 根Grid必须设置Stretch对齐 -->
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <!-- 页面内容 -->
    </Grid>
</Page>

3. 自定义TabViewItem的ContentTemplate（可选）

如果上述方法无效，可通过修改TabView的ItemTemplate，确保ContentPresenter强制拉伸子元素：

<muxc:TabView x:Name="TabViewControl">
    <muxc:TabView.ItemTemplate>
        <DataTemplate>
            <muxc:TabViewItem Header="{Binding Header}">
                <muxc:TabViewItem.ContentTemplate>
                    <DataTemplate>
                        <ContentPresenter HorizontalAlignment="Stretch" 
                                          VerticalAlignment="Stretch" 
                                          Content="{Binding}" />
                    </DataTemplate>
                </muxc:TabViewItem.ContentTemplate>
            </muxc:TabViewItem>
        </DataTemplate>
    </muxc:TabView.ItemTemplate>
</muxc:TabView>

验证逻辑 #

单独使用Frame能正常填充是因为Frame所在的父容器（如页面Grid）默认会让子元素拉伸，但TabViewItem的Content区域有不同的布局逻辑，必须显式设置拉伸属性才能让Frame和Page铺满可用空间。

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