Démarrage rapide : ajout de boutons à la barre de l’application

Applies to Windows and Windows Phone

Les commandes figurant dans une barre d’application s’affichent généralement à l’aide d’un style spécial avec un bouton arrondi, une icône et une étiquette de texte. Vous pouvez utiliser les contrôles AppBarButton, AppBarToggleButton et AppBarSeparator pour créer plus facilement des barres d’application qui reflètent les règles de conception et les comportements appropriés.

Les boutons de barre d’application diffèrent des boutons standard à divers titres :

  • L’apparence par défaut est un cercle au lieu d’un rectangle.
  • Vous utilisez les propriétés Label et Icon pour définir le contenu, au lieu de la propriété Content. La propriété Content est ignorée quand la propriété Icon est définie.
  • La propriété IsCompact du bouton permet de contrôler sa taille.
Boutons de barre d’application

Prérequis

Définir l’icône et l’étiquette (Windows 8.1)

Windows 8.1:  Cette étape s’applique uniquement à Windows 8.1.

Utilisez les propriétés Label et Icon pour définir le contenu des boutons de barre d’application. Définissez la propriété Label sur une chaîne pour spécifier l’étiquette de texte. Elle est affichée par défaut, et est masquée quand le bouton est dans l’état compact ; vous devez donc définir également une icône explicite. Pour définir l’icône du bouton de la barre de l’application, affectez à la propriété Icon un élément dérivé de la classe IconElement. Quatre types d’éléments icon sont fournis :

  • FontIcon : l’icône est basée sur un glyphe dans la famille de polices spécifiée.
  • BitmapIcon : l’icône est basée sur un fichier d’image bitmap avec l’Uri spécifié.
  • PathIcon : l’icône est basée sur des données Path.
  • SymbolIcon : l’icône est basée sur une liste de glyphes prédéfinis de la police Segoe UI Symbol.

L’exemple suivant illustre un contrôle AppBarButton avec un contrôle SymbolIcon.



<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         


L’exemple suivant illustre un contrôle AppBarButton avec un contrôle BitmapIcon.



<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>


L’exemple suivant illustre un contrôle AppBarToggleButton avec un contrôle FontIcon.


<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>


L’exemple suivant illustre un contrôle AppBarToggleButton avec un contrôle PathIcon.



<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Cet exemple crée les contrôles suivants :

Exemples d’icône de bouton de barre d’application.

Configurer le bouton à l’état compact (Windows 8.1)

Windows 8.1:  Cette étape s’applique uniquement à Windows 8.1.

Les contrôles du bouton de la barre de l’application ont deux tailles : normale et compacte. Par défaut, ils possèdent une étiquette de texte et une marge intérieure complète. Quand la propriété IsCompact est définie sur true, l’étiquette de texte est masquée et la marge intérieure autour des boutons est réduite. Le contrôle AppBarSeparator possède également un état compact dans lequel la marge intérieure est réduite.

Voici les mêmes commandes que celles illustrées précédemment, mais dans l’état compact.

Boutons de barre d’application compacts

Lorsque vous les utilisez dans le nouveau contrôle CommandBar, le contrôle CommandBar définit automatiquement la propriété IsCompact. Si vous utilisez un bouton de barre d’application en dehors d’un contrôle CommandBar, par exemple dans un contrôle AppBar ou sur le canevas de l’application, vous devez définir la propriété IsCompact comme il convient dans votre code.

Les boutons de barre d’application peuvent être utilisés en dehors d’une barre d’application. Il est courant d’utiliser un bouton de barre d’application en guise de bouton de retour dans un en-tête de page. Selon les recommandations Windows, quand un bouton de barre d’application est utilisé en dehors d’une barre d’application, il doit se trouver systématiquement dans l’état compact.

Utiliser un style de bouton de barre d’application standard (Windows 8)

Windows 8:  Cette étape s’applique uniquement à Windows 8. Dans Windows 8.1, AppBarButtonStyle est déconseillé et remplacé par des contrôles AppBarButton.

Tous les modèles de projet Microsoft Visual Studio 2012 incluent le fichier StandardStyles.xaml dans le dossier Common. Ce fichier contient des styles et des ressources qui donnent à votre application l’apparence d’une application du Windows Store. Il inclut 192 styles utilisables pour les boutons de barre de l’application. Ces styles sont basés sur la ressource AppBarButtonStyle, qui fournit le modèle et les états visuels pour le bouton de barre de l’application. La ressource AppBarButtonStyle utilise un glyphe issu de la police Segoe UI Symbol comme icône affichée dans le bouton. Pour voir les styles de bouton disponibles, voir Images des styles de bouton AppBar.

Par défaut, les styles de bouton de barre de l’application sont marqués en tant que commentaires dans StandardStyles.xaml. Pour utiliser un style, vous devez supprimer les marques de commentaires XAML (eXtensible Application Markup Language) de la ressource Style dans le fichier.

Astuce  Les styles de bouton de barre de l’application sont marqués en tant que commentaires car l’analyse du code XAML et le chargement des ressources affectent les performances. Supprimez simplement les marques de commentaires pour les styles que vous utilisez dans votre application. Pour plus d’informations, voir Optimiser le chargement du code XAML.

JJ662743.wedge(fr-fr,WIN.10).gifPour rendre disponible un style de bouton de barre de l’application

  1. Dans l’Explorateur de solution, développez le dossier Common et double-cliquez sur StandardStyles.xaml pour l’ouvrir.
  2. Recherchez la ressource Style pour le bouton de barre de l’application que vous voulez utiliser.

    Astuce  Appuyez sur Ctrl+F pour ouvrir la fenêtre Rechercher et recherchez un style par clé ou par nom.

    Par exemple, voici le code XAML pour le Style "PicturesAppBarButtonStyle".

    
        <Style x:Key="PicturesAppBarButtonStyle" TargetType="ButtonBase" 
               BasedOn="{StaticResource AppBarButtonStyle}">
            <Setter Property="AutomationProperties.AutomationId" Value="PicturesAppBarButton"/>
            <Setter Property="AutomationProperties.Name" Value="Pictures"/>
            <Setter Property="Content" Value="&#xE158;"/>
        </Style> 
    
    
  3. Placez la ressource Style à l’extérieur du bloc de commentaires (<!-- comment -->) pour qu’elle puisse être utilisée.
  4. Enregistrez et fermez StandardStyles.xaml.

JJ662743.wedge(fr-fr,WIN.10).gifPour utiliser un style de bouton de barre de l’application dans Visual Studio

  1. Dans votre page XAML, sélectionnez l’élément Button de barre de l’application auquel appliquer le style.
  2. Effacez la propriété Content de l’élément Button.

    Le contenu du bouton est défini par le style de bouton de barre de l’application.

  3. Sous Divers dans le volet Propriétés, recherchez la propriété Style.
  4. Cliquez sur le marqueur de propriété à proximité de la propriété Style pour ouvrir le menu.

    Remarque  Le marqueur de propriété est le petit symbole de zone situé à droite de chaque valeur de propriété.

  5. Dans le menu, sélectionnez Ressource locale, puis le style de bouton de barre de l’application à utiliser. Par exemple, Ressource locale > PicturesAppBarButtonStyle.

JJ662743.wedge(fr-fr,WIN.10).gifPour utiliser un style de bouton de barre de l’application dans Blend

  1. Dans votre page XAML, sélectionnez l’élément Button de barre de l’application auquel appliquer le style.
  2. Effacez la propriété Content de l’élément Button.

    Le contenu du bouton est défini par le style de bouton de barre de l’application.

  3. Ouvrez l’onglet Ressources et développez la section StandardStyles.xaml.
  4. Faites glisser le style de votre choix à partir du volet Ressources sur le bouton de barre de l’application.

Personnaliser un bouton de barre de l’application (Windows 8)

Windows 8:  Cette étape s’applique uniquement à Windows 8. Dans Windows 8.1, AppBarButtonStyle est déconseillé et remplacé par des contrôles AppBarButton.

Vous pouvez personnaliser un bouton de barre de l’application de plusieurs façons. Un élément Button standard possède un seul élément de contenu, que vous pouvez définir en tant que texte, image ou autre UIElement. Un bouton de barre de l’application possède une icône et une étiquette de texte. Dans la ressource AppBarButtonStyle, l’icône est spécifiée en définissant la propriété Content du bouton, et l’étiquette de texte est spécifiée en définissant la propriété jointe AutomationProperties.Name. L’utilisation de la propriété AutomationProperties.Name a l’avantage de rendre le texte du bouton lisible par les logiciels de lecture d’écran.

Pour modifier uniquement l’étiquette de texte, vous pouvez remplacer la propriété AutomationProperties.Name. Par exemple, ceci est utile pour localiser l’étiquette de texte.

Voici un bouton de barre de l’application avec sa propriété AutomationProperties.Name définie sur un StaticResource qui remplace l’étiquette de texte par défaut.


<Button Style="{StaticResource PicturesAppBarButtonStyle}"     
        AutomationProperties.Name="{StaticResource localizedPictureText"}/>

Si le glyphe que vous voulez utiliser n’est pas défini dans un style standard, vous pouvez utiliser le style de base AppBarButtonStyle et spécifier la propriété Content et la propriété jointe AutomationProperties.Name, comme illustré ici. Vous spécifiez l’icône du bouton en définissant la propriété Content sur un glyphe figurant dans la police Segoe UI Symbol.

Astuce  Vous pouvez utiliser l’utilitaire Table des caractères dans Windows pour examiner les glyphes de police et obtenir leurs valeurs hexadécimales.

Ce code XAML indique comment utiliser le glyphe Racine carrée issu de la police Segoe UI Symbol dans un bouton de barre de l’application.


<Button Style="{StaticResource AppBarButtonStyle}"     
        AutomationProperties.Name="Square Root"
        Content="&#x221A;"/>

Pour permettre de réutiliser le style de bouton de barre de l’application, vous pouvez spécifier les propriétés dans une nouvelle ressource Style basée sur le style de base AppBarButtonStyle.

Ce code XAML produit le même résultat que l’exemple précédent, mais utilise une ressource Style réutilisable.



<App.Resources>
...
    <Style x:Key="SquareRootAppBarButtonStyle" 
           BasedOn="{StaticResource AppBarButtonStyle}"     
           AutomationProperties.Name="Square Root"
           Content="&#x221A;"/>
...
<App.Resources>

...

<Button Style="{StaticResource SquareRootAppBarButtonStyle}"/>

Pour utiliser un symbole issu d’une police autre que Segoe UI Symbol, vous pouvez remplacer la propriété FontFamily définie dans la ressource AppBarButtonStyle pour spécifier une autre police.

Ce code XAML définit le contenu du bouton de barre de l’application sur un glyphe issu de la police Wingdings.


<Button Style="{StaticResource AppBarButtonStyle}" 
        FontFamily="Wingdings"
        AutomationProperties.Name="Glasses"
        Content="&#x0024;"/>

Utiliser un chemin d’accès personnalisé comme icône de bouton de barre d’application (Windows 8)

Windows 8:  Cette étape s’applique uniquement à Windows 8. Dans Windows 8.1, AppBarButtonStyle est déconseillé et remplacé par des contrôles AppBarButton.

Si vous avez besoin d’utiliser une icône qui n’est pas disponible comme glyphe de police, vous pouvez utiliser un élément XAML Path pour spécifier une icône. Lorsque vous créez une icône à l’aide d’un élément Path, par défaut, elle ne répond pas à des états correspondant au positionnement du pointeur sur l’icône, à l’appui sur l’icône ou à sa désactivation, de la même manière qu’un glyphe de police. Ceci tient au fait que les états visuels dans la ressource AppBarButtonStyle modifient la propriété Foreground du glyphe de police. Un élément Path ne possède pas de propriété Foreground, si bien que vous devez modifier ses propriétés Stroke et Fill à la place. Pour ce faire, vous devez lier ses propriétés Stroke et Fill à la propriété Foreground du bouton. Pour plus d’informations sur cette liaison, voir Extension de balisage RelativeSource.

Ici, un élément Path est utilisé pour créer une icône personnalisée Racine carrée. Cet élément simple Path ne possède pas de valeur Fill, si bien que seule la propriété Stroke est liée à la propriété Foreground du bouton.


<Button Style="{StaticResource AppBarButtonStyle}"
        AutomationProperties.Name="Square Root" >
    <Button.ContentTemplate>
        <DataTemplate>
            <Path Data="F1 M 1,5L 5,5L 9,15L 15,1L 27,1" 
                  Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                  Width="20" Height="20" StrokeThickness="2" Stretch="Uniform"/>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

Récapitulatif et étapes suivantes

Rubriques associées

Images des styles de bouton AppBar
Extension de balisage RelativeSource
Extension de balisage StaticResource

 

 

Afficher:
© 2014 Microsoft