Hinzufügen von Abständen in UWP StackPanels

Question

Ich programmiere gerade eine UWP-Anwendung für meine Schule und möchte einige Elemente auf einem StackPanel trennen, aber ich habe keine Ahnung, wie es geht, und Googling gibt nur statische Methoden statt dynamische zurück Das bedeutet, wenn das Fenster seine Größe ändert, wird es vermasselt. Ich versuche, „Mein Konto“ und „Einstellungen“ auf die Unterseite des 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> 

Vielen Dank im Voraus zu bewegen!

Answer 1

Anstelle eines StackPanels können Sie ein Raster mit RowDefinitions verwenden.

Konto und Einstellungen in einem StackPanel (oder einem anderen Raster mit zwei automatischen Zeilen) umbrechen und als letzte Zeile festlegen, die den verfügbaren Platz ausfüllt. Dann Ausrichtung nach unten, um es an der gewünschten Position zu haben.

Beispielcode:

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