在UWP / XAML中，如何使SplitView.Content填充窗口中的剩余空間？

Question

我試圖控制通用Windows平台應用程序的布局沒有太大的成功。

這是布局的屏幕截圖： 應用程序屏幕截圖

如何使右側的“搜索”區域（用黑色邊框勾勒出）填充右側的剩余空間？

該應用程序的主要區域是SplitView容器。 左側是一個列表框，其中包含導航菜單項，該菜單項包含在SplitView.Pane中。 右邊是SplitView.Content，其中包含將在其中顯示SearchPage的框架。 單擊“搜索”菜單項時，我使用以下方法導航到SearchPage：

private void NavigationList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (createNavigationItem.IsSelected)
    {
        mainFrame.Navigate(typeof(CreatePage));
    }
    else if (searchNavigationItem.IsSelected)
    {
        mainFrame.Navigate(typeof(SearchPage));
    }
}

據我所知，問題不在於SearchPage。 我想強制SplitView.Content僅填充窗口中剩余的可用空間。 類似於在網格中設置<ColumnDefinition Width="*" /> 。

我獲得成功的唯一方法是顯式設置SearchPage上內容的寬度。 然后，框架增長以容納內容，隨后SplitView.Content也是如此。 我希望我的應用程序具有響應能力，但不要依賴顯式的大小。

這是包含SplitView的主窗口的XAML：

<Page
    x:Class="App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/> 
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <RelativePanel Grid.Row="0" Grid.Column="0">
            <Button Name="hamburgerButton" 
                    RelativePanel.AlignLeftWithPanel="True"
                    FontFamily="Segoe MDL2 Assets" 
                    FontSize="20" 
                    FontWeight="ExtraBold"
                    Background="Transparent"
                    Content="&#xE700;" 
                    Click="HamburgerButton_Click"/>
        </RelativePanel>

        <SplitView Name="navigationSplitView" 
                   Grid.Row="1" Grid.Column="0"
                   DisplayMode="Inline" 
                   OpenPaneLength="180"
                   CompactPaneLength="41"
                   HorizontalAlignment="Left">
            <SplitView.Pane>
                <ListBox Name="navigationList" 
                         SelectionMode="Single" 
                         SelectionChanged="NavigationList_SelectionChanged">
                    <ListBoxItem Name="createNavigationItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="20" Text="&#xE10F;"/>
                            <TextBlock FontSize="18" Text="Create" Margin="12,0,0,0"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="searchNavigationItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="20" FontWeight="Bold" Text="&#xE1A3;"/>
                            <TextBlock FontSize="18" Text="Search" Margin="12,0,0,0"/>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="mainFrame"
                       BorderBrush="Black"
                       BorderThickness="10"/>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

這是SearchPage的XAML

<Page
    x:Class="RecipeMaker.SearchPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RecipeMaker"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBlock FontSize="36" Text="Search"/>
    </Grid>
</Page>

Answer 1

嘗試拉伸

    <SplitView Name="navigationSplitView" 
           Grid.Row="1" Grid.Column="0"
           DisplayMode="Inline" 
           CompactPaneLength="41"
           HorizontalAlignment="Stretch"