[UWP]如何在Uwp中创建自定义appbarbutton菜单 [英] [UWP]How to create custom appbarbutton menu in Uwp

查看:108
本文介绍了[UWP]如何在Uwp中创建自定义appbarbutton菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 



如何创建和设计自定义AppBarButton,如下图所示。标签是可见的,当它被击中时,标签变为粗体。  并看到每个菜单之间的空格相等。 





解决方案

嗨Elezard!


以下是代码: 

< ; Page 
x:Class =" App4.MainPage"
xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x =" http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local =" using:App4"
xmlns:d =" http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc =" http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable =" d">
< Page.Resources>
<! - Windows.UI.Xaml.Controls.AppBarToggleButton的默认样式 - >
< Style TargetType =" AppBarToggleButton" X:名称= QUOT; AppBarToggleButtonStyle">
< Setter Property =" Background"
Value =" Transparent" />
< Setter Property =" Foreground"
值="灰色" />
< Setter Property =" Horizo​​ntalAlignment"
Value =" Left" />
< Setter Property =" VerticalAlignment"
Value =" Top" />
< Setter Property =" FontFamily"
Value =" {ThemeResource ContentControlThemeFontFamily}" />
< Setter Property =" FontWeight"
Value =" Normal" />
< Setter Property =" Width"
Value =" 68" />
< Setter Property =" UseSystemFocusVisuals"
Value =" True" />
< Setter Property =" Template">
< Setter.Value>
< ControlTemplate TargetType =" AppBarToggleButton">
< Grid x:Name =" Root"
MinWidth =" {TemplateBinding MinWidth}"
MaxWidth =" {TemplateBinding MaxWidth}"
背景=" {TemplateBinding Background}">
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name =" ApplicationViewStates">
< VisualState x:Name =" FullSize" />
< VisualState x:Name =" Compact">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty ="可见性">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Collapsed" />
< / ObjectAnimationUsingKeyFrames>
< / Storyboard>
< / VisualState>
< VisualState x:Name =" Overflow">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" CheckedHighlightBackground"
Storyboard.TargetProperty ="可见性">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Collapsed" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty ="可见性">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="可见" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty ="可见性">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="可见" />
< / ObjectAnimationUsingKeyFrames>
< / Storyboard>
< / VisualState>
< / VisualStateGroup>
< VisualStateGroup x:Name =" CommonStates">
< VisualState x:Name =" Normal">
< Storyboard>
< PointerUpThemeAnimation Storyboard.TargetName =" OverflowContentRoot" />
< / Storyboard>
< / VisualState>
< VisualState x:Name =" PointerOver">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" AccentOverlayBackground"
Storyboard.TargetProperty =" Fill">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Transparent" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" FontWeight"
>
< DiscreteObjectKeyFrame KeyTime =" 0"
值=" Bold" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< PointerUpThemeAnimation Storyboard.TargetName =" OverflowContentRoot" />
< / Storyboard>
< / VisualState>
< VisualState x:Name =" Pressed">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" AccentOverlayBackground"
Storyboard.TargetProperty =" Fill">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Transparent" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" FontWeight">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Bold" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< PointerUpThemeAnimation Storyboard.TargetName =" OverflowContentRoot" />
< / Storyboard>
< / VisualState>
< VisualState x:Name =" Disabled">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
< / ObjectAnimationUsingKeyFrames>
< / Storyboard>
< / VisualState>
< VisualState x:Name =" Checked">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" AccentOverlayBackground"
Storyboard.TargetProperty =" Fill">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Transparent" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" FontWeight">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Bold" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< PointerUpThemeAnimation Storyboard.TargetName =" OverflowContentRoot" />
< / Storyboard>
< / VisualState>
< VisualState x:Name =" CheckedPointerOver">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" AccentOverlayBackground"
Storyboard.TargetProperty =" Fill">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Transparent" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" FontWeight">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Bold" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< PointerUpThemeAnimation Storyboard.TargetName =" OverflowContentRoot" />
< / Storyboard>
< / VisualState>
< VisualState x:Name =" CheckedPressed">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" AccentOverlayBackground"
Storyboard.TargetProperty =" Fill">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Transparent" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" FontWeight">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" Bold" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
值="黑色" />
< / ObjectAnimationUsingKeyFrames>
< PointerUpThemeAnimation Storyboard.TargetName =" OverflowContentRoot" />
< / Storyboard>
< / VisualState>
< VisualState x:Name =" CheckedDisabled">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" CheckedHighlightBackground"
Storyboard.TargetProperty =" Fill">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlDisabledAccentBrush}" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" CheckedHighlightBackground"
Storyboard.TargetProperty =" Opacity">
< DiscreteObjectKeyFrame KeyTime =" 0"
值=" 1" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Opacity">
< DiscreteObjectKeyFrame KeyTime =" 0"
值=" 1" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" TextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowCheckGlyph"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
< / ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =" OverflowTextLabel"
Storyboard.TargetProperty =" Foreground">
< DiscreteObjectKeyFrame KeyTime =" 0"
Value =" {ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
< / ObjectAnimationUsingKeyFrames>
< / Storyboard>
< / VisualState>
< / VisualStateGroup>
< VisualStateGroup x:Name =" InputModeStates">
< VisualState x:Name =" InputModeDefault" />
< VisualState x:Name =" TouchInputMode">
< VisualState.Setters>
< Setter Target =" OverflowTextLabel.Padding"
Value =" 0,11,0,13" />
< Setter Target =" OverflowCheckGlyph.Margin"
Value =" 12,12,12,12" />
< /VisualState.Setters>
< / VisualState>
< / VisualStateGroup>
< /VisualStateManager.VisualStateGroups>

