AppBarSeparator styles and templates

Applies to Windows and Windows Phone

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 nameVisualStateGroup nameDescription
FullSizeApplicationViewStates IsCompact is false.
CompactApplicationViewStates 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>

 

 

Show:
© 2014 Microsoft