Estilos e modelos de AppBar

Applies to Windows only

Este tópico descreve estilos e modelos para o controle AppBar. Você pode modificar esses recursos e o ControlTemplate padrão para dar uma aparência única ao controle.

Estados visuais

Estes são os VisualStates definidos no estilo padrão do controle.

Nome de VisualStateNome de VisualStateGroupDescrição
FloatingVisibleFloatingStatesA barra de aplicativos fica visível.
FloatingHiddenFloatingStatesA barra de aplicativos fica oculta.
TopDockPositionsA barra de aplicativos fica na parte superior da tela.
BottomDockPositionsA barra de aplicativos fica na parte inferior da tela.

 

Recursos de tema

Estes recursos são usados no estilo padrão do controle.

Pincéis para temas escuros

Para alterar as cores do controle no tema escuro, substitua esses pincéis em App.xaml.


<SolidColorBrush x:Key="AppBarBackgroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="AppBarBorderThemeBrush" Color="#FF000000" />

Pincéis para temas claros

Para alterar as cores do controle no tema claro, substitua esses pincéis em App.xaml.


<SolidColorBrush x:Key="AppBarBackgroundThemeBrush" Color="#FFF0F0F0" />
<SolidColorBrush x:Key="AppBarBorderThemeBrush" Color="#FFF0F0F0" />

Outros recursos


<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>

Para saber mais sobre recursos de tema, incluindo os valores que são usados para o tema HighContrast, veja referência de recursos de tema de XAML.

Estilo padrão


<!-- 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>

 

 

Mostrar:
© 2014 Microsoft