Über Hamburger Menü Stil in UWP-Projekt

Question

Ich möchte wissen, wie Sie den gleichen Stil der Hamburger-Menü-Taste in this example (blaues Rechteck im linken Menü) in meinem UWP-Projekt mit XAML erreichen.

Ich weiß bereits, wie man dies mit Template 10 erreicht, aber jetzt möchte ich es selbst gestalten.

Danke!

Answer 1

Das Hamburger-Menü ist nur eine normale Schaltfläche mit dem Hamburger-Symbol. Sie können ganz einfach erstellen Sie Ihre eigenen wie:

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

mit folgenden Stil, die nur die Standardschaltfläche Stil mit ein paar kleinen Änderungen ist:

<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

Ich schlage vor, Sie die UWP Gemeinschaft Toolkit zu verwenden: http://docs.uwpcommunitytoolkit.com/en/master/controls/HamburgerMenu/ https://www.nuget.org/packages/Microsoft.Toolkit.Uwp/