Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

AppBar styles and templates

[ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

This topic describes the default style and template for the AppBar control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.

Note   These styles and resources are based on the Windows Software Development Kit (SDK) for Windows 10, Version 1511 (Windows SDK version 10.0.10586.0). Styles and resources from other versions of the SDK might have different values. For design purposes, generic.xaml is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic folder from a Windows SDK installation.
 

Visual states

These are the VisualStates defined in the control's default style.

VisualState nameVisualStateGroup name
NormalCommonStates
DisabledCommonStates
CompactClosedDisplayModeStates
CompactOpenUpDisplayModeStates
CompactOpenDownDisplayModeStates
MinimalClosedDisplayModeStates
MinimalOpenUpDisplayModeStates
MinimalOpenDownDisplayModeStates
HiddenClosedDisplayModeStates
HiddenOpenUpDisplayModeStates
HiddenOpenDownDisplayModeStates

 

Theme resources

These resources are used in the control's default style. For more info about theme resources and the brushes used in the default style, see XAML theme resources.


<x:Double x:Key="AppBarExpandButtonThemeHeight">24</x:Double>
<x:Double x:Key="AppBarExpandButtonThemeWidth">48</x:Double>
<x:Double x:Key="AppBarThemeMinHeight">60</x:Double>
<x:Double x:Key="AppBarThemeMinimalHeight">24</x:Double>
<x:Double x:Key="AppBarThemeCompactHeight">48</x:Double>
<x:Double x:Key="AppBarExpandButtonCircleDiameter">3</x:Double>
<Thickness x:Key="AppBarBottomBorderThemeThickness">0,0,0,0</Thickness>
<Thickness x:Key="AppBarBottomThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="AppBarTopBorderThemeThickness">0,0,0,0</Thickness>
<Thickness x:Key="AppBarTopThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="AppBarExpandButtonCircleInnerPadding">3,0,3,0</Thickness>

Default style


<!-- Default style for Windows.UI.Xaml.Controls.AppBar -->
<Style TargetType="AppBar">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="ClosedDisplayMode" Value="Minimal"/>
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="AppBar">
      <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Disabled">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EllipsisIcon" Storyboard.TargetProperty="Foreground">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
          <VisualStateGroup x:Name="DisplayModeStates">
            <VisualStateGroup.Transitions>
              <VisualTransition From="CompactClosed" To="CompactOpenUp" GeneratedDuration="0:0:0.467">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="CompactOpenUp" To="CompactClosed" GeneratedDuration="0:0:0.167">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactVerticalDelta}"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="CompactClosed" To="CompactOpenDown" GeneratedDuration="0:0:0.467">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactVerticalDelta}"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="CompactOpenDown" To="CompactClosed" GeneratedDuration="0:0:0.167">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="MinimalClosed" To="MinimalOpenUp" GeneratedDuration="0:0:0.467">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="1"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="MinimalOpenUp" To="MinimalClosed" GeneratedDuration="0:0:0.167">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="MinimalClosed" To="MinimalOpenDown" GeneratedDuration="0:0:0.467">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="1"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="MinimalOpenDown" To="MinimalClosed" GeneratedDuration="0:0:0.167">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="HiddenClosed" To="HiddenOpenUp" GeneratedDuration="0:0:0.467">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="HiddenOpenUp" To="HiddenClosed" GeneratedDuration="0:0:0.167">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.1,0.9 0.2,1.0" Value="0}"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="HiddenClosed" To="HiddenOpenDown" GeneratedDuration="0:0:0.467">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.467" KeySpline="0.1,0.9 0.2,1.0" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
              <VisualTransition From="HiddenOpenDown" To="HiddenClosed" GeneratedDuration="0:0:0.167">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y" >
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.167" KeySpline="0.2,0 0,1" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="CompactClosed" />
            <VisualState x:Name="CompactOpenUp">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y" >
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="CompactOpenDown">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y" >
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="MinimalClosed">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="IsHitTestVisible">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="IsEnabled">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="MinHeight">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource AppBarThemeMinimalHeight}"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="MinimalOpenUp">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinimalVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="MinimalOpenDown">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="Padding">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="16,11,16,0"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="HiddenClosed">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="IsTabStop">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="IsEnabled">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="HiddenOpenUp">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y" >
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HiddenVerticalDelta}"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="HiddenOpenDown">
              <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ClipGeometryTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandButton" Storyboard.TargetProperty="VerticalAlignment">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighContrastBorder" Storyboard.TargetProperty="Visibility">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.Clip>
          <RectangleGeometry Rect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClipRect}">
            <RectangleGeometry.Transform>
              <TranslateTransform x:Name="ClipGeometryTransform" Y="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactVerticalDelta}"/>
            </RectangleGeometry.Transform>
          </RectangleGeometry>
        </Grid.Clip>

        <Grid x:Name="ContentRoot"
            VerticalAlignment="Top"
            Margin="{TemplateBinding Padding}"
            Height="{TemplateBinding Height}"
            MinHeight="{ThemeResource AppBarThemeMinHeight}"
            Background="{TemplateBinding Background}"
            Opacity="{TemplateBinding Opacity}">

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

          <Grid.RenderTransform>
            <TranslateTransform x:Name="ContentTransform"/>
          </Grid.RenderTransform>

          <!-- Use a ContentControl rather than a ContentPresenter so that IsEnabled can be set to false
                                in the Minimal/HiddenClosed states to remove it from being a tab-stop candidate. -->
          <ContentControl
              x:Name="ContentControl"
              Content="{TemplateBinding Content}"
              ContentTemplate="{TemplateBinding ContentTemplate}"
              ContentTransitions="{TemplateBinding ContentTransitions}"
              Foreground="{TemplateBinding Foreground}"
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
              IsTabStop="False"/>

          <Button
              x:Name="ExpandButton"
              Foreground="{TemplateBinding Foreground}"
              Style="{StaticResource EllipsisButton}"
              Padding="16,23,16,0"
              MinHeight="{ThemeResource AppBarThemeCompactHeight}"
              VerticalAlignment="Top"
              Grid.Column="1">
            <FontIcon
                x:Name="EllipsisIcon"
                VerticalAlignment="Center"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                FontSize="16"
                Glyph="&#xE10C;"
                Height="{ThemeResource AppBarExpandButtonCircleDiameter}"/>
          </Button>
          <Rectangle x:Name="HighContrastBorder" x:DeferLoadStrategy="Lazy" Grid.ColumnSpan="2"  Visibility="Collapsed" VerticalAlignment="Stretch" Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" StrokeThickness="1"/>
        </Grid>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>



<!-- Ellipsis button style for use in Windows.UI.Xaml.Controls.AppBar and Windows.UI.Xaml.Controls.CommandBar -->
<Style x:Key="EllipsisButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0,0,9,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Width" Value="{ThemeResource AppBarExpandButtonThemeWidth}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
      <Grid>
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="PointerOver">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Background">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Pressed">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Background">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Disabled">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter x:Name="ContentPresenter"
                          Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          ContentTransitions="{TemplateBinding ContentTransitions}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Padding="{TemplateBinding Padding}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          AutomationProperties.AccessibilityView="Raw" />
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>


Related topics

Styling controls
Control templates

 

 

Show: