Центрирование стековой панели в сетке UWP

#xaml #win-universal-app #uwp-xaml

Вопрос:

Для моего универсального приложения Windows я пытаюсь центрировать стековую панель в сетке на странице, как на рисунке. Но когда я запускаю приведенный ниже код, три кнопки располагаются по центру внизу. В чем может быть проблема?

MainPage.xaml:

 <Page>
    <Grid Background="WhiteSmoke">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid VerticalAlignment="Top">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10 0">
                <Button x:Name="BackButton" Height="50" Width="150" Background="{x:Null}" BorderBrush="White">
                    <StackPanel Orientation="Horizontal">
                        <Viewbox MaxHeight="50" MaxWidth="50">
                            <SymbolIcon Symbol="Back" Foreground="White"></SymbolIcon>
                        </Viewbox>
                        <TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" FontSize="20" FontWeight="Bold">Back</TextBlock>
                    </StackPanel>
                </Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button Width="150" Height="50" Content="Page 1" FontSize="20" FontWeight="Bold"/>
                <Button Width="150" Height="50" Content="Page 2" Foreground="#FFFFFF" FontSize="20" FontWeight="Bold"/>
                <Button Width="150" Height="50" Content="Page 3" Foreground="#FFFFFF" FontSize="20" FontWeight="Bold"/>
            </StackPanel>
            <Grid Width="150" Height="5" Background="#FFFFFF" HorizontalAlignment="Center" Margin="240" />
        </Grid>
        <Frame
            Grid.Row="1"
            x:Name="Frame">
        </Frame>
    </Grid>
</Page>

Страница 1.xaml

 <Page>
    <Grid Background="WhiteSmoke">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
                <StackPanel Orientation="Vertical">
                    <TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 1</TextBlock>
                </StackPanel>
            </Button>
            <Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
                <StackPanel Orientation="Vertical">
                    <TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 2</TextBlock>
                </StackPanel>
            </Button>
            <Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
                <StackPanel Orientation="Vertical">
                    <TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 3</TextBlock>
                </StackPanel>
            </Button>
        </StackPanel>
    </Grid>
</Page>

Редактировать:
решение заключается в:

 <Grid.RowDefinitions>
    <RowDefinition Height="0.1*"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

Удалить VerticalAlignment="Top" в сетке

1. Если вы решили свою проблему, пожалуйста, опубликуйте свой ответ ниже, пожалуйста, не публикуйте ответ в своем вопросе.

2. На самом деле, вам просто нужно переключить определения строк в самой верхней сетке. Первый с высотой = Auto, второй *

Ответ №1:

Решение заключается в установке разумного соотношения высот строк. И удалить VerticalAlignment="Top" из Grid места размещения в области строки 0.

 <Grid.RowDefinitions>
    <RowDefinition Height="0.1*"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

Обновить

По вашему требованию вам не нужно устанавливать пользовательскую панель навигации в верхней области. Вы могли бы использовать NavigationView для приближения. Последняя версия навигации обеспечивает
верхний режим отображения.

 <NavigationView x:Name="nvSample" Header="This is Header Text" PaneDisplayMode="Top">
    <NavigationView.MenuItems>
        <NavigationViewItem  Content="Menu Item1" Tag="SamplePage1" />
        <NavigationViewItem  Content="Menu Item2" Tag="SamplePage2" />
        <NavigationViewItem  Content="Menu Item3" Tag="SamplePage3" />
        <NavigationViewItem  Content="Menu Item4" Tag="SamplePage4" />
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame"/>
</NavigationView>

Для получения дополнительной информации, пожалуйста, обратитесь к NavigationView официальному документу.

1. Я не думаю, что установка высоты в 0.1 * (относительное значение) является хорошей идеей. это должно быть либо абсолютное значение, либо auto, поскольку высота заголовка не зависит от высоты родительского элемента (окна)

2. @Liero, да, но op дает свое решение, я просто помогаю перейти к приведенному ниже. Для его требований лучший способ — создать NavigationView в верхней области и поместить рамку ниже.