CODEWITHSUNDEEP
c#xamluwpwindows-10uwp-xaml
HappyZhang
HappyZhang

Reputation: 37

About hamburger menu style in UWP project

I want to know how to achieve the same style of the hamburger menu button in this example (blue rectangle in left menu) in my UWP project by using XAML.

I already know how to achieve this using Template 10, but now I want to design it by myself.

Thanks!

Upvotes: 0

Views: 643

Answers (2)

Stefano Balzarotti
Stefano Balzarotti

Reputation: 1904

I suggest you to use the UWP Community toolkit: http://docs.uwpcommunitytoolkit.com/en/master/controls/HamburgerMenu/ https://www.nuget.org/packages/Microsoft.Toolkit.Uwp/

Upvotes: 1

Vincent
Vincent

Reputation: 3746

The hamburger menu is just a regular button with the hamburger icon. You can easily create your own like:

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

With the following style which is just the default button style with a few minor changes:

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

Upvotes: 1

Related Questions