Question

我想知道如何使用XAML在我的UWP项目的this example（左侧菜单中的蓝色矩形）中实现相同风格的汉堡菜单按钮。

我已经知道如何使用Template 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/

关于UWP项目中的汉堡菜单样式

2 个答案: