AppBarSeparator styles and templates
This topic describes the styles and templates for the AppBarSeparator 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 |
|---|---|---|
FullSize | ApplicationViewStates | IsCompact is false. |
Compact | ApplicationViewStates | IsCompact is true. |
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="AppBarSeparatorForegroundThemeBrush" Color="#FF7B7B7B" />
Light theme brushes
To change the colors of the control in the light theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="AppBarSeparatorForegroundThemeBrush" Color="#FF7B7B7B" />
Default style
<!-- Default style for Windows.UI.Xaml.Controls.AppBarSeparator --> <Style TargetType="AppBarSeparator"> <Setter Property="Foreground" Value="{ThemeResource AppBarSeparatorForegroundThemeBrush}"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="AppBarSeparator"> <Rectangle x:Name="SeparatorRectangle" Width="1" Height="40" Fill="{TemplateBinding Foreground}" Margin="29,14,30,0" VerticalAlignment="Top"> <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="SeparatorRectangle" Storyboard.TargetProperty="Margin"> <DiscreteObjectKeyFrame KeyTime="0" Value="19,14,20,0"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Rectangle> </ControlTemplate> </Setter.Value> </Setter> </Style>