UWP AppBarButton 前景色在不同的 windows SDK 版本中不起作用

Question

I have an Xamarin application that I am working on. We have a custom style template in xaml for our AppBarButton for use in UWP. The customs styling is working for Windows 10 Fall Creators Update SDK. But when we are trying and change to the Windows 10, Version 1803 or higher, The Styling is no longer accepted or used for the Button. Does anyone know if there was any change in how you needed to create custom templates in the Xaml to apply custom styling?

Here is a my app.xaml

    <Application
        x:Class="ServicePro.UWP.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        RequestedTheme="Light">
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ServiceProResources.xaml" />
                    <ResourceDictionary Source="ms-appx:///Msi.CustomForms.UWP/Resources.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>

Here is the custom Resource directory.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:uwp="using:Xamarin.Forms.Platform.UWP">
    <x:Double x:Key="TitleBarHeight">48</x:Double>
    <uwp:BoolToVisibilityConverter x:Key="BoolVisibilityConverter" />
    <uwp:BoolToVisibilityConverter x:Key="InvertedBoolVisibilityConverter" FalseIsVisible="True" />
    <uwp:HeightConverter x:Key="HeightConverter" />
    <uwp:ViewToRendererConverter x:Key="ViewToRenderer" />
    <Style TargetType="AppBarButton">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource DefaultButtonBrush}"/>
        <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="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="AppBarButton">
                    <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="ContentRoot" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="OverflowWithToggleButtons">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DefaultButtonBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DefaultButtonBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource DefaultButtonBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonMouseOverBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonMouseOverBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonMouseOverBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonMouseOverBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonMouseOverBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonMouseOverBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" 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" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
                            <ContentPresenter
                x:Name="Content"
                Height="20"
                Margin="0,14,0,4"
                Content="{TemplateBinding Icon}"
                Foreground="{TemplateBinding Foreground}"
                HorizontalAlignment="Stretch"
                AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock
                x:Name="TextLabel"
                Text="{TemplateBinding Label}"
                Foreground="{TemplateBinding Foreground}"
                FontSize="12"
                FontFamily="{TemplateBinding FontFamily}"
                TextAlignment="Center"
                TextWrapping="Wrap"
                Margin="0,0,0,6"/>
                        </StackPanel>

                        <TextBlock
              x:Name="OverflowTextLabel"
              Text="{TemplateBinding Label}"
              Foreground="{TemplateBinding Foreground}"
              FontSize="15"
              FontFamily="{TemplateBinding FontFamily}"
              TextAlignment="Left"
              TextTrimming="Clip"
              TextWrapping="NoWrap"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Margin="12,0,12,0"
              Padding="0,5,0,7"
              Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="AppBarEllipsisButtonForegroundPressed" Color="#F89406"/>
            <SolidColorBrush x:Key="AppBarEllipsisButtonForegroundPointerOver" Color="#F89406"/>
            <SolidColorBrush x:Key="AppBarButtonForegroundPressed" Color="#F89406"/>
            <SolidColorBrush x:Key="AppBarButtonBackgroundPressed" Color="Red"/>
            <SolidColorBrush x:Key="AppBarButtonForegroundPointerOver" Color="#F89406"/>
            <SolidColorBrush x:Key="AppBarButtonBackgroundPointerOver" Color="Blue"/>
            <SolidColorBrush x:Key="SwitchEnabledOnBrush" Color="#00BB00"/>
            <SolidColorBrush x:Key="SwitchDisabledOnBrush" Color="#9ee79e"/>
            <SolidColorBrush x:Key="SwitchEnabledOffBrush" Color="#FF0000"/>
            <SolidColorBrush x:Key="SwitchDisabledOffBrush" Color="#e79fa0"/>
            <SolidColorBrush x:Key="TextBoxFocusedBorderBrush" Color="#F89406"/>
            <SolidColorBrush x:Key="TextBoxBorderBrush" Color="#3084BF"/>
            <SolidColorBrush x:Key="TextBoxDisabledBorderBrush" Color="#E9E9E9"/>
            <SolidColorBrush x:Key="TextColorEnabled" Color="#3084BF"/>
            <SolidColorBrush x:Key="TextColorDisabled" Color="Black"/>
            <SolidColorBrush x:Key="TextColorFocused" Color="#3084BF"/>
            <SolidColorBrush x:Key="TextColorHover" Color="#F89406"/>
            <SolidColorBrush x:Key="LineSeparatorBrush" Color="Black"/>
            <SolidColorBrush x:Key="DefaultButtonBrush" Color="#3084BF"/>
            <SolidColorBrush x:Key="ButtonMouseOverBrush" Color="#F89406"/>
            <SolidColorBrush x:Key="ButtonMouseOverBackgroundBrush" Color="#E9E9E9"/>
            <SolidColorBrush x:Key="ListViewSelectedItemBrush" Color="#F89406"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

Answer 1

It turns out that i was not trying to style the correct element.

I need to add x:key="AppBarButtonRevealStyle to the style deceleration. Then there was a problem with the hierarchy of inheritance that the element was getting its style from.

Answer 2

Does anyone know if there was any change in how you needed to create custom templates in the Xaml to apply custom styling?

You could get the latest AppBarButton style in generic.xaml file where in UWP client app. And I have compared with you mentioned style, it modify ContentRoot into Grid panel etc.. Please use the following to replace above style.

<Style TargetType="AppBarButton">
        <Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}" />
        <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="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="AllowFocusOnInteraction" Value="False" />
        <Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="AppBarButton">
                    <Grid x:Name="Root"
                        MinWidth="{TemplateBinding MinWidth}"
                        MaxWidth="{TemplateBinding MaxWidth}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}" >

                        <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="LabelOnRight">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxMargin}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Column)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="TextAlignment">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarButtonTextLabelOnRightMargin}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LabelCollapsed">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Overflow">
                                    <VisualState.Setters>
                                        <Setter Target="ContentRoot.MinHeight" Value="0" />
                                        <Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
                                        <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                        <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OverflowWithToggleButtons">
                                    <VisualState.Setters>
                                        <Setter Target="ContentRoot.MinHeight" Value="0" />
                                        <Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
                                        <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                        <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                        <Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OverflowWithMenuIcons">
                                    <VisualState.Setters>
                                        <Setter Target="ContentRoot.MinHeight" Value="0" />
                                        <Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
                                        <Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
                                        <Setter Target="ContentViewbox.Width" Value="16" />
                                        <Setter Target="ContentViewbox.Height" Value="16" />
                                        <Setter Target="ContentViewbox.Margin" Value="12,0,12,0" />
                                        <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                        <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                        <Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OverflowWithToggleButtonsAndMenuIcons">
                                    <VisualState.Setters>
                                        <Setter Target="ContentRoot.MinHeight" Value="0" />
                                        <Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
                                        <Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
                                        <Setter Target="ContentViewbox.Width" Value="16" />
                                        <Setter Target="ContentViewbox.Height" Value="16" />
                                        <Setter Target="ContentViewbox.Margin" Value="38,0,12,0" />
                                        <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                        <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                        <Setter Target="OverflowTextLabel.Margin" Value="76,0,12,0" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                        <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                        <Setter Target="AppBarButtonInnerBorder.Stroke" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                        <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                        <Setter Target="AppBarButtonInnerBorder.Stroke" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
                                        <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                                        <Setter Target="AppBarButtonInnerBorder.Stroke" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OverflowNormal">

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="OverflowPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                        <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                        <Setter Target="AppBarButtonInnerBorder.Stroke" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
                                        <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="OverflowPressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                        <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                        <Setter Target="AppBarButtonInnerBorder.Stroke" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
                                        <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentRoot" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="OverflowSubMenuOpened">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundSubMenuOpened}" />
                                        <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushSubMenuOpened}" />
                                        <Setter Target="AppBarButtonInnerBorder.Stroke" Value="{ThemeResource AppBarButtonBorderBrushSubMenuOpened}" />
                                        <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                        <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundSubMenuOpened}" />
                                        <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundSubMenuOpened}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="InputModeStates">
                                <VisualState x:Name="InputModeDefault" />
                                <VisualState x:Name="TouchInputMode">
                                    <VisualState.Setters>
                                        <Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="GameControllerInputMode">
                                    <VisualState.Setters>
                                        <Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
                                <VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
                                <VisualState x:Name="KeyboardAcceleratorTextVisible">
                                    <VisualState.Setters>
                                        <Setter Target="KeyboardAcceleratorTextLabel.Visibility" Value="Visible" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FlyoutStates">
                                <VisualState x:Name="NoFlyout" />
                                <VisualState x:Name="HasFlyout">
                                    <VisualState.Setters>
                                        <Setter Target="SubItemChevron.Visibility" Value="Visible" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="AppBarButtonInnerBorder" StrokeThickness="1" Stroke="{TemplateBinding BorderBrush}" />
                        <Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Viewbox x:Name="ContentViewbox"
                                Height="{ThemeResource AppBarButtonContentHeight}"
                                Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"
                                HorizontalAlignment="Stretch"
                                AutomationProperties.AccessibilityView="Raw" >
                                <ContentPresenter x:Name="Content"
                                    Content="{TemplateBinding Icon}"
                                    Foreground="{TemplateBinding Foreground}"/>
                            </Viewbox>
                            <TextBlock x:Name="TextLabel"
                                Grid.Row="1"
                                Text="{TemplateBinding Label}"
                                Foreground="{TemplateBinding Foreground}"
                                FontSize="12"
                                FontFamily="{TemplateBinding FontFamily}"
                                TextAlignment="Center"
                                TextWrapping="Wrap"
                                Margin="{ThemeResource AppBarButtonTextLabelMargin}"
                                AutomationProperties.AccessibilityView="Raw" />
                            <TextBlock x:Name="OverflowTextLabel"
                                Text="{TemplateBinding Label}"
                                Foreground="{TemplateBinding Foreground}"
                                FontFamily="{TemplateBinding FontFamily}"
                                TextAlignment="Left"
                                TextTrimming="Clip"
                                TextWrapping="NoWrap"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Center"
                                Margin="12,0,12,0"
                                Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}"
                                Visibility="Collapsed"
                                AutomationProperties.AccessibilityView="Raw" />
                            <TextBlock x:Name="KeyboardAcceleratorTextLabel"
                                Grid.Column="1"
                                Style="{ThemeResource CaptionTextBlockStyle}"
                                Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
                                MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
                                Margin="24,0,12,0"
                                Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Visibility="Collapsed"
                                AutomationProperties.AccessibilityView="Raw" />
                            <FontIcon x:Name="SubItemChevron"
                                Grid.Column="2"
                                Glyph="&#xE0E3;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="12"
                                AutomationProperties.AccessibilityView="Raw"
                                Foreground="{ThemeResource MenuFlyoutSubItemChevron}"
                                Margin="12,0,12,0"
                                MirroredWhenRightToLeft="True"
                                Visibility="Collapsed" />

                        </Grid>

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>