UWP導航窗格問題

Question

我正在尋找一種使用SplitView和其他XAML控件創建導航窗格的方法。

我試着創建類似下面的代碼，但我失敗了，因爲控件沒有精確地放置在中心（垂直）。

此外，按鈕有這種奇怪的默認動畫，當他們被點擊時，他們傾斜。我想關閉它，但我不知道如何。

總而言之，我想創建一個類似於Windows 10週年更新中「開始」菜單的漢堡菜單。所有的意見將非常感激。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <SplitView x:Name="hamburgerMenu" HorizontalAlignment="Left" Width="319" DisplayMode="CompactOverlay"> 
     <SplitView.Pane> 
      <StackPanel> 
       <Button x:Name="HamburgerButton" Width="320" Height="48" Click="HamburgerButtonClick" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left"> 
        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0"> 
         <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE700;" TextAlignment="Center" Margin="0,1,0,0" /> 
         <TextBlock Text="MENU" Margin="0,0,0,0" FontWeight="Bold" /> 
        </StackPanel> 
       </Button> 
       <Button x:Name="TasksButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left"> 
        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0"> 
         <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE133;" TextAlignment="Center" VerticalAlignment="Center" /> 
         <TextBlock Text="Tasks" Margin="0,0,0,0"/> 
        </StackPanel> 
       </Button> 
       <Button x:Name="ArchivedButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left"> 
        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0"> 
         <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE73A;" TextAlignment="Center" VerticalAlignment="Center" /> 
         <TextBlock Text="Archived" Margin="0,0,0,0"/> 
        </StackPanel> 
       </Button> 
      </StackPanel> 
     </SplitView.Pane> 
    </SplitView> 
</Grid> 

這裏是我想達到的目標：

截圖：http://imgur.com/a/utNmC

Answer 1

MessiKing的模板10是一個好主意，會爲你節省大量的時間。那毫無疑問。但是這並不能幫助您瞭解XAML如何處理控件，因爲它們都是由專家處理的。但是，如果您想了解如何在沒有任何第三方庫的情況下以純粹的XAML工作，請參見下文。

你XAML將類似於下面

<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Stretch" OpenPaneLength="150" DisplayMode="CompactOverlay" IsPaneOpen="True"> 
    <SplitView.Pane> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Button x:Name="HamburgerButton" Click="HamburgerButtonClick" Style="{StaticResource TextBlockButtonStyle}" FontWeight="Bold" VerticalAlignment="Top"> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" > 
        <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE700;" TextAlignment="Center" Padding="5" /> 
        <TextBlock Text="MENU" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/> 
       </StackPanel> 
      </Button> 
      <Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top"> 
       <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 

      <Button x:Name="TasksButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="1"> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
        <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE133;" TextAlignment="Center" Padding="5" /> 
        <TextBlock Text="Tasks" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/> 
       </StackPanel> 
      </Button> 
      <Button x:Name="ArchivedButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="2"> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
        <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE73A;" TextAlignment="Center" Margin="5" /> 
        <TextBlock Text="Archived" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/> 
       </StackPanel> 
      </Button> 
      </Grid> 
     </Grid> 
    </SplitView.Pane> 
</SplitView> 

輸出

現在爲造型的按鈕。 Microsoft提供的默認樣式包括一個名爲TextBlockButtonStyle的StaticResource，它將將您的按鈕樣式更改爲TextBlock。看看這個。

也有一個原因，爲什麼我將列表項包裹在網格中。因爲如果你改變

<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top"> 

到

<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Bottom"> 

你會看到它類似下面。

好運和快樂編碼。

Answer 2

Dziewulski，

如果你想使一個hamburgerMenu，使用模板10將保存你很多時間。

當您在Visual Studio中安裝模板10時，您將很容易創建一個包含hamburgerMenu的項目。

請參閱這些影片的詳細信息：Template 10 for Windows 10 Apps

Template 10: How to Build Your Universal Windows App

Answer 3

嘗試使用Microsoft的UWP工具包。它包含一個漢堡菜單： https://github.com/Microsoft/UWPCommunityToolkit