Comment partager une barre de l’application entre des pages

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

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Chaque classe Page d’une application Windows Runtime peut être associée à un contrôle AppBar, affecté à ses propriétés TopAppBar et BottomAppBar. Toutefois, vous souhaiterez peut-être utiliser le même élément AppBar sur plusieurs pages associées dans votre application pour fournir une navigation ou des commandes communes. Par exemple, vous pourriez placer une barre de navigation en haut de votre application, afin de permettre aux utilisateurs de naviguer entre les pages. Dans ce cas, vous souhaiterez afficher la même barre de navigation pour chaque page, évitant ainsi de la recréer à chaque fois.

Nous pouvons voir ici plusieurs méthodes de partage d’un contrôle AppBar ou CommandBar sur différentes pages. Ce didacticiel est basé sur la rubrique Navigation plate de A à Z et sur la section associée suivante : Exemple de navigation plate. Pour obtenir le code complet, consultez la section 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

Pour ajouter une barre d’application commune à plusieurs pages, créez une classe dérivée de la classe Page. Dans ce didacticiel, vous allez créer une classe appelée NavigationPage. Cette classe hérite des propriétés TopAppBar et BottomAppBar de la classe Page. Vous ajoutez des commandes de navigation à la barre d’application supérieure ; les autres commandes partagées sont quant à elles ajoutées à la barre d’application inférieure. Ensuite, vous modifiez les pages de l’application, afin qu’elles dérivent de l’élément NavigationPage plutôt que de l’élément Page. Ainsi, chaque page hérite des commandes que vous avez définies.

JJ150604.wedge(fr-fr,WIN.10).gifPour ajouter un élément AppBar partagé

  1. Créez une classe dérivée de la classe Page. Pour les besoins de ce didacticiel, nommez la classe NavigationPage.

    Consultez l’élément NavigationPage.cs dans le code complet, à la fin de ce didacticiel.

    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
    
        }
    }
    
    
    
  2. Affectez un contrôle AppBar avec des commandes de navigation à la propriété TopAppBar de la classe NavigationPage. Le contenu de l’élément AppBar est un élémentUserControl, que vous définissez à l’étape suivante.
    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }
    
        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Navigation controls go in the top app bar.
            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 }); 
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;
        }
    }
    
    
    
  3. Dans la mesure où un contrôle AppBar peut contenir n’importe quel contenu, vous pouvez regrouper toutes les commandes de navigation en un seul élément UserControlet définir l’élément UserControl en tant que contenu de l’élément AppBar. Pour les besoins de ce didacticiel, nommez l’élément UserControl NavigationControl.
    
    <UserControl
        x:Class="FlatNavTemplate.NavigationControl"
        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"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <UserControl.Resources>
            <Style TargetType="Button">
                <Setter Property="Width" Value="140"/>
                <Setter Property="Height" Value="60"/>
                <Setter Property="Margin" Value="5"/>
            </Style>
        </UserControl.Resources>
    
       <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>
    </UserControl>
    
    
  4. Dans la page de code de l’élément UserControl(NavigationControl.xaml.cs), ajoutez du code pour pouvoir 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.

    
    public sealed partial class NavigationControl : UserControl
    {
        public NavigationControl()
        {
            this.InitializeComponent();
        }
    
        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            Frame rootFrame = Window.Current.Content as Frame;
    
            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);
                }
                else if (pageType == null)
                {
                    // TODO: Optional - Do something if page not found.
                }
            }
        }
    }
    
    

Ajouter un contrôle CommandBar partagé à une page

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

JJ150604.wedge(fr-fr,WIN.10).gifPour ajouter un contrôle CommandBar partagé

  • Ajoutez un élément CommandBar à la propriété BottomAppBar de la classe NavigationPage.

    Dans la mesure où le contrôle CommandBar ne peut contenir que des contrôles AppBarButton, vous ne pouvez pas placer vos commandes dans un élément UserControl comme vous l’avez fait pour l’élément AppBar. Au lieu de cela, vous devez ajouter les commandes dans le code. Dans ce didacticiel, vous allez ajouter un bouton Aide sur le contrôle CommandBar, qui est partagé sur toutes les pages. Le gestionnaire d’événements Click du bouton Aide est visible dans le code complet à la fin de ce didacticiel. Pour en savoir plus, consultez la section Démarrage rapide : ajouter de l’aide dans une application.

    Astuce  

    Vous pouvez ajouter des commandes pour une page spécifique lorsque l’utilisateur accède à cette page et les supprimer quand il la quitte. Pour en savoir plus, consultez la section Comment ajouter des commandes contextuelles à une barre de l’application.

     
    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }
    
        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // CommandBar for Help command goes in the BottomAppBar.
            CommandBar commandBar = new CommandBar();
            commandBar.Background = new SolidColorBrush(new Color() { A = 255, R = 0, G = 178, B = 240 });
                
            // Create the Help button.
            AppBarButton helpButton = new AppBarButton();
            helpButton.Icon = new SymbolIcon(Symbol.Help);
            helpButton.Label = "Help";
            helpButton.Click += helpButton_Click;
                
            // Add the Help button to the command bar.
            commandBar.PrimaryCommands.Add(helpButton);
            this.BottomAppBar = commandBar;
        }
    }
    
    
    

Ajouter des pages à votre application

  1. Ajoutez des pages d’application entre lesquelles l’utilisateur peut se déplacer.

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

  2. Modifiez les pages d’application, afin qu’elles dérivent de l’élément NavigationPage plutôt que de l’élément Page. Chaque page dérivée de l’élément NavigationPage comporte les commandes de navigation et d’aide que vous avez définies.

    Voici la définition de l’élément HomePage mis à jour, afin de dériver de l’élément NavigationPage.

    
    
    <nav:NavigationPage
        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:nav="using:FlatNavTemplate"
        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">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <-- PAGE CONTENT -->   
        </Grid>
    </nav:NavigationPage>
    
    
    
    
    public sealed partial class HomePage : NavigationPage
    {
    
    }
    
    

Remarques

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

Terminer l’exemple

NavigationPage


using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace FlatNavTemplate
{
    public class NavigationPage : Page
    {
        public static NavigationPage Current;

        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }

        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // To access the app bars from the code of a derived page, 
            // use NavigationPage.Current.TopAppBar or NavigationPage.Current.BottomAppBar.
            Current = this;

            // Navigation controls go in the top app bar.
            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 });
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;

            // CommandBar for Help command goes in the BottomAppBar.
            CommandBar commandBar = new CommandBar();
            commandBar.Background = new SolidColorBrush(new Color() { A = 255, R = 0, G = 178, B = 240 });
            // Create the Help button.
            AppBarButton helpButton = new AppBarButton();
            helpButton.Icon = new SymbolIcon(Symbol.Help);
            helpButton.Label = "Help";
            helpButton.Click += helpButton_Click;
            // Add the Help button to the command bar.
            commandBar.PrimaryCommands.Add(helpButton);
            this.BottomAppBar = commandBar;
        }

        void helpButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Settings.HelpSettings helpSettingsFlyout = new Settings.HelpSettings();
            // When the settings flyout is opened from the app bar instead of from
            // the Settings charm, use the ShowIndependent() method.
            helpSettingsFlyout.ShowIndependent();

            // Close the app bars.
            this.TopAppBar.IsOpen = false;
            this.BottomAppBar.IsOpen = false;
        }
    }
}

NavigationControl


<UserControl
    x:Class="FlatNavTemplate.NavigationControl"
    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"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="140"/>
            <Setter Property="Height" Value="60"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </UserControl.Resources>
    
    <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>
</UserControl>



namespace FlatNavTemplate
{
    public sealed partial class NavigationControl : UserControl
    {
        public NavigationControl()
        {
            this.InitializeComponent();
        }

        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            Frame rootFrame = Window.Current.Content as Frame;

            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);
                }
                else if (pageType == null)
                {
                    // TODO: Optional - Do something if page not found.
                }
            }
        }
    }
}

HomePage


<nav:NavigationPage
    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:nav="using:FlatNavTemplate"
    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>
</nav:NavigationPage>


public sealed partial class HomePage : NavigationPage
{
    // Only class definition is shown. Template code is removed for clarity.
}

Page2


<nav:NavigationPage
    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:nav="using:FlatNavTemplate"
    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>
</nav:NavigationPage>


public sealed partial class Page2 : NavigationPage
{
    // Only class definition is shown. Template code is removed for clarity.
}

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:
© 2017 Microsoft