Langage: HTML | XAML

Démarrage rapide : ajout de barres d’application (XAML)

Applies to Windows and Windows Phone

Utilisez des barres d’application pour afficher la navigation, des commandes et des outils qui peuvent être masqués lorsqu’ils ne présentent pas d’intérêt. Vous pouvez placer une barre de l’application en haut de la page, en bas de la page ou les deux. Les barres d’application sont masquées par défaut et elles apparaissent ou disparaissent lorsque l’utilisateur clique avec le bouton droit, appuie sur Ctrl+Z ou balaie l’écran depuis le bord supérieur ou inférieur. Elles peuvent être affichées par programme lorsque l’utilisateur effectue une sélection ou interagit avec l’application.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

Prérequis

Choisir un contrôle AppBar ou CommandBar

L’infrastructure XAML fournit les contrôles CommandBar et AppBar qui permettent d’afficher l’interface utilisateur qui apparaît sur le bord supérieur ou inférieur de l’écran par un simple balayage latéral. Le contrôle CommandBar intègre d’autres fonctionnalités, mais le type de contenu que vous pouvez placer dans celui-ci est limité. Le contrôle AppBar vous permet d’ajouter n’importe quel contenu XAML (Extensible Application Markup Language), mais vous devez gérer vous-même sa disposition et son redimensionnement.

Important  Les contrôles CommandBar, AppBarButton, AppBarToggleButton et AppBarSeparator sont uniquement disponibles pour les applications qui ciblent Windows 8.1. Dans les applications qui ciblent Windows 8, vous devez utiliser un contrôle AppBar.

  1. Si vous avez besoin d’une barre de l’application contenant uniquement les contrôles AppBarButton,AppBarToggleButton et AppBarSeparator, utilisez un contrôle CommandBar. Le contrôle CommandBar simplifie la création de barres d’application de base en fournissant :

    • une disposition automatique des commandes, avec les commandes principales à droite et les commandes secondaires à gauche ;
    • un redimensionnement automatique des commandes de barre d’application quand la taille de l’application change.
  2. Si vous avez besoin de contenu plus complexe, notamment des images, des barres de progression, une zone de recherche, des blocs de texte ou des boutons de style personnalisé, utilisez un contrôle AppBar. Vous pouvez utiliser un contrôle AppBar avec du contenu personnalisé pour créer une barre d’outils ou une interface utilisateur de navigation. Lorsque vous placez vos commandes dans un contrôle AppBar, vous devez redimensionner et réorganiser le contenu du contrôle AppBar en fonction de la taille de l’écran. Pour plus d’informations, voir Comment utiliser une barre de l’application dans différents affichages.

Ajout d’une barre de l’application

  • Pour ajouter une barre de l’application à votre application, affectez un contrôle CommandBar ou AppBar à la propriété TopAppBar ou BottomAppBar d’un contrôle Page.

    Utilisez la barre de navigation (barre de l’application supérieure) pour afficher la navigation dans votre application. Vous utilisez généralement un contrôle AppBar avec des boutons de style personnalisé pour la navigation. Pour plus d’informations, voir Conception de la navigation pour les applications du Windows Store.

    Utilisez la barre de l’application inférieure pour afficher des commandes et des outils. Pour plus d’informations, voir Conception des commandes pour les applications du Windows Store.

    Cet exemple montre comment ajouter un contrôle AppBar comme barre de l’application supérieure et un contrôle CommandBar comme barre de l’application inférieure.

    
    
    <Page.TopAppBar>
        <AppBar>
            <!-- AppBar content -->
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <CommandBar>
            <!-- CommandBar content -->
        </CommandBar>
    </Page.BottomAppBar>
    
    

Dans une application à plusieurs pages, vous pouvez faire en sorte que plusieurs pages partagent des barres d’application avec des commandes communes. Pour plus d’informations, voir Comment partager une barre de l’application entre des pages.

Ajout de contenu à un contrôle CommandBar

  • Pour ajouter du contenu à un contrôle CommandBar, ajoutez les contrôles AppBarButton, AppBarToggleButton et AppBarSeparator aux collections PrimaryCommands et SecondaryCommands du contrôle CommandBar. Les contrôles ajoutés directement au contrôle CommandBar en XAML sont ajoutés automatiquement à la collection PrimaryCommands.

    Cet exemple montre un contrôle CommandBar avec les contrôles PrimaryCommands et SecondaryCommands.

    
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    
    

    Contrôle de barre de l’application inférieure

