如何使xaml Page成为屏幕的整个宽度

Question

我有以下MainPage.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <RelativePanel>
        <Button Name="btnHamburger" FontFamily="Segoe MDL2 Assets" Content="" Click="HamburgerButton_Click"  RelativePanel.AlignLeftWithPanel="True"/>
        <TextBlock Name="PageTitle" Text="Title" FontSize="24" FontWeight="Bold" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
    </RelativePanel>
    <SplitView Name="MySplitView" Grid.Row="1" DisplayMode="Overlay" OpenPaneLength="170" CompactPaneLength="56" HorizontalAlignment="Left">
        <SplitView.Pane>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="Skyron Image" FontSize="16" VerticalAlignment="Center" />
                <ListBox SelectionMode="Single" Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged">

                </ListBox>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="MyFrame" />
        </SplitView.Content>
    </SplitView>
</Grid>

它给了我一个导航菜单系统。当我点击导航链接时，我将相应的页面加载到框架MyFrame。

这是我的主页

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Home page" Name="tbHome" />
</Grid>

正如您所看到的，我已经尝试通过在网格上设置HorizontalAlignment="Stretch"并将列定义设置为自动来实现我想要的结果。

我想问题是我在网格中没有足够的内容使其全屏显示。这就是我目前所拥有的：

我已将主页背景设为蓝色 - 正如您所见，它并未填满整个屏幕。

如果不在网格上设置宽度，我怎样才能实现我想要的效果 - 因为这不适用于不同尺寸的手机/屏幕。

编辑： 我只是放心了内容的宽度由OpenPaneLength="170"设置控制。为什么这会影响内容？如何阻止它影响内容宽度？

Answer 1

将SplitView的Horizo​​ntalAlignment属性设置为“Stretch”而不是“Left”。