在 UWP StackPanels 中添加间距

Question

我目前正在为我的学校编写一个 UWP 应用程序，并且想在 StackPanel 上分离一些项目，但是我不知道该怎么做，并且谷歌搜索只返回静态方法而不是动态方法，这意味着如果窗口正在调整大小，它搞砸了。我正在尝试将“我的帐户”和“设置”移动到堆栈面板栏的底部

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


   <Grid x:Name="mainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
       <SplitView x:Name="navBar" 
                  DisplayMode="CompactOverlay" 
                  IsPaneOpen="False" 
                  CompactPaneLength="50" 
                  OpenPaneLength="200"> 
           <SplitView.Pane> 
               <StackPanel Background = "#2b2b2b" >
 Button x:Name="hamburgerButton" 
                           FontFamily="Segoe MDL2 Assets" 
                           Content="&#xE700;" 
                           Width="50" 
                           Height="50" 
                           Background="#0063b1" 
                           Foreground="#ffffff" 
                           Click="hamburgerButton_Click"/> 

                   <StackPanel Orientation = "Horizontal" Background="#15476e"> 
                       <Button x:Name="homeButton" 
                               FontFamily="Segoe MDL2 Assets" 
                               Content="&#xE80F;" 
                               Width="50" 
                               Height="50" 
                               Background="#15476e" 
                               Foreground="#ffffff"/> 
                       <TextBlock Text = "Home"
                                  FontSize="14"  
                                  VerticalAlignment="Center" 
                                  Foreground="#ffffff"/> 
                   </StackPanel> 

                   <StackPanel Orientation = "Horizontal" Background="Transparent"> 
                       <Button x:Name="locateButton" 
                               FontFamily="Segoe MDL2 Assets" 
                               Content="&#xE8F0;" 
                               Width="50" 
                               Height="50" 
                               Background="Transparent" 
                               Foreground="#ffffff"/> 
                       <TextBlock Text = "Class Finder"
                                  FontSize="14"  
                                  VerticalAlignment="Center" 
                                  Foreground="#ffffff"/> 
                   </StackPanel> 


                   <StackPanel Orientation = "Horizontal" Background="Transparent"> 
                       <Button x:Name="classButton" 
                               FontFamily="Segoe MDL2 Assets" 
                               Content="&#xE8F1;" 
                               Width="50" 
                               Height="50" 
                               Background="Transparent" 
                               Foreground="#ffffff"/> 
                       <TextBlock Text = "Class List"
                                  FontSize="14"  
                                  VerticalAlignment="Center" 
                                  Foreground="#ffffff"/> 
                   </StackPanel> 


                   <StackPanel Orientation = "Horizontal" Background="Transparent"> 
                       <Button x:Name="daymapButton" 
                               FontFamily="Segoe MDL2 Assets" 
                               Content="&#xE753;" 
                               Width="50" 
                               Height="50" 
                               Background="Transparent" 
                               Foreground="#ffffff"/> 
                       <TextBlock Text = "DayMap"
                                  FontSize="14"  
                                  VerticalAlignment="Center" 
                                  Foreground="#ffffff"/> 
                   </StackPanel> 


                   <StackPanel Orientation = "Horizontal" Background="Transparent"> 
                       <Button x:Name="plannerButton" 
                               FontFamily="Segoe MDL2 Assets" 
                               Content="&#xE8F5;" 
                               Width="50" 
                               Height="50" 
                               Background="Transparent" 
                               Foreground="#ffffff"/> 
                       <TextBlock Text = "Planner"
                                  FontSize="14"  
                                  VerticalAlignment="Center" 
                                  Foreground="#ffffff"/> 
                   </StackPanel> 


                   <StackPanel Orientation = "Horizontal" Background="Transparent"> 
                       <Button x:Name="accountButton" 
                               FontFamily="Segoe MDL2 Assets" 
                                Content="&#xE77B;" 
                                Width="50" 
                                Height="50" 
                                Background="Transparent" 
                                Foreground="#ffffff"/> 
                        <TextBlock Text = "My Account"
                                   FontSize="14"  
                                   VerticalAlignment="Center" 
                                   Foreground="#ffffff"/> 
                    </StackPanel> 


                    <StackPanel Orientation = "Horizontal" Background="Transparent"> 
                        <Button x:Name="settingsButton" 
                                FontFamily="Segoe MDL2 Assets" 
                                Content="&#xE713;" 
                                Width="50" 
                                Height="50" 
                                Background="Transparent" 
                                Foreground="#ffffff"/> 
                        <TextBlock Text = "Settings"
                                   FontSize="14"  
                                   VerticalAlignment="Center" 
                                   Foreground="#ffffff"/> 
                    </StackPanel> 
                </StackPanel> 
            </SplitView.Pane> 
        </SplitView> 
    </Grid> 
</Page> 

提前非常感谢！

Answer 1

您可以使用带有 RowDefinitions 的 Grid 来代替 StackPanel。

将帐户和设置包装在一个 StackPanel（或另一个具有两个自动行的 Grid）中，并将其设置为填充可用空间的最后一行。然后对齐到底部，让它在你想要的位置。

示例代码：

<Grid Background="#2b2b2b">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" /> // fills available space
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" /> // hamburger
    <StackPanel Grid.Row="1" /> // home
    <StackPanel Grid.Row="2" /> // locate
    <StackPanel Grid.Row="3" /> // class
    <StackPanel Grid.Row="4" /> // daymap
    <StackPanel Grid.Row="5" /> // planner
    <StackPanel Grid.Row="6" VerticalAlignment="Bottom"> // wrapper
        <StackPanel /> // account
        <StackPanel /> // settings
    </StackPanel>
</Grid>