Comment utiliser une barre de l’application avec différentes tailles

Applies to Windows only

Par défaut, un bouton de barre de l’application a une largeur de 100 pixels indépendants du périphérique (DIP) et a une étiquette de texte sous son icône. Lorsqu’un utilisateur réduit la largeur d’une application, l’espace horizontal peut s’avérer insuffisant pour afficher les commandes. Si la barre de l’application contient trop de boutons, vous devez effectuer quelques réglages pour afficher correctement les boutons dans un espace plus étroit.

Remarque  Si le contenu de la barre de l’application est hébergé dans un contrôle CommandBar, le contrôle CommandBar gère la disposition et le redimensionnement de ses contrôles de bouton de la barre de l’application enfants. Les techniques présentées dans ce didacticiel ne sont nécessaires que lorsque le contenu de la barre de l’application est hébergé dans un contrôle AppBar.

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: Masquer les étiquettes et réduire la largeur (Windows 8.1)

Windows 8.1:  Cette étape s’applique uniquement à Windows 8.1. Pour Windows 8, voir l’étape 3.

Le code présenté dans ces exemples utilise le contrôle AppBar défini en XAML (eXtensible Application Markup Language).


<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <AppBarButton Label="Save" Icon="Save"/>
                <AppBarButton Label="Discard" Icon="Delete"/>
                <AppBarButton Label="Edit" Icon="Edit"/>
                <AppBarButton Label="Undo" Icon="Undo"/>
                <AppBarButton Label="Redo" Icon="Redo"/>
            </StackPanel>
            
            <StackPanel x:Name="rightAppBarPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <AppBarButton Label="Skip Back" Icon="Previous"/>
                <AppBarButton Label="Skip Ahead" Icon="Next"/>
                <AppBarButton Label="Play" Icon="Play"/>
                <AppBarButton Label="Pause" Icon="Pause"/>
                <AppBarButton Label="Stop" Icon="Stop"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Cette barre de l’application ressemble à ceci dans une application d’une largeur de 1024 pixels.

barre de l’application dotée de 10 boutons

Lorsque l’application fait 320 pixels de large, la barre de l’application ressemble à ceci par défaut.

barre de l’application dotée de 10 boutons dans l’affichage ancré

Les contrôles du bouton de la barre de l’application (AppBarButton et AppBarToggleButton) ont deux tailles : normale et compact. 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. Pour que les boutons de la barre de l’application utilisent moins d’espace, attribuez à la propriété IsCompact la valeur true .

Lorsqu’un bouton de la barre de l’application n’est pas hébergé dans un contrôle CommandBar, vous devez gérer sa propriété IsCompact dans votre code. Pour ce faire, écoutez l’événement SizeChanged de la page, puis définissez la propriété IsCompact pour chaque bouton de la barre de l’application en fonction de la nouvelle taille de la fenêtre.

JJ662742.wedge(fr-fr,WIN.10).gifPour redimensionner des boutons

  1. Inscrivez-vous à l’événement SizeChanged de la page.
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        this.SizeChanged += MainPage_SizeChanged;
    }
    
    
    
  2. Dans le gestionnaire d’événements SizeChanged, vérifiez si la largeur de la page a changé. Si c’est le cas, mettez à jour la disposition du contrôle AppBar.
    
    void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width != e.PreviousSize.Width)
        {
            UpdateBottomAppBarLayout(e.NewSize.Width);
        }
    }
    
    
  3. Pour mettre à jour la disposition du contrôle AppBar, définissez la propriété IsCompact de chaque bouton en fonction de la largeur de la page. Dans cet exemple, il y a 10 contrôles AppBarButton, chacun mesurant 100 DIP de large. Ainsi, si la largeur de la page est inférieure à 1000, les boutons doivent avoir une taille compacte.
    
    private void UpdateAppBarButtons(double newWidth)
    {
        if (newWidth < 1000)
        {
            ToggleIsCompact(true);
        }
        else
        {
            ToggleIsCompact(false);
        }
    }
    
    

    Si votre nombre de boutons est fixe, vous pouvez régler la propriété IsCompact de chaque bouton dans le code ou à l’aide de VisualStateManager. Vous pouvez aussi les lire en boucle, comme illustré ici. Ce code suppose que la barre de l’application utilise une disposition avec un contrôle Panel racine contenant des contrôles Panel supplémentaires qui hébergent les boutons.

    
    private void ToggleIsCompact(bool isCompact)
    {
        // Get the app bar's root Panel.
        Panel root = bottomAppBar.Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                foreach (ICommandBarElement child in panel.Children)
                {
                    child.IsCompact = isCompact;
                }
            }
        }
    }
    
    

À présent, lorsque l’utilisateur réduit la largeur de l’application, les boutons sont redimensionnés et la barre de l’application ressemble à ceci.

Barre de l’application dans une application étroite

Étape 2: Réorganiser et masquer les boutons (Windows 8.1)

Windows 8.1:  Cette étape s’applique uniquement à Windows 8.1. Pour Windows 8, voir l’étape 4.

Remarque  Dans cette étape, nous supposons que les boutons de la barre de l’application ont un état compact, comme décrit dans l’étape précédente, sans étiquette de texte et avec une largeur réduite.

À son niveau le plus étroit, la barre de l’application permet d’afficher une rangée de seulement 5 contrôles AppBarButton. Si la barre de l’application contient plus de 5 boutons, vous devez organiser les boutons en 2 rangées, masquer certains boutons, ou effectuer ces deux opérations.

JJ662742.wedge(fr-fr,WIN.10).gifPour placer les boutons sur 2 rangées

  1. Pour réorganiser les boutons en 2 rangées, utilisez une disposition comme celle-ci pour votre barre de l’application. Utilisez un contrôle Grid racine avec 2 rangées et 2 volets, en général des éléments StackPanel, pour contenir les boutons.
    
    <AppBar>
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                    
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <!-- Buttons -- >
            </StackPanel>
                    
            <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" 
                        HorizontalAlignment="Right">
                <!-- Buttons -- >
            </StackPanel>
        </Grid>
    </AppBar>
    
    
  2. Lorsque l’application est trop étroite pour afficher tous les boutons dans une seule rangée, affectez à la propriété Grid.Row de l’élément rightAppBarPanel la valeur 1 et affectez à la propriété HorizontalAlignment du volet la valeur Left.

    Ceci est utile si vous souhaitez que les boutons principaux (à droite) et secondaires (à gauche) soient visibles. En revanche, s’il n’est pas nécessaire d’afficher les commandes secondaires, vous pouvez les masquer comme indiqué ci-après.

    Lorsque l’application est à son niveau le plus étroit, les boutons situés à droite passent à la rangée inférieure. La barre de l’application se présente sous cette forme.

    barre de l’application dans l’affichage ancré avec 2 rangées

    Cet exemple comprend 10 contrôles AppBarButton, chacun d’entre eux mesurant 60 DIP de large en mode compact. Si la largeur de la page est inférieure à 600, les boutons doivent avoir une taille compacte et être affichés sur 2 rangées.

    
    private void UpdateBottomAppBarLayout(double newWidth)
    {
        if (newWidth < 600)
        {
            ToggleIsCompact(true);
            rightAppBarPanel.SetValue(Grid.RowProperty, 1);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Left);
        }
        else if (newWidth < 1000)
        {
            ToggleIsCompact(true);
            rightAppBarPanel.SetValue(Grid.RowProperty, 0);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);
        }
        else
        {
            ToggleIsCompact(false);
            rightAppBarPanel.SetValue(Grid.RowProperty, 0);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);
        }
    }
    
    

JJ662742.wedge(fr-fr,WIN.10).gifPour masquer les boutons

  • Lorsque l’application est trop étroite pour afficher tous les boutons dans une seule rangée, affectez à la propriété Visibility de l’élément leftAppBarPanel la valeur Collapsed.

    Lorsque l’application est à son niveau le plus étroit, les boutons situés dans le volet de gauche sont masqués. La barre de l’application se présente sous cette forme.

    barre de l’application dans l’affichage ancré avec 1 rangée

    Cet exemple comprend 10 contrôles AppBarButton, chacun d’entre eux mesurant 60 DIP de large en mode compact. Si la largeur de la page est inférieure à 600, les boutons doivent avoir une taille compacte et les commandes secondaires doivent être masquées.

    
    private void UpdateBottomAppBarLayout(double newWidth)
    {
        if (newWidth < 600)
        {
            ToggleIsCompact(true);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Collapsed);
    
        }
        else if (newWidth < 1000)
        {
            ToggleIsCompact(true);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Visible);
        }
        else
        {
            ToggleIsCompact(false);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Visible);
        }
    }
    
    

Étape 3: Masquer les étiquettes et réduire la largeur (Windows 8)

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

Le code présenté dans ces exemples utilise le contrôle AppBar défini en XAML.

Remarque  Pour utiliser les ressources "AppBarButtonStyle" illustrées ici, vous devez modifier le fichier StandardStyles.xaml pour les rendre disponibles. Pour plus d’informations, voir Démarrage rapide : ajout de boutons à la barre de l’application.


<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True" 
            Loaded="appBar_Loaded" Unloaded="appBar_Unloaded">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <Button Style="{StaticResource SaveAppBarButtonStyle}"/>
                <Button Style="{StaticResource DiscardAppBarButtonStyle}"/>
                <Button Style="{StaticResource EditAppBarButtonStyle}"/>
                <Button Style="{StaticResource UndoAppBarButtonStyle}"/>
                <Button Style="{StaticResource RedoAppBarButtonStyle}"/>
            </StackPanel>
            
            <StackPanel x:Name="rightAppBarPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource SkipBackAppBarButtonStyle}"/>
                <Button Style="{StaticResource SkipAheadAppBarButtonStyle}"/>
                <Button Style="{StaticResource PlayAppBarButtonStyle}"/>
                <Button Style="{StaticResource PauseAppBarButtonStyle}"/>
                <Button Style="{StaticResource StopAppBarButtonStyle}"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Cette barre de l’application ressemble à ceci dans une application d’une largeur de 1024 pixels.

barre de l’application dotée de 10 boutons

Lorsque l’application est ancrée, la barre de l’application ressemble à ceci par défaut.

barre de l’application dotée de 10 boutons dans l’affichage ancré

Pour que les boutons de la barre de l’application prennent moins d’espace, le Style de base AppBarButtonStyle inclut des éléments VisualState qui masquent l’étiquette du bouton et réduisent sa largeur dans les affichages Snapped et FullScreenPortrait. Les éléments VisualState sont définis dans la ressource AppBarButtonStyle, mais, par défaut, les contrôles ne connaissent pas l’état d’affichage de l’application. Pour qu’un bouton de la barre de l’application change d’état en fonction de l’état d’affichage de l’application, vous devez fournir un code supplémentaire pour rendre le contrôle Button conscient des changements de l’état d’affichage de l’application. Le code que vous fournissez dépend du fait que la page qui héberge la barre de l’application soit dérivée ou non de la classe LayoutAwarePage.

Remarque  Les modèles de page Microsoft Visual Studio autres que Page vierge sont dérivés de la classe LayoutAwarePage. LayoutAwarePage est une implémentation de Page qui permet d’utiliser des fonctionnalités importantes pour le développement d’applications du Windows Store, telles que la gestion de l’état d’affichage, la navigation de base et la gestion de l’état de session d’application. Pour plus d’informations, voir Modèles d’élément en C#, VB et C++.

Dans LayoutAwarePage, tout contrôle peut invoquer StartLayoutUpdates pour s’inscrire afin de recevoir les changements d’état visuel qui correspondent aux changements d’état d’affichage de l’application. Cela signifie qu’un bouton de la barre de l’application peut passer dans son état d’affichage Snapped lorsque l’état d’affichage de l’application devient Snapped.

JJ662742.wedge(fr-fr,WIN.10).gifPour redimensionner les boutons dans LayoutAwarePage

  1. Si votre contrôle AppBar possède seulement 1 ou 2 commandes, vous pouvez les inscrire et désinscrire individuellement dans leurs événements Loaded et Unloaded, comme cela.
    
    <Button Style="{StaticResource PlayAppBarButtonStyle}"
            Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"/>
    
    
  2. Si la barre de l’application possède un plus grand nombre de boutons, il est préférable de les inscrire et désinscrire tous dans le code, lorsque la barre de l’application est chargée et déchargée, comme cela est illustré ici.

    Ce code suppose que la barre de l’application utilise une disposition avec un contrôle Panel racine qui contient des contrôles Panel supplémentaires qui hébergent les boutons. Chaque bouton est inscrit pour recevoir les modifications d’état lorsque le contrôle AppBar est chargé, et désinscrit lorsque la barre de l’application est déchargée.

    Les événements Loaded et Unloaded sont inscrits dans le code XAML du contrôle AppBar montré précédemment.

    
    
    private void appBar_Loaded(object sender, RoutedEventArgs e)
    {
        // Get the app bar's root Panel.
        Panel root = ((AppBar)sender).Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and register for layout updates.
                foreach (UIElement child in panel.Children)
                {
                    base.StartLayoutUpdates(child, new RoutedEventArgs());
                }
            }
        }
    }
    
    private void appBar_Unloaded(object sender, RoutedEventArgs e)
    {
        // Get the app bar's root Panel.
        Panel root = ((AppBar)sender).Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and unregister layout updates.
                foreach (UIElement child in panel.Children)
                {
                    base.StopLayoutUpdates(child, new RoutedEventArgs());
                }
            }
        }
    }
    
    

Si la page qui héberge la barre de l’application n’est pas dérivée de LayoutAwarePage, vous devez fournir des fonctionnalités dans votre page pour modifier l’état d’affichage du contrôle Button. Pour cela, vous devez être à l’écoute des modifications de l’état d’affichage de l’application, puis appeler ViewStateManager.GoToState pour chaque bouton de la barre de l’application lorsque l’état d’affichage de l’application change.

JJ662742.wedge(fr-fr,WIN.10).gifPour redimensionner les boutons dans une page vierge

  1. Inscrivez-vous pour l’événement SizeChanged de la fenêtre.
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        Window.Current.SizeChanged += Current_SizeChanged;
    }
    
    
    
  2. Dans le gestionnaire d’événements SizeChanged, vérifiez si la barre de l’application est ouverte. Si tel est le cas, mettez à jour l’état d’affichage de chaque bouton.

    Ce code gère le cas où l’état d’affichage de l’application change lorsque la barre de l’application est ouverte.

    
    void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        if (bottomAppBar.IsOpen == true)
        {
            UpdateAppBarButtonsViewState();
        }
    }
    
    
  3. Ajoutez un gestionnaire pour l’événement Loaded du contrôle AppBar. Dans le gestionnaire d’événements Loaded, mettez à jour l’état d’affichage de chaque bouton.

    Ce code gère le cas où la barre de l’application est ouverte après le changement de l’état d’affichage de l’application.

    Cet événement Loaded est inscrit dans le code XAML du contrôle AppBar montré précédemment.

    
    private void bottomAppBar_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateAppBarButtonsViewState();
    }
    
    
  4. Pour mettre à jour l’état d’affichage de chaque bouton, appelez VisualStateManager.GoToState et transmettez l’état d’affichage actuel de l’application.

    Si la barre de l’application possède uniquement 1 ou 2 commandes, vous pouvez les nommer et appeler GoToState sur elles individuellement, comme cela.

    
    private void UpdateAppBarButtonsViewState()
    {
        string viewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString();
    
        VisualStateManager.GoToState(playButton, viewState, true);
        VisualStateManager.GoToState(stopButton, viewState, true);
    }
    
    

    Si la barre de l’application possède un plus grand nombre de boutons, il est préférable de les traiter en boucle, comme cela est illustré ici. Ce code suppose que la barre de l’application utilise une disposition avec un contrôle Panel racine qui contient des contrôles Panel supplémentaires qui hébergent les boutons.

    
    private void UpdateAppBarButtonViewState()
    {
        string viewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString();
    
        // Get the app bar's root Panel.
        Panel root = bottomAppBar.Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and update its state if 
               // it's a Button or ToggleButton.
                foreach (UIElement child in panel.Children)
                {
                    if (child.GetType() == typeof(Button) || 
                        child.GetType() == typeof(ToggleButton))
                    {
                        VisualStateManager.GoToState((ButtonBase)child, viewState, true);
                    }
                }
            }
        }
    }
    
    

À présent, lors de la rotation de l’application dans l’orientation portrait et du redimensionnement des boutons, la barre de l’application ressemble à ceci.

barre de l’application en mode d’affichage portrait

Étape 4: Réorganiser et masquer les boutons (Windows 8)

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

Remarque  Dans cette étape, nous supposons que les boutons de la barre de l’application ont un état VisualState Snapped, comme décrit dans l’étape précédente, sans étiquette de texte et avec une largeur réduite.

Dans l’affichage Snapped, la largeur de la barre de l’application permet d’afficher une rangée de seulement 5 boutons. Si la barre de l’application contient plus de 5 boutons, vous devez organiser les boutons en 2 rangées, masquer certains boutons, ou effectuer ces deux opérations.

JJ662742.wedge(fr-fr,WIN.10).gifPour placer les boutons sur 2 rangées

  1. Pour réorganiser les boutons en 2 rangées, utilisez une disposition comme celle-ci pour votre barre de l’application. Utilisez un contrôle Grid racine avec 2 rangées et 2 volets, en général des éléments StackPanel, pour contenir les boutons.
    
    <AppBar>
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                    
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <!-- Buttons -- >
            </StackPanel>
                    
            <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right">
                <!-- Buttons -- >
            </StackPanel>
        </Grid>
    </AppBar>
    
    
  2. Dans l’état VisualState Snapped, modifiez la valeur de la propriété Grid.Row de l’élément rightAppBarPanel en spécifiant 1 et modifiez la propriété HorizontalAlignment du volet en spécifiant Left.

    Lorsque l’application est ancrée, les boutons situés à droite sont placés dans la rangée inférieure. La barre de l’application se présente sous cette forme.

    barre de l’application dans l’affichage ancré avec 2 rangées

    
    <VisualStateManager.VisualStateGroups>
        ...
            <VisualState x:Name="Snapped">
                <Storyboard>
                    ... 
    
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" 
                                                   Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" 
                                           Storyboard.TargetProperty="HorizontalAlignment">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                    </ObjectAnimationUsingKeyFrames>
                    ...
                </Storyboard>
            </VisualState>
        ...
    </VisualStateManager.VisualStateGroups>
    
    

JJ662742.wedge(fr-fr,WIN.10).gifPour masquer les boutons

  • Dans l’état VisualState Snapped, modifiez la valeur de la propriété Visibility de l’élément leftAppBarPanel en spécifiant Collapsed.

    Lorsque l’application est ancrée, les boutons situés dans le volet de gauche sont masqués. La barre de l’application se présente sous cette forme.

    barre de l’application dans l’affichage ancré avec 1 rangée

    
    <VisualStateManager.VisualStateGroups>
        ...
            <VisualState x:Name="Snapped">
                <Storyboard>
                    ...
    
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="leftAppBarPanel" 
                                                   Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        ...
    </VisualStateManager.VisualStateGroups>
    
    

Remarques

Vous pouvez masquer les commandes moins importantes dans l’affichage Snapped en masquant un volet entier, comme illustré, ou en masquant des boutons individuels de la même manière. Pour masquer un bouton individuel, vous devez le nommer afin de pouvoir le référencer dans le VisualStateManager.

 

 

Afficher:
© 2014 Microsoft