AppBarSeparator styles and templates

Article
03/01/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

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>

Partager via