UWPプロジェクトのハンバーガーメニュースタイルについて

Question

私のUWPプロジェクトで、XAMLを使用してthis example（左メニューの青い四角形）の同じスタイルのハンバーガーメニューボタンを達成する方法を知りたいと思います。

私はすでにテンプレート10を使ってこれを達成する方法を知っていますが、今は自分で設計したいと思います。

ありがとうございます！

Answer 1

ハンバーガーメニューは、ハンバーガーアイコンが付いた通常のボタンです。 あなたは簡単に自分のようなを作成することができますいくつかのマイナーな変更を伴うだけで、デフォルトのボタンのスタイルで次のスタイルで

<Button x:Name="navigationMenu" 
     Style="{StaticResource NavigationMenuButton}" 
     Command="{x:Bind ShowHideNavigationMenuCommand}" /> 

：

<Style x:Key="NavigationMenuButton" TargetType="Button" BasedOn="{StaticResource NavigationBackButtonSmallStyle}"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="Foreground" Value="{ThemeResource TitleBarForegroundColor}" /> 
     <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" /> 
     <Setter Property="Content" Value="&#xE700;" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid x:Name="RootGrid" 
          Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
                     Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SystemColorHighlightHighColor}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
                     Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SystemColorHighlightColor}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" 
                     Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SubtleColor}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="Content" 
              Content="{TemplateBinding Content}" 
              Foreground="{TemplateBinding Foreground}" 
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
              AutomationProperties.AccessibilityView="Raw" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 2

を私はあなたがUWPコミュニティツールキットを使用することをお勧め： http://docs.uwpcommunitytoolkit.com/en/master/controls/HamburgerMenu/ https://www.nuget.org/packages/Microsoft.Toolkit.Uwp/