< Rectangle x:Name =" CheckedHighlightBackground"
Fill =" Transparent"
Opacity =" 0" />
< Rectangle x:Name =" AccentOverlayBackground" />

< StackPanel x:Name =" ContentRoot"
>

< TextBlock x:Name =" TextLabel"
Text =" {TemplateBinding Label}"
Foreground =" Gray"
FontSize =" 12"
FontFamily =" {TemplateBinding FontFamily}"
TextAlignment =" Center"
TextWrapping =" Wrap"
Margin =" 0,0,0,6" />
< / StackPanel>

< Grid x:Name =" OverflowContentRoot">
< TextBlock x:Name =" OverflowCheckGlyph"
Text ="&#xE73E;"
Foreground =" Gray"
FontFamily =" {ThemeResource SymbolThemeFontFamily}"
FontSize =" 16"
Horizo​​ntalAlignment =" Left"
VerticalAlignment =" Center"
高度="14"
Width =" 14"
Margin =" 12,6,12,6"
Opacity =" 0"
Visibility =" Collapsed" />

< TextBlock x:Name =" OverflowTextLabel"
Text =" {TemplateBinding Label}"
Foreground =" Gray"
FontSize =" 15"
FontFamily =" {TemplateBinding FontFamily}"
TextAlignment =" Left"
TextTrimming =" Clip"
TextWrapping =" NoWrap"
Horizo​​ntalAlignment =" Stretch"
VerticalAlignment =" Center"
Margin =" 38,0,12,0"
Padding =" 0,5,0,7"
Visibility =" Collapsed" />
< / Grid>

< / Grid>
< / ControlTemplate>
< /Setter.Value>
< / Setter>
< / Style>
< /Page.Resources>
< Grid Background =" {ThemeResource ApplicationPageBackgroundThemeBrush}">
< StackPanel Margin =" 20"取向= QUOT;水平">
< AppBarToggleButton Label =" Home"
Style =" {StaticResource AppBarToggleButtonStyle}" />
< AppBarToggleButton Label =" Apps"
Style =" {StaticResource AppBarToggleButtonStyle}" />
< AppBarToggleButton Label =" Games"
Style =" {StaticResource AppBarToggleButtonStyle}" />
< AppBarToggleButton Label =" Music"
Style =" {StaticResource AppBarToggleButtonStyle}" />
< / StackPanel>

< / Grid>
< / Page>



希望它有用。


< p style ="border:none; font-family:'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; outline:0px; padding-right:0px; color:#333333; font-size :14px">
如果是对你有好处,你能否将这个答案标记为你的问题的答案?



在twitter上关注我:  https://twitter.com/NordineMhoumadi




Hi, 

How to create and design custom AppBarButton like sample below. The label is visible and when it is hit, the label becomes bold.  And see the spaces between each menu are equal. 


解决方案

Hi Elezard !

