В UWP / XAML Как заставить SplitView.Content заполнить оставшееся пространство в окне? - PullRequest
Новая
       5

В UWP / XAML Как заставить SplitView.Content заполнить оставшееся пространство в окне?

0 голосов
/ 07 декабря 2018

Я пытаюсь управлять макетом приложения универсальной платформы Windows без особого успеха.

Вот скриншот макета: Снимок экрана приложения

Каксделать так, чтобы область «Поиск» справа (обведенная черной рамкой) заполняла оставшееся пространство справа?

Основной областью приложения является контейнер SplitView.Слева находится ListBox с элементами меню навигации, которые содержатся в SplitView.Pane.Справа находится SplitView.Content, содержащий фрейм, в котором будет отображаться страница поиска.При нажатии на пункт меню «Поиск» я перехожу к 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.Я хочу, чтобы мое приложение было отзывчивым и не полагалось на явные размеры.

Вот XAML главного окна, содержащего SplitView: 

<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>

А вот XAMLSearchPage 

<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>

1 Ответ

0 голосов
/ 07 декабря 2018

Попробуйте Stretch 

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