AppBar styles and templates
This topic describes the styles and templates for the AppBar control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.
Visual states
These are the VisualStates defined in the control's default style.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
FloatingVisible | FloatingStates | The app bar is visible. |
FloatingHidden | FloatingStates | The app bar is hidden. |
Top | DockPositions | The app bar is at the top of the screen. |
Bottom | DockPositions | The app bar is at the bottom of the screen. |
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="AppBarBackgroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="AppBarBorderThemeBrush" 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="AppBarBackgroundThemeBrush" Color="#FFF0F0F0" /> <SolidColorBrush x:Key="AppBarBorderThemeBrush" Color="#FFF0F0F0" />
Other resources
<x:Double x:Key="AppBarThemeMinHeight">68</x:Double> <Thickness x:Key="AppBarBottomBorderThemeThickness">0,2,0,0</Thickness> <Thickness x:Key="AppBarBottomThemePadding">0,0,0,2</Thickness> <Thickness x:Key="AppBarTopBorderThemeThickness">0,0,0,2</Thickness> <Thickness x:Key="AppBarTopThemePadding">0,2,0,0</Thickness>
For more info on theme resources, including the values that are used for the HighContrast theme, see XAML theme resources reference.
Default style
<!-- Default style for Windows.UI.Xaml.Controls.AppBar --> <Style TargetType="AppBar"> <Setter Property="Background" Value="{ThemeResource AppBarBackgroundThemeBrush}" /> <Setter Property="BorderBrush" Value="{ThemeResource AppBarBorderThemeBrush}" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="MinHeight" Value="{ThemeResource AppBarThemeMinHeight}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="AppBar"> <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FloatingStates"> <VisualState x:Name="FloatingVisible"> <Storyboard> <FadeInThemeAnimation TargetName="LayoutRoot" /> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="LayoutRoot"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <x:Boolean>True</x:Boolean> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="FloatingHidden"> <Storyboard> <FadeOutThemeAnimation TargetName="LayoutRoot" /> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="LayoutRoot"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <x:Boolean>False</x:Boolean> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="DockPositions"> <VisualState x:Name="Top"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderThickness"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarTopBorderThemeThickness}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarTopThemePadding}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Bottom"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderThickness"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarBottomBorderThemeThickness}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarBottomThemePadding}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>