AppBarButton styles and templates
This topic describes the styles and templates for the AppBarButton control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.
Note
In a Windows Phone Store app, modifying these resources to give an AppBarButton control a unique appearance is only effective when the AppBarButton is used on the page in a free-standing way. For an AppBarButton nested inside a CommandBar, modifying these resources has no effect.
Visual states
These are the VisualStates defined in the control's default style.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
FullSize | ApplicationViewStates | IsCompact is false. |
Compact | ApplicationViewStates | IsCompact is true. |
Normal | CommonStates | The default state. |
PointerOver | CommonStates | The pointer is positioned over the control. |
Pressed | CommonStates | The control is pressed. |
Disabled | CommonStates | The control is disabled. |
Focused | FocusStates | The control has focus. |
Unfocused | FocusStates | The control doesn't have focus. |
PointerFocused | FocusStates | The control has focus obtained through a pointer action. |
Theme resources
These resources are used in the control's default style.
Dark theme brushes
To change the colors of the control in the dark theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="AppBarItemBackgroundThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrush" Color="#66FFFFFF" /> <SolidColorBrush x:Key="AppBarItemForegroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrush" Color="#21FFFFFF" /> <SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrush" Color="#FF000000" />
Light theme brushes
To change the colors of the control in the light theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="AppBarItemBackgroundThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrush" Color="#66000000" /> <SolidColorBrush x:Key="AppBarItemForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrush" Color="#3D000000" /> <SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrush" Color="#FFFFFFFF" />
Shared resources
The control template uses these resources that are shared with other control templates. Changing these values will affect other controls that use these resources.
<FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily> <SolidColorBrush x:Key="FocusVisualBlackStrokeThemeBrush" Color="Black" /> <SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="White" />
Default style
<!-- Default style for Windows.UI.Xaml.Controls.AppBarButton --> <Style TargetType="AppBarButton"> <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="AppBarButton"> <Grid x:Name="RootGrid" Width="100" Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <!-- FullSize is used when we are in landscape or filled mode --> <VisualState x:Name="FullSize"/> <!-- Compact is used when we are in portrait or snapped mode --> <VisualState x:Name="Compact"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="60"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineEllipse" Storyboard.TargetProperty="Stroke"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPressedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineEllipse" Storyboard.TargetProperty="Stroke"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused" /> <VisualState x:Name="PointerFocused" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <StackPanel VerticalAlignment="Top" Margin="0,14,0,13"> <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center"> <Ellipse x:Name="BackgroundEllipse" UseLayoutRounding="False" Width="40" Height="40" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}"/> <Ellipse x:Name="OutlineEllipse" UseLayoutRounding="False" Width="40" Height="40" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" /> <ContentPresenter x:Name="Content" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutomationProperties.AccessibilityView="Raw"/> </Grid> <TextBlock x:Name="TextLabel" Text="{TemplateBinding Label}" Foreground="{ThemeResource AppBarItemForegroundThemeBrush}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" Width="88" TextWrapping="Wrap"/> </StackPanel> <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5"/> <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>