关于汉堡菜单风格在UWP项目

本文关键字：UWP 项目 风格 于汉堡 菜单 | 更新日期: 2023-09-27 18:12:38

我想知道如何在我的UWP项目中使用XAML实现这个例子中汉堡包菜单按钮(左侧菜单中的蓝色矩形)的相同样式。

我已经知道如何使用模板10实现这一点，但现在我想自己设计它。

谢谢!

关于汉堡菜单风格在UWP项目

汉堡包菜单只是一个带有汉堡包图标的普通按钮。您可以轻松地创建自己的，如:

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

我建议您使用UWP社区工具包:http://docs.uwpcommunitytoolkit.com/en/master/controls/HamburgerMenu/https://www.nuget.org/packages/Microsoft.Toolkit.Uwp/

相关文章：