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

【问题标题】：How to vertical alignment StackPanel in Universal Windows App?如何在通用 Windows 应用程序中垂直对齐 StackPanel？
【发布时间】：2016-05-01 20:55:32
【问题描述】：

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

我的xml：

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

实际与期望的行为：

【问题讨论】：

标签： c# xaml user-interface win-universal-app windows-10-universal

【解决方案1】：

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

如果没有一个好的Minimal, Complete, and verifiable example 可以清楚而完整地显示您的 XAML 的结构，就不可能确定最好的方法是什么。但是，有几种策略可能对您有用：

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

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

【讨论】：

您也可以借助新添加的相关面板。在使用堆栈面板之前三思而后行（尽管这是最常用和易于使用的容器之一）。您还会想知道滚动在堆栈面板中何时不起作用。

【解决方案2】：

这是怎么做的：

定义 3 个RowDefintions 假设您有一个用于ListBox 或ListView，其中包括“添加和播放”项，还有一个用于设置。为此，请在您的 MainPage.xaml Grid 添加 2 RowDefintions

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

之后，在您的SplitView 中添加Grid.Row="0"

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

【讨论】：