Comment ajouter des commandes contextuelles à une barre de l’application (XAML)

Applies to Windows and Windows Phone

Masquez les commandes de barre de l’application qui ne sont pertinentes que dans certains contextes, jusqu’à ce qu’elles soient pertinentes. Par exemple, il se peut que vous ayez des commandes de modification d’image qui ne sont utiles que lorsqu’une image est sélectionnée. Ou peut-être disposez-vous d’une barre de l’application globale comportant des commandes qui ne sont pertinentes que dans certaines pages. Ces exemples illustrent plusieurs manières d’ajouter des commandes contextuelles à une barre de l’application.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Étape 1: Ajouter un bouton de commande à une barre de commandes (Windows 8.1)

Windows 8.1:  Cette étape s’applique uniquement à Windows 8.1. Pour Windows 8, voir les étapes 3-5.

Vous pouvez ajouter des commandes à un contrôle CommandBar dans votre fichier code-behind. Vous procédez généralement ainsi pour ajouter des commandes qui s’appliquent uniquement lorsqu’un élément est sélectionné ou lorsque vous partagez un contrôle CommandBar entre plusieurs pages et que certaines commandes ne s’appliquent qu’à une seule page. Le fait d’ajouter la commande au code de la page à laquelle elle s’applique simplifie l’ancrage de la commande à des éléments dans cette page. Ici, vous ajoutez une commande à un contrôle CommandBar partagé quand l’utilisateur accède à une page et vous la supprimez lorsqu’il quitte la page.

Pour plus d’informations sur le partage d’une barre de l’application, voir Comment partager une barre de l’application entre des pages et Exemple de contrôle de barre de l’application XAML.

Quand un utilisateur accède à la page, ajoutez la commande au contrôle CommandBar.

  1. Ajoutez un contrôle CommandBar sous forme de barre d’application inférieure à votre application. Pour plus d’informations, voir Démarrage rapide : ajout de barres d’application.

    Ici, vous ajoutez une barre d’application inférieure avec un bouton unique défini en langage XAML.

    
        <Page.BottomAppBar>
            <CommandBar x:Name="bottomAppBar">
                <AppBarButton Icon="Sort" Label="Sort" Click="AppBarButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
    
    
  2. Quand un utilisateur accède à la page, créez un contrôle AppBarSeparator à ajouter au contrôle CommandBar.
  3. Créez un contrôle AppBarButton à ajouter au contrôle CommandBar.
  4. Définissez les propriétés Icon et Label pour le contrôle AppBarButton.
  5. Enregistrez le gestionnaire d’événements Click.
  6. Ajoutez le bouton au contrôle CommandBar.

void Page1_Loaded(object sender, RoutedEventArgs e)
{
    bottomAppBar.PrimaryCommands.Insert(0, new AppBarSeparator());

    AppBarButton addButton = new AppBarButton();
    addButton.Icon = new SymbolIcon(Symbol.Add);
    addButton.Label = "Add";
    addButton.Click += AppBarButton_Click;
    bottomAppBar.PrimaryCommands.Insert(0, addButton);
}

Étape 2: Supprimer le bouton de commande de la barre de commandes (Windows 8.1)

Windows 8.1:  Cette étape s’applique uniquement à Windows 8.1. Pour Windows 8, voir les étapes 3-5.

Quand un utilisateur quitte la page, supprimez la commande de l’objet AppBar.

  1. Annulez l’enregistrement du gestionnaire d’événements Click.
  2. Supprimez le contrôle AppBarButton du contrôle CommandBar.
  3. Supprimez le contrôle AppBarSeparator du contrôle CommandBar.

void Page1_Unloaded(object sender, RoutedEventArgs e)
{
    CommandBar bottomCommandBar = this.BottomAppBar as CommandBar;
    if (bottomCommandBar != null)
    {
        AppBarButton b = bottomCommandBar.PrimaryCommands[0] as AppBarButton;
        b.Click -= AppBarButton_Click;

        // Remove AppBarButton.
        bottomCommandBar.PrimaryCommands.RemoveAt(0);
        // Remove AppBarSeparator.
        bottomCommandBar.PrimaryCommands.RemoveAt(0);
    }
}

Étape 3: Afficher et masquer des commandes (Windows 8)

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

Pour afficher et masquer un groupe de commandes dans un contrôle AppBar, vous pouvez utiliser la propriété Visibility. C’est ainsi que vous contrôlez généralement les commandes contextuelles en fonction de la sélection de l’utilisateur dans une page.

  1. Ajoutez une barre de l’application à votre application. Pour plus d’informations, voir Démarrage rapide : ajout de barres d’application.
  2. Nommez les commandes ou groupes que vous affichez et masquez.
    1. Pour afficher et masquer une commande spécifique, nommez son bouton de commande.
    2. Pour afficher et masquer un groupe de commandes, placez-les dans un conteneur nommé.

    Dans cet exemple, les commandes "Pin" et "Unpin" sont placées dans un StackPanel nommé pinCommands. Le groupe pinCommands est initialement réduit.

    
    <AppBar IsOpen="True" IsSticky="True">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <StackPanel x:Name="pinCommands" Orientation="Horizontal"
                            Visibility="Collapsed">
                    <Button Style="{StaticResource UnpinAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Button Style="{StaticResource PinAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Rectangle Height="50" Width="2" Fill="LightGray"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Style="{StaticResource FavoriteAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Button Style="{StaticResource SearchAppBarButtonStyle}" 
                            Click="Button_Click"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </AppBar>
    
    
    
  3. Définissez la propriété Visibility de la commande ou du conteneur nommé de façon à l’afficher ou à le masquer.

    Ici, vous utilisez un contrôle ToggleSwitch pour afficher et masquer le groupe pinCommands. Dans une application ordinaire, vous pouvez afficher et masquer des commandes en fonction d’une sélection de l’utilisateur ou d’une autre interaction avec votre application.

    
    private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
    {
        ToggleSwitch toggle = (ToggleSwitch)sender;
    
        if (toggle.IsOn == true)
        {
            pinCommands.Visibility = Visibility.Visible;
        }
        else
        {
            pinCommands.Visibility = Visibility.Collapsed;
        }
    }
    
    
    

Voici à quoi ressemble la barre de l’application avec les commandes masquées.

Barre de l’application avec commandes masquées

Voici à quoi ressemble la barre de l’application avec les commandes affichées.

Barre de l’application avec commandes affichées

Étape 4: Ajouter un bouton de commande à une barre d’application (Windows 8)

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

Vous pouvez ajouter des commandes à un contrôle AppBar dans votre fichier code-behind. On procède généralement ainsi lorsque l’on partage un objet AppBar entre plusieurs pages et que certaines commandes ne s’appliquent qu’à une seule page. Le fait d’ajouter la commande au code de la page à laquelle elle s’applique simplifie l’ancrage de la commande à des éléments dans cette page. Ici, vous ajoutez une commande à un contrôle AppBar partagé quand l’utilisateur accède à une page et vous la supprimez lorsqu’il quitte la page.

Pour plus d’informations sur le partage d’une barre de l’application, voir Comment partager une barre de l’application entre des pages et Exemple de contrôle de barre de l’application XAML.

Quand un utilisateur accède à la page, ajoutez la commande à l’objet AppBar.

  1. Ajoutez une barre de l’application à votre application. Pour plus d’informations, voir Démarrage rapide : ajout de barres d’application.

    Ici, vous ajoutez une barre d’application inférieure avec un bouton unique défini en langage XAML.

    
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" IsSticky="True">
            <Grid>
                <StackPanel x:Name="rightPanel" 
                            Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource AppBarButtonStyle}" 
                            Content="&#xE174;" 
                            AutomationProperties.Name="Sort"
                            AutomationProperties.AutomationId="SortButton"
                            Click="SortMenuButton_Click" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    
    
    
  2. Quand un utilisateur accède à la page, créez le bouton de commande à ajouter à l’objet AppBar.
  3. Appliquez un style de bouton de barre de l’application au bouton.
  4. Enregistrez le gestionnaire d’événements Click.
  5. Ajoutez le bouton à l’objet AppBar.

Button addButton = null;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add a button to an AppBar.
   
    if (rightPanel != null)
    {
        // Create the button to add
        addButton = new Button();

        // Apply the button style so that it looks like an AppBar button
        addButton.Style = (Style)App.Current.Resources["AddAppBarButtonStyle"];

        // Add the Click handler for the new button
        addButton.Click += Button_Click;

        // Add the button to the AppBar
        rightPanel.Children.Add(addButton);
    }
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Perform action here.
}


Étape 5: Supprimer le bouton de commande de la barre d’application (Windows 8)

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

Quand un utilisateur quitte la page, supprimez la commande de l’objet AppBar.

  1. Annulez l’enregistrement du gestionnaire d’événements Click.
  2. Supprimez le bouton de l’objet AppBar.

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (rightPanel != null)
    {
        // Unhook the Click event handler for the button
        addButton.Click -= Button_Click;

        // Remove the button from the AppBar
        rightPanel.Children.Remove(addButton);
    }
}


Rubriques associées

Exemple de contrôle de barre de l’application XAML
Démarrage rapide : ajout de barres d’application
AppBar

 

 

Afficher:
© 2015 Microsoft