Langage: HTML | XAML

Démarrage rapide : ajouter de l’aide à une application (applications du Windows Store en C++, C# ou Visual Basic)

Applies to Windows only

Ajoutez de l’aide à votre application à l’aide du contrôle SettingsFlyout XAML.

Les étapes suivantes vous guident tout au long du processus d’ajout d’un menu volant d’aide à votre application du Windows Store à l’aide du contrôle SettingsFlyout. L’utilisation de ce contrôle XAML facilite l’ajout d’une commande d’aide au volet Paramètres de votre application et assure la cohérence de la conception du menu volant.

Dans ce didacticiel de démarrage rapide, vous allez ajouter un nouveau SettingsFlyout à un projet Microsoft Visual Studio 2013 existant, apprendre à modifier et à appliquer un style au contenu par défaut, et à créer deux moyens d’accéder à votre menu volant d’aide : à partir d’un bouton Aide sur la barre inférieure de l’application et à partir du volet Paramètres de votre application.

Vous écrivez des applications en Javascript et en HTML ? Voir Démarrage rapide : ajout d’une aide à l’application (applications du Windows Store en JavaScript et HTML).

Prérequis

Pour télécharger Visual Studio 2013 et Windows 8.1, voir Obtenir les outils.

Ce didacticiel de démarrage rapide part du principe que vous voulez ajouter de l’aide à un projet d’application du Windows Store existant en C#, Visual Basic ou C++. Si vous n’avez pas déjà créé d’application, choisissez votre langage préféré et consultez nos instructions pas à pas :

Ajouter un menu volant SettingsFlyout à votre application

Suivez les étapes ci-après pour créer un SettingsFlyout pour votre application du Windows Store existante. Le contrôle SettingsFlyout par défaut possède une section d’en-tête avec un titre, un bouton Précédent et une icône de logo, ainsi qu’une section de contenu.

  • Ouvrez le projet d’application du Windows Store que vous avez créé dans Visual Studio 2013.
  • Sélectionnez le menu Projet, et cliquez sur Ajouter un nouvel élément. La boîte de dialogue Ajouter un nouvel élément s’ouvre. (Vous pouvez également utiliser le raccourci Ctrl+Maj+A pour ouvrir cette boîte de dialogue.)
  • Dans le volet Visual C#, sélectionnez Windows Store.
  • Dans le volet central, faites défiler la liste et sélectionnez Menu volant Paramètres.
  • Dans la zone de texte Nom, entrez un nom pour votre SettingsFlyout. Cet exemple utilise le nom HelpSettingsFlyout. Visual Studio 2013 crée un fichier HelpSettingsFlyout.xaml et un fichier HelpSettingsFlyout.xaml.cs correspondant. Ces fichiers HelpSettingsFlyout apparaissent maintenant avec le reste de vos fichiers de projet dans l’Explorateur de solutions.

Appliquer un style à votre menu volant et ajouter du contenu d’aide

Remplacez le contenu SettingsFlyout par défaut par de l’aide spécifique à votre application, puis appliquez un style au menu volant qui correspond à votre thème de conception. Vous pouvez modifier un SettingsFlyout comme suit :

  • Changez le titre d’affichage de votre menu volant à l’aide de la propriété Title. Par défaut, le titre qui s’affiche en haut de votre menu volant correspondra au nom que vous avez choisi pour le SettingsFlyout lorsque vous l’avez ajouté à votre projet.
  • Pensez à ajuster la largeur du menu volant. La largeur par défaut d’un SettingsFlyout est étroite (346px).
  • Vous pouvez afficher une icône de logo différente ou supprimer l’icône de logo en réinitialisant ou en supprimant la propriété IconSource.
  • Pour changer le thème de couleur ou les polices, utilisez le volet Propriétés. Si vous ne voyez pas ce volet en regard de l’onglet Explorateur de solutions du côté droit de votre écran, ouvrez le menu Affichage puis cliquez sur Propriétés, ou appuyez sur Ctrl+W+P pour l’ouvrir.
  • Ajoutez les sections de contenu voulues. Si votre application dispose de ressources de support en ligne, vous pouvez créer un lien vers ces ressources depuis votre menu volant d’aide.

N’oubliez pas que vous ne pouvez pas supprimer le bouton Précédent dans un SettingsFlyout. Par ailleurs, un SettingsFlyout s’ajuste à la hauteur de l’écran.

Le code ci-dessous est presque identique à un SettingsFlyout par défaut à ceci près que son titre est différent, qu’il contient un bloc de texte supplémentaire et qu’il inclut un bouton de lien hypertexte Vous pouvez ajouter ce code à votre fichier HelpSettingsFlyout.xaml.

Important : ce SettingsFlyout a été créé dans un projet appelé AppHelpExample. Pour que ce code fonctionne dans votre projet, remplacez x:Class="AppHelpExample.HelpSettingsFlyout" par x:Class="<nom de votre projet>.HelpSettingsFlyout" et xmlns:local="using:AppHelpExample" par xmlns:local="using:<nom de votre projet>".


<SettingsFlyout
    x:Class="AppHelpExample.HelpSettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppHelpExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="Help"
    d:DesignWidth="346">

    <!-- The width of a SettingsFlyout is adjustable (default width is 346px) -->
    <!-- The SettingsFlyout control automatically adjusts to match screen height -->
   
    <!-- This StackPanel organizes the flyout's content sections vertically -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The StackPanel(s) below define individual content sections -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="About Help" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                   <!-- Replace with your own Help content -->
                    Help content is a single page that can include text, links, and images. To provide the most current content, consider linking to a support page.
                </TextBlock.Text>
            </TextBlock>

            <!--New TextBlock-->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}">
                <TextBlock.Text>
                    Not sure what to include in your Help flyout? See:
                </TextBlock.Text>
            </TextBlock>

            <HyperlinkButton NavigateUri="http://go.microsoft.com/fwlink/p/?LinkID=275435" HorizontalAlignment="Center" Content="Guidelines for app help"/>
        </StackPanel>

        <!-- Define more Content Sections below as necessary -->

    </StackPanel>
</SettingsFlyout>


Ajouter une barre d’application inférieure dotée d’un bouton Aide

À l’étape précédente, vous avez créé un menu volant d’aide entièrement opérationnel. À présent, nous allons permettre aux utilisateurs d’ouvrir votre nouveau menu volant d’aide d’un simple clic sur un bouton de la barre d’application. L’extrait de code ci-dessous crée une barre d’application inférieure dotée d’un bouton d’aide. Cette barre d’application apparaît lorsqu’un utilisateur clique avec le bouton droit n’importe où dans la page ou effectue un mouvement de balayage depuis le bas de l’écran. Si un utilisateur clique sur le bouton d’aide, l’événement HelpButton_Click est appelé.

Pour créer une barre d’application inférieure sur la première page de votre application, ouvrez le fichier MainPage.xaml de votre projet et ajoutez le code XAML suivant :


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


L’extrait de code suivant gère l’événement HelpButton_Click que vous venez d’ajouter. La méthode ShowIndependent ouvre le menu volant Aide et renvoie l’utilisateur à la page de l’application lorsqu’il ferme le menu volant. La dernière ligne de cet extrait de code masque la barre d’application inférieure de l’écran à l’ouverture du menu volant Aide.

Ajoutez le code C# suivant à MainPage.xaml.cs :


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

Lorsque vous avez ajouté ces deux extraits de code, générez et exécutez votre application. Cliquez avec le bouton droit ou effectuez un balayage à partir du bas de la page d’accueil de l’application. Une barre d’application dotée d’un bouton Aide doit apparaître au bas de l’écran. Cliquez sur le bouton et le menu volant Aide s’affichera du côté droit de l’écran, comme illustré dans la capture d’écran ci-dessous. Capture d’écran montrant un menu volant Aide étroit sortant du côté droit de l’écran

Ajouter l’aide au volet Paramètres de votre application

Lorsque vous utilisez le contrôle SettingsFlyout pour créer un menu volant Aide, vous pouvez facilement ajouter de l’aide au volet Paramètres de votre application. Le volet Paramètres d’une application apparaît quand un utilisateur effectue un balayage à partir du bord droit de l’écran et sélectionne l’icône Paramètres ou appuie sur Windows+I. Pour plus d’informations sur les paramètres de l’application, parcourez Guidelines for app settings. Pour en savoir plus sur ces icônes, voir la vue d’ensemble Icônes.

Commencez par ajouter l’espace de noms ApplicationSettings à la page App.xaml.cs de votre application :


	using Windows.UI.ApplicationSettings;

Dans le code ci-dessous, la méthode OnWindowCreated prépare le volet Paramètres de l’application au lancement de votre application. OnCommandsRequested ajoute une commande « Aide » au volet Paramètres. SettingsCommand définit les propriétés Label, Id et Invoked du paramètre personnalisé. Définissez la valeur de la propriété Label au nom de la commande qui s’affichera aux utilisateurs dans le volet Paramètres. La propriété Invoked définit le gestionnaire pour l’événement déclenché lorsqu’un utilisateur sélectionne une commande dans le volet Paramètres. Cet exemple ajoute un gestionnaire d’événements nommé ShowHelpSettingsFlyout. Le gestionnaire d’événements crée et ouvre le menu volant lorsque l’utilisateur clique sur « Aide » dans le volet Paramètres.

Pour ajouter de l’aide dans le volet Paramètres de votre application, ajoutez le code C# suivant dans App.xaml.cs:


        protected override void OnWindowCreated(WindowCreatedEventArgs args)
        {
            SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;
        }

        private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {

            args.Request.ApplicationCommands.Add(new SettingsCommand(
                "Help", "Help", (handler) => ShowHelpSettingsFlyout()));
        }

        public void ShowHelpSettingsFlyout()
        {
            HelpSettingsFlyout helpSF = new HelpSettingsFlyout();
            helpSF.Show();
        }


Le processus d’ajout d’autres paramètres personnalisés dans le volet Paramètres de votre application est très similaire aux étapes décrites dans cette section. Voir Quickstart: Add app settings (Windows Store apps using C#/VB/C++) si vous voulez créer des paramètres supplémentaires et les afficher dans le volet Paramètres de votre application.

Exemples de code complets

Voici les exemplaires complets des quatre pages modifiées dans ce didacticiel de démarrage rapide.

  • HelpSettingsFlyout.xaml : pour que ce code fonctionne dans votre projet, remplacez x:Class="AppHelpExample.HelpSettingsFlyout" par x:Class="<nom de votre projet>.HelpSettingsFlyout" et xmlns:local="using:AppHelpExample" par xmlns:local="using:<nom de votre projet>".
    
    <SettingsFlyout
        x:Class="AppHelpExample.HelpSettingsFlyout"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:AppHelpExample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        IconSource="Assets/SmallLogo.png"
        Title="Help"
        d:DesignWidth="346">
    
        <!-- The width of a SettingsFlyout is adjustable (default width is 346px) -->
        <!-- The SettingsFlyout control automatically adjusts to match screen height -->
       
        <!-- This StackPanel organizes the flyout's content sections vertically -->
        <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    
            <!-- The StackPanel(s) below define individual content sections -->
    
            <!-- Content Section 1-->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
    
                <!-- Section 1 header -->
                <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="About Help" />
    
                <!-- Section 1 body -->
                <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                    <TextBlock.Text>
                       <!-- Replace with your own Help content -->
                        Help content is a single page that can include text, links, and images. To provide the most current content, consider linking to a support page.
                    </TextBlock.Text>
                </TextBlock>
    
                <!--New TextBlock-->
                <TextBlock Style="{StaticResource BodyTextBlockStyle}">
                    <TextBlock.Text>
                        Not sure what to include in your Help flyout? See:
                    </TextBlock.Text>
                </TextBlock>
    
                <HyperlinkButton NavigateUri="http://go.microsoft.com/fwlink/p/?LinkID=275435" HorizontalAlignment="Center" Content="Guidelines for app help"/>
            </StackPanel>
    
            <!-- Define more Content Sections below as necessary -->
    
        </StackPanel>
    </SettingsFlyout>
    
    
  • MainPage.xaml
    
    <Page
        x:Class="AppHelpExample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:AppHelpExample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.BottomAppBar>
            <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
                <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        </Grid>
    </Page>
    
    
    
  • MainPage.xaml.cs
    
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/p/?LinkID=234238
    
    namespace AppHelpExample
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void HelpButton_Click(object sender, RoutedEventArgs e)
            {
                AppHelpExample.HelpSettingsFlyout helpSF = new AppHelpExample.HelpSettingsFlyout();
                // When the settings flyout is opened from the app bar instead of from
                // the setting charm, use the ShowIndependent() method.
                helpSF.ShowIndependent();
                bottomAppBar.IsOpen = false;
            }
        }
    }
    
    
    
  • App.xaml.cs
    
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.ApplicationModel;
    using Windows.ApplicationModel.Activation;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using Windows.UI.ApplicationSettings;
    
    // The Blank Application template is documented at http://go.microsoft.com/fwlink/p/?LinkID=234227
    
    namespace AppHelpExample
    {
        /// <summary>
        /// Provides application-specific behavior to supplement the default Application class.
        /// </summary>
        sealed partial class App : Application
        {
            /// <summary>
            /// Initializes the singleton application object.  This is the first line of authored code
            /// executed, and as such is the logical equivalent of main() or WinMain().
            /// </summary>
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
            }
    
            /// <summary>
            /// Invoked when the application is launched normally by the end user.  Other entry points
            /// will be used such as when the application is launched to open a specific file.
            /// </summary>
            /// <param name="e">Details about the launch request and process.</param>
            protected override void OnLaunched(LaunchActivatedEventArgs e)
            {
    
    #if DEBUG
                if (System.Diagnostics.Debugger.IsAttached)
                {
                    this.DebugSettings.EnableFrameRateCounter = true;
                }
    #endif
    
                Frame rootFrame = Window.Current.Content as Frame;
    
                // Do not repeat app initialization when the Window already has content,
                // just ensure that the window is active
                if (rootFrame == null)
                {
                    // Create a Frame to act as the navigation context and navigate to the first page
                    rootFrame = new Frame();
                    // Set the default language
                    rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];
    
                    rootFrame.NavigationFailed += OnNavigationFailed;
    
                    if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                    {
                        //TODO: Load state from previously suspended application
                    }
    
                    // Place the frame in the current Window
                    Window.Current.Content = rootFrame;
                }
    
                if (rootFrame.Content == null)
                {
                    // When the navigation stack isn't restored navigate to the first page,
                    // configuring the new page by passing required information as a navigation
                    // parameter
                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
                }
                // Ensure the current window is active
                Window.Current.Activate();
            }
    
            /// <summary>
            /// Invoked when Navigation to a certain page fails
            /// </summary>
            /// <param name="sender">The Frame which failed navigation</param>
            /// <param name="e">Details about the navigation failure</param>
            void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
            {
                throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
            }
    
            /// <summary>
            /// Invoked when application execution is being suspended.  Application state is saved
            /// without knowing whether the application will be terminated or resumed with the contents
            /// of memory still intact.
            /// </summary>
            /// <param name="sender">The source of the suspend request.</param>
            /// <param name="e">Details about the suspend request.</param>
            private void OnSuspending(object sender, SuspendingEventArgs e)
            {
                var deferral = e.SuspendingOperation.GetDeferral();
                //TODO: Save application state and stop any background activity
                deferral.Complete();
            }
    
            protected override void OnWindowCreated(WindowCreatedEventArgs args)
            {
                SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;
            }
    
            private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
            {
    
                args.Request.ApplicationCommands.Add(new SettingsCommand(
                    "Help", "Help", (handler) => ShowHelpSettingsFlyout()));
            }
    
            public void ShowHelpSettingsFlyout()
            {
                HelpSettingsFlyout helpSF = new HelpSettingsFlyout();
                helpSF.Show();
            }
        }
    }
    
    
    

Récapitulatif

Vous venez d’ajouter un menu volant Aide à votre application à l’aide du contrôle SettingsFlyout et de permettre aux utilisateurs d’accéder à l’aide depuis une barre d’application inférieure et le volet Paramètres. Voulez-vous ajouter des fonctionnalités supplémentaires à l’interface utilisateur de votre application ? Notre page Interface utilisateur des applications du Windows Store, de A à Z (XAML) contient des liens vers des didacticiels de démarrage rapide et des recommandations en matière de contrôles, dispositions et fonctionnalités de recherche et de partage que vous pouvez utiliser dans votre application.

Rubriques associées

Démarrage rapide : ajout d’une aide à l’application (applications du Windows Store en JavaScript et HTML)
Référence
SettingsFlyout class
SettingsFlyout.ShowIndependent method
SettingsFlyout.Show method
SettingsFlyout.IconSource property
Application.OnWindowCreated method
SettingsPane.CommandsRequested event
SettingsPane.Show method
AppBar class
Exemples
Exemple de paramètres d’application
Recommandations
Guidelines for app help
Recommandations en matière de paramètres de l’application
Guidelines for flyouts
Guidelines and checklist for app bars
Vue d’ensemble conceptuelle
Liste de contrôles (applications du Windows Store en C#/VB/C++ et XAML)
Icônes
Fonctionnalités d’application de A à Z
Interface utilisateur des applications du Windows Store, de A à Z (XAML)

 

 

Afficher:
© 2015 Microsoft