UWPナビゲーションペインの問題

Question

SplitViewと他のXAMLコントロールを使用してナビゲーションペインを作成する方法を探しています。

私は下のコードのようなものを作成しようとしましたが、コントロールが中央（垂直）の中央に正確に配置されていないため失敗しました。

また、このボタンには、クリックしたときに歪んだデフォルトの奇妙なアニメーションがあります。私はそれをオフにしたいが、私は方法を知らない。

Windows 10 Anniversary Updateの[スタート]メニューに似たハンバーガーメニューを作成します。すべての意見は非常に高く評価されます。ここで

<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はボタンのスタイリングのために今

<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="Bottom"> 

に

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

を変更した場合、あなたはそれを以下のようなものが表示されますので。

グッドラックとコーディング幸せ。

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