Here is the code : 

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <!-- Default style for Windows.UI.Xaml.Controls.AppBarToggleButton -->
        <Style TargetType="AppBarToggleButton" x:Name="AppBarToggleButtonStyle">
            <Setter Property="Background"
                    Value="Transparent" />
            <Setter Property="Foreground"
                    Value="Gray" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="VerticalAlignment"
                    Value="Top" />
            <Setter Property="FontFamily"
                    Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight"
                    Value="Normal" />
            <Setter Property="Width"
                    Value="68" />
            <Setter Property="UseSystemFocusVisuals"
                    Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="AppBarToggleButton">
                        <Grid x:Name="Root"
                              MinWidth="{TemplateBinding MinWidth}"
                              MaxWidth="{TemplateBinding MaxWidth}"
                              Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullSize" />
                                    <VisualState x:Name="Compact">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Overflow">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedHighlightBackground"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AccentOverlayBackground"
                                                                           Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="FontWeight"
                                                                            >
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Bold"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AccentOverlayBackground"
                                                                           Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="FontWeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Bold" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AccentOverlayBackground"
                                                                           Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="FontWeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Bold" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AccentOverlayBackground"
                                                                           Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="FontWeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Bold" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AccentOverlayBackground"
                                                                           Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="FontWeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Bold" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Black" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedHighlightBackground"
                                                                           Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlDisabledAccentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedHighlightBackground"
                                                                           Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="1" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="1" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                                           Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="InputModeStates">
                                    <VisualState x:Name="InputModeDefault" />
                                    <VisualState x:Name="TouchInputMode">
                                        <VisualState.Setters>
                                            <Setter Target="OverflowTextLabel.Padding"
                                                    Value="0,11,0,13" />
                                            <Setter Target="OverflowCheckGlyph.Margin"
                                                    Value="12,12,12,12" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Rectangle x:Name="CheckedHighlightBackground"
                                       Fill="Transparent"
                                       Opacity="0" />
                            <Rectangle x:Name="AccentOverlayBackground" />

                            <StackPanel x:Name="ContentRoot"
                                        >

                                <TextBlock x:Name="TextLabel"
                                           Text="{TemplateBinding Label}"
                                           Foreground="Gray" 
                                           FontSize="12"
                                           FontFamily="{TemplateBinding FontFamily}"
                                           TextAlignment="Center"
                                           TextWrapping="Wrap"
                                           Margin="0,0,0,6" />
                            </StackPanel>

                            <Grid x:Name="OverflowContentRoot">
                                <TextBlock x:Name="OverflowCheckGlyph"
                                           Text="&#xE73E;"
                                           Foreground="Gray"
                                           FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                           FontSize="16"
                                           HorizontalAlignment="Left"
                                           VerticalAlignment="Center"
                                           Height="14"
                                           Width="14"
                                           Margin="12,6,12,6"
                                           Opacity="0"
                                           Visibility="Collapsed" />

                                <TextBlock x:Name="OverflowTextLabel"
                                           Text="{TemplateBinding Label}"
                                           Foreground="Gray"
                                           FontSize="15"
                                           FontFamily="{TemplateBinding FontFamily}"
                                           TextAlignment="Left"
                                           TextTrimming="Clip"
                                           TextWrapping="NoWrap"
                                           HorizontalAlignment="Stretch"
                                           VerticalAlignment="Center"
                                           Margin="38,0,12,0"
                                           Padding="0,5,0,7"
                                           Visibility="Collapsed" />
                            </Grid>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Margin="20" Orientation="Horizontal">
            <AppBarToggleButton Label="Home" 
                                Style="{StaticResource AppBarToggleButtonStyle}"/>
            <AppBarToggleButton Label="Apps"
                                Style="{StaticResource AppBarToggleButtonStyle}" />
            <AppBarToggleButton Label="Games"
                                Style="{StaticResource AppBarToggleButtonStyle}" />
            <AppBarToggleButton Label="Music"
                                Style="{StaticResource AppBarToggleButtonStyle}" />
        </StackPanel>

    </Grid>
</Page>

Hope it wil be useful.

If it's good for you, can you mark this answer as answer of your question please?

Follow me on twitter : https://twitter.com/NordineMhoumadi


这篇关于[UWP]如何在Uwp中创建自定义appbarbutton菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