c# - 如何使xaml页面成为屏幕的全宽

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>

如您所见，我试图通过在网格上设置 Horizo​​ntalAlignment="Stretch" 并将列定义设置为自动来实现我想要的结果。

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

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

如何在不设置网格宽度的情况下实现我想要的效果 - 因为这不适用于不同尺寸的手机/屏幕。

编辑:我刚刚意识到内容的宽度由 OpenPaneLength="170" 设置控制。为什么这会影响内容，我怎样才能阻止它影响内容宽度？

Answer 1

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