Ajout de contenu à un contrôle AppBar

  • Un contrôle AppBar ne pouvant contenir qu’un élément de contenu enfant, il est fréquent d’ajouter un panneau de disposition auquel vous pouvez ajouter d’autres contrôles.

    Cet exemple montre un contrôle AppBar avec des boutons de navigation et une zone de recherche.

    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    

    Contrôle de barre de l’application inférieure

Ouverture d’une barre de l’application par programme

Par défaut, les barres d’application apparaissent lorsque l’utilisateur clique avec le bouton droit, appuie sur Ctrl+Z ou balaie l’écran depuis le bord supérieur ou inférieur. Quand l’utilisateur effectue l’une de ces actions, les barres de l’application supérieure et inférieure apparaissent (si la page en contient deux). Vous pouvez ouvrir une barre de l’application par programme ne affectant la valeur true à la propriété IsOpen. Dans ce cas, seule la barre de l’application spécifique (supérieure ou inférieure) pour laquelle vous définissez la valeur de propriété est ouverte.

  1. Pour ouvrir initialement votre barre de l’application quand la page est chargée, affectez la valeur true à la propriété IsOpen dans votre code XAML.
    
    <Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
  2. Pour ouvrir la barre de l’application par programme, affectez la valeur true à la propriété IsOpen dans votre code. Pour référencer la barre de l’application dans le code, vous pouvez lui donner un nom et y faire référence par nom, ou vous pouvez référencer la propriété TopAppBar ou BottomAppBar.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.BottomAppBar != null)
        {
            this.BottomAppBar.IsOpen = true;
        }
    }
    
    

    On ouvre en général la barre de l’application par programme pour afficher des commandes contextuelles lorsque l’utilisateur interagit avec un élément de l’application. Par exemple, vous pourriez afficher une barre de l’application avec des commandes de mise en forme quand l’utilisateur sélectionne du texte dans l’application. Lorsque vous affichez des commandes contextuelles, sélectionnez le mode de disparition de la barre de l’application rémanent jusqu’à ce que le contexte change afin de laisser les commandes visibles.

Rendre une barre de l’application rémanente

Par défaut, les barres d’application disparaissent quand l’utilisateur interagit avec votre application n’importe où en dehors de la barre de l’application. Pour laisser les commandes visibles, modifiez le mode de disparition en affectant la valeur true à la propriété IsSticky. Quand une barre de l’application est rémanente, elle disparaît uniquement lorsque l’utilisateur clique avec le bouton droit, appuie sur Ctrl+Z ou balaie l’écran depuis le bord supérieur ou inférieur.

  1. Pour faire en sorte que votre barre de l’application reste visible lorsque l’utilisateur interagit avec votre application, affectez la valeur true à la propriété IsSticky dans votre code XAML.
    
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
  2. Pour changer le mode de disparition de la barre de l’application par programme, affectez la valeur true à la propriété IsSticky dans votre code. Pour référencer la barre de l’application dans le code, vous pouvez lui donner un nom et y faire référence par nom, ou vous pouvez référencer la propriété TopAppBar ou BottomAppBar.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.TopAppBar != null)
        {
            this.TopAppBar.IsSticky = true;
        }
    }
    
    

Récapitulatif et étapes suivantes

Ce guide de démarrage rapide vous a montré comment ajouter une barre de l’application à votre application du Windows Store en C++, C# ou Visual Basic.

Pour procurer une expérience cohérente aux utilisateurs, consultez la rubrique Recommandations en matière de barres de l’application.

Pour en savoir plus sur les contrôles AppBarButton, voir Démarrage rapide : ajout de boutons à la barre de l’application.

Rubriques associées

Exemple de contrôle de barre de l’application XAML
Démarrage rapide : ajout de boutons à la barre de l’application
Conception des commandes des applications du Windows Store
AppBar
Scénarios d’exemple de fonctionnalité Reversi : barre de l’application

 

 

Afficher:
© 2014 Microsoft