带有自定义图像的 UWP 命令栏
UWP Command Bar with Custom Image
我是 UWP 应用程序开发的新手。我想在我的应用程序主页下方添加一个带有自定义图标的命令栏。任何人都可以建议我如何做到这一点。我想在我的命令栏中添加的图像如下：
BitmapIcon 允许您创建图像 AppBarButton 图标。用法如下：
<CommandBar>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar>
然而，要注意的是，图像的颜色会根据主题更改为默认的系统应用栏图标颜色：
如果要添加颜色，需要将BitmapIcon的Foreground属性设置为要求的颜色：
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="DarkOrange" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
以下是您要求的布局：
<CommandBar>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="DarkOrange" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="SteelBlue" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="DimGray" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar>
彩色图标图像
最后，如果您的图标有多种颜色，而 BitmapIcon 只有一种颜色这一事实不适合您怎么办？
为此，您必须使用 Content 属性，然后修改创建自定义样式以使用 Content 而不是 Icon:
<AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" Label="Command">
<AppBarButton.Content>
<Image Source="/Assets/appbaricon.png" />
</AppBarButton.Content>
</AppBarButton>
然后我复制了默认样式（在Visual Studio中打开Document Outlinewindow，右击AppBarButton，选择编辑模板，然后编辑副本。将ContentPresenter 中的TemplateBinding 从Icon 更改为[=21] 所需的唯一更改=]:
<ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" Height="20"/>
完整的样式为：
<Style x:Key="ImageAppBarButtonStyle" 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="True"/>
<Setter Property="AllowFocusOnInteraction" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
<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="12,14,0,14"/>
</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="8,15,12,17"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation 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="0,11,0,13"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Viewbox x:Name="ContentViewbox" AutomationProperties.AccessibilityView="Raw" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4">
<ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" Height="20"/>
</Viewbox>
<TextBlock x:Name="TextLabel" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="12" Margin="2,0,2,6" Grid.Row="1" Text="{TemplateBinding Label}" TextWrapping="Wrap" TextAlignment="Center"/>
<TextBlock x:Name="OverflowTextLabel" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="15" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" Text="{TemplateBinding Label}" TextTrimming="Clip" TextWrapping="NoWrap" TextAlignment="Left" VerticalAlignment="Center" Visibility="Collapsed"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我是 UWP 应用程序开发的新手。我想在我的应用程序主页下方添加一个带有自定义图标的命令栏。任何人都可以建议我如何做到这一点。我想在我的命令栏中添加的图像如下：
BitmapIcon 允许您创建图像 AppBarButton 图标。用法如下：
<CommandBar>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar>
然而，要注意的是，图像的颜色会根据主题更改为默认的系统应用栏图标颜色：
如果要添加颜色，需要将BitmapIcon的Foreground属性设置为要求的颜色：
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="DarkOrange" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
以下是您要求的布局：
<CommandBar>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="DarkOrange" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="SteelBlue" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Command">
<AppBarButton.Icon>
<BitmapIcon Foreground="DimGray" UriSource="/Assets/image.png" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar>
彩色图标图像
最后，如果您的图标有多种颜色，而 BitmapIcon 只有一种颜色这一事实不适合您怎么办？
为此，您必须使用 Content 属性，然后修改创建自定义样式以使用 Content 而不是 Icon:
<AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" Label="Command">
<AppBarButton.Content>
<Image Source="/Assets/appbaricon.png" />
</AppBarButton.Content>
</AppBarButton>
然后我复制了默认样式（在Visual Studio中打开Document Outlinewindow，右击AppBarButton，选择编辑模板，然后编辑副本。将ContentPresenter 中的TemplateBinding 从Icon 更改为[=21] 所需的唯一更改=]:
<ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" Height="20"/>
完整的样式为：
<Style x:Key="ImageAppBarButtonStyle" 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="True"/>
<Setter Property="AllowFocusOnInteraction" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
<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="12,14,0,14"/>
</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="8,15,12,17"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/>
</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="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation 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="0,11,0,13"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Viewbox x:Name="ContentViewbox" AutomationProperties.AccessibilityView="Raw" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4">
<ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" Height="20"/>
</Viewbox>
<TextBlock x:Name="TextLabel" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="12" Margin="2,0,2,6" Grid.Row="1" Text="{TemplateBinding Label}" TextWrapping="Wrap" TextAlignment="Center"/>
<TextBlock x:Name="OverflowTextLabel" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="15" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" Text="{TemplateBinding Label}" TextTrimming="Clip" TextWrapping="NoWrap" TextAlignment="Left" VerticalAlignment="Center" Visibility="Collapsed"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>