UWP AppBarButton Цвет переднего плана не работает в разных windows версиях SDK

Question

У меня есть приложение Xamarin, над которым я работаю. У нас есть собственный шаблон стиля в xaml для нашего AppBarButton для использования в UWP. Таможенный стиль работает для Windows 10 Fall Creators Update SDK. Но когда мы пытаемся перейти на Windows 10 версии 1803 или выше, стиль больше не принимается и не используется для кнопки. Кто-нибудь знает, было ли какое-либо изменение в том, как вам нужно было создавать пользовательские шаблоны в Xaml для применения пользовательских стилей?

Вот мое приложение. 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>

Вот пользовательские Каталог ресурсов.

<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

Оказывается, я не пытался стилизовать правильный элемент.

Мне нужно добавить x:key="AppBarButtonRevealStyle к замедлению стиля. Затем возникла проблема с иерархией наследования, от которой элемент получал свой стиль.

Answer 2

Кто-нибудь знает, было ли какое-либо изменение в том, как вам нужно было создавать собственные шаблоны в Xaml для применения пользовательских стилей?

Вы можете получить самый последний стиль AppBarButton в generi c .xaml файл в клиентском приложении UWP. И я сравнил с вами упомянутый стиль, он изменяет ContentRoot на панель Grid et c .. Пожалуйста, используйте следующее, чтобы заменить стиль выше.

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