Styles et modèles de barre de l’application

Cette rubrique décrit les styles et les modèles du contrôle AppBar. Vous pouvez modifier ces ressources et l’élément ControlTemplate par défaut pour donner au contrôle un aspect unique.

États visuels

Il s’agit des éléments VisualState définis dans le style par défaut du contrôle.

Nom VisualStateNom VisualStateGroupDescription
FloatingVisibleFloatingStatesLa barre de l’application est visible.
FloatingHiddenFloatingStatesLa barre de l’application est masquée.
TopDockPositionsLa barre de l’application est située en haut de l’écran.
BottomDockPositionsLa barre de l’application est située en bas de l’écran.

 

Ressources de thème

Ces ressources sont utilisées dans le style par défaut du contrôle.

Pinceaux du thème sombre

Pour changer les couleurs du contrôle dans le thème sombre, remplacez ces pinceaux dans App.xaml.


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

Pinceaux du thème clair

Pour changer les couleurs du contrôle dans le thème clair, remplacez ces pinceaux dans App.xaml.


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

Autres ressources


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

Pour plus d’informations sur les ressources de thème, notamment sur les valeurs utilisées pour le thème HighContrast, voir la référence aux ressources de thème XAML.

Style par défaut


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

 

 

Afficher:
© 2015 Microsoft