Comment partager une barre de l’application entre plusieurs pages (XAML)

Applies to Windows and Windows Phone

Un objet AppBar peut être assigné aux propriétés TopAppBar et BottomAppBar de chaque Page d’une application du Windows Store en C++, C# ou Visual Basic. Toutefois, vous souhaiterez peut-être utiliser la même AppBar sur plusieurs pages associées dans votre application pour fournir une navigation ou des commandes communes. Par exemple, vous pourriez placer en haut de votre application une barre de navigation qui permet aux utilisateurs de naviguer entre les pages. Dans ce cas, vous souhaiterez afficher la même barre de navigation pour chaque page au lieu de la recréer à chaque fois. Voyons comment partager une AppBar parmi plusieurs pages.

Ce didacticiel est basé sur la rubrique Navigation plate de A à Z et sur l'Exemple de navigation plate associé. Pour obtenir le code complet, voir l’Exemple de navigation plate.

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

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Ajouter une barre de l’application partagée à une page

Utilisez une page racine pour héberger l’objet AppBar partagé et un objet Frame. L’objet Frame héberge les contrôles Page qui affichent le contenu d’application.

Ici, vous affectez un contrôle AppBar avec des commandes de navigation à la propriété TopAppBar de la page racine. Vous ajoutez un objet Frame pour héberger les pages de l’application vers lesquelles l’utilisateur navigue.

JJ150604.wedge(fr-fr,WIN.10).gifPour ajouter la barre de l’application et le cadre à la page racine

  1. Ajoutez une page pour héberger les objets AppBar et Frame pour la navigation. Ici, vous utilisez le fichier MainPage.xaml par défaut.

    Voir MainPage.xaml dans le code complet à la fin de ce didacticiel.

  2. Ajoutez une méthode AppBar avec commandes de navigation à la propriété TopAppBar de la Page.
    
    <Page.TopAppBar>
        <AppBar x:Name="topAppBar" Background="#00b2f0">
            <AppBar.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="140"/>
                    <Setter Property="Height" Value="60"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </AppBar.Resources>
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" x:Uid="appbarHome" 
                        Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
                <Button Content="Page 2" x:Uid="appbarPage2" 
                        Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
                <!-- Add more buttons here as needed for new pages. -->
                <!-- Assign the fully qualified page name to the button's Tag property. -->
    
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
    
  3. Dans la page de code (MainPage.xaml.cs/vb), ajoutez du code pour naviguer parmi les pages.

    Ici, vous utilisez la propriété Tag de chaque bouton de navigation pour spécifier le nom de la page vers laquelle naviguer.

    
    private void NavButton_Click(object sender, RoutedEventArgs e)
    {
        Button b = sender as Button;
                
        if (b != null && b.Tag != null)
        {
            Type pageType = Type.GetType(b.Tag.ToString());
    
            // Make sure the page type exists, but don't navigate to it if it's already the current page.
            if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
            {
                (App.Current as App).Navigate(pageType);
            }
        }   
    }
    
    
  4. Ajoutez un contrôle CommandBar à la propriété BottomAppBar de la Page.

    Ici, le bouton Help sur le contrôle CommandBar est partagé par toutes les pages. Vous pouvez ajouter des commandes pour une page spécifique quand l’utilisateur accède à cette page et les supprimer quand il la quitte. Pour plus d’informations, voir Comment ajouter des commandes contextuelles à une barre de l’application.

    Le gestionnaire d’événements Click du bouton Help est visible dans le code complet à la fin de ce didacticiel. Pour plus d’informations, voir Démarrage rapide : ajouter de l’aide dans une application.

    Windows 8.1:  Les contrôles CommandBar et AppBarButton sont disponibles uniquement dans Windows 8.1. Pour Windows 8, utilisez AppBar et Button.

    
    <Page.BottomAppBar>
        <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
            <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
    
  5. Ajoutez un objet Frame à la page racine pour héberger les pages de l’application.
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="rootFrame"/>
    </Grid>
    
    
    
  6. Ajoutez des pages d’application vers lesquelles l’utilisateur peut naviguer.

    Voir HomePage.xaml et Page2.xaml dans le code complet à la fin de ce didacticiel.

Remarques

Téléchargez l’Exemple de navigation plate pour voir ce code en action.

Exemple complet

MainPage


<Page
    x:Class="FlatNavTemplate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="topAppBar" Background="#00b2f0">
            <AppBar.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="140"/>
                    <Setter Property="Height" Value="60"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </AppBar.Resources>
             <!--The StacklPanel doesn't resize nicely if the window gets narrow, so this way can be problamatic if there are too many pages.-->
            <StackPanel Orientation="Horizontal">
                <Button x:Uid="appbarHome" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
                <Button x:Uid="appbarPage2" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
                <!-- Add more buttons here as needed for new pages. -->
                <!-- Assign the fully qualified page name to the button's Tag property. -->
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>

    <Page.BottomAppBar>
        <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
            <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="rootFrame"/>
    </Grid>
</Page>


using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace FlatNavTemplate
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            
            if (b != null && b.Tag != null)
            {
                Type pageType = Type.GetType(b.Tag.ToString());

                // Make sure the page type exists, but don't navigate to it if it's already the current page.
                if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
                {
                    (App.Current as App).Navigate(pageType);
                }
            }   
        }

        private void HelpButton_Click(object sender, RoutedEventArgs e)
        {
            Settings.HelpSettings helpSettingsFlyout = new Settings.HelpSettings();
            // When the settings flyout is opened from the app bar instead of from
            // the setting charm, use the ShowIndependent() method.
            helpSettingsFlyout.ShowIndependent();
            topAppBar.IsOpen = false;
            bottomAppBar.IsOpen = false;
        }
    }
}


HomePage


<Page
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.HomePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" 
                   VerticalAlignment="Center" Width="100" 
                   Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

Page2


<Page
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.Page2"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application Page 2</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" 
                   VerticalAlignment="Center" Width="100" 
                   Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

Rubriques associées

Exemple de navigation plate
Exemple de contrôle de barre de l’application XAML
Démarrage rapide : ajout de barres d’application
Démarrage rapide : navigation entre les pages
Navigation plate de A à Z (XAML)
Conception de la navigation pour les applications du Windows Store
Conception des commandes des applications du Windows Store

 

 

Afficher:
© 2014 Microsoft