Adding spacing in UWP StackPanels

Question

I'm currently programming a UWP application for my school and would like to separate some items on a StackPanel, however I have no idea how to do it, and googling only returns static methods rather than dynamic ones, meaning if the window is resize, it screws up. I am trying to move "My Account" and "Settings" to the bottom of the stackpanel bar

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

Thanks so much in advance!

Answer 1

Instead of a StackPanel, you could use a Grid with RowDefinitions.

Wrap account and settings in one StackPanel (or another Grid with two auto rows) and set it as the last row that fills available space. Then alignment to bottom to have it at the position you want.

Example code:

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