如何在通用Windows应用程序中垂直对齐StackPanel？

Question

如何将下方的设置按钮与窗口底部对齐？ VerticalAlignment="Bottom"没有让设置按钮出现在窗口的底部。我正在使用visual studio 2015 Update 2，项目模板是BlankApp（通用Windows）。

我的xaml：

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
                        CompactPaneLength="60" OpenPaneLength="250">
<SplitView.Pane>
    <StackPanel BorderBrush="#FF2B2B2B" Background="{ThemeResource SystemControlHighlightListAccentHighBrush}" RequestedTheme="Dark" BorderThickness="0">
        <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                            Width="60" Height="60" Background="Transparent" Click="HamburgerButton_Click"/>
        <StackPanel Orientation="Horizontal">
            <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE710;"
                            Width="60" Height="60" Background="Transparent" Click="MenuButton1_Click"/>
            <TextBlock Text="Pobierz dane wiosek" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>

        <!-- ... -->

        <!-- here is problem -->
        <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
            <Button x:Name="MenuButtonSettegins" FontFamily="Segoe MDL2 Assets" Content="&#xE713;"
                                Width="60" Height="60" Background="Transparent" Click="MenuButtonSettegins_Click"/>
            <TextBlock Text="Ustawienia" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
        <!-- here is problem -->
        <Grid Height="100"/>
    </StackPanel>
</SplitView.Pane>
<SplitView.Content>
    <Grid Margin="10,0,-10,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="17*"/>
            <RowDefinition Height="19*"/>
        </Grid.RowDefinitions>
        <WebView x:Name="browser" Margin="-10,0,10,0" Grid.RowSpan="2" LoadCompleted="browser_LoadCompleted" Loaded="browser_Loading" NavigationStarting="browser_NavigationStarting">
        </WebView>
    </Grid>
</SplitView.Content>

实际与期望的行为：

Answer 1

A StackPanel堆叠东西。即它们必须一个接一个地放置，没有额外的间距来进行进一步的布局安排。在这种情况下，VerticalAlignment属性将被忽略。

如果没有一个好的Minimal, Complete, and verifiable example能够清楚而完整地显示您的XAML的结构，那么无法确定最佳方法是什么。但是，有一些策略可能适合您：

1. 不使用StackPanel作为窗格，而是使用Grid。为除最后一个项目之外的所有项目添加<RowDefinition Height="Auto"/>。对于那个，使用<RowDefinition Height="*"/>以便占用剩余空间。然后VerticalAlignment="Bottom"应该具有您想要的效果。
2. 不使用StackPanel作为窗格，而是使用DockPanel。将最后一项作为DockPanel的子项单独放置，并将其DockPanel.Dock属性设置为DockPanel.Dock="Bottom"。然后，包括一个垂直StackPanel，其中放置所有其他项目;这将默认为Fill属性的Dock值。

WPF有一个广泛的布局引擎，我确定还有其他方法来完成你想要的布局，但我认为以上两个选项是最简单的。

Answer 2

以下是如何操作：

定义3 rated-5 假设您有一个RowDefintions或ListBox，其中包含添加和播放项，另一个用于设置。为此，请在ListView MainPage.xaml 添加 2 Grid

RowDefintions

之后，在<Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> <!-- You can adjust the height for this --> </Grid.RowDefinitions>

中填写Grid.Row="0"

现在将设置SplitView放在单独的StackPanel中（制作另一个SplitView SplitView具有Grid.Row="1"的相同标志，值和所有与第一个具有相同样式的样式。这样，您可以使用Grid.RowDefintions（垂直定位）​​和Grid.ColumDefintions（水平定位）方法将其设置在任何位置。