Windows Dev Center

Linguaggio: HTML | XAML

Guida introduttiva: Aggiunta della Guida dell'app (app di Windows Store scritte in C++, C# o Visual Basic)

Aggiungere la Guida a un'app tramite il controllo SettingsFlyout XAML.

I passaggi seguenti illustrano come aggiungere un riquadro a comparsa Help in un'app di Windows Store tramite il controllo SettingsFlyout. Questo controllo XAML permette di aggiungere facilmente un comando della Guida nel riquadro delle impostazioni di un'app e supporta una struttura di riquadri a comparsa uniforme.

In questa guida introduttiva aggiungerai un nuovo controllo SettingsFlyout a un progetto di Microsoft Visual Studio 2013 esistente, imparerai come modificare il contenuto predefinito e applicarvi uno stile e creerai due modi di accesso al riquadro a comparsa Help: da un pulsante Help su una barra inferiore dell'app e dal riquadro delle impostazioni dell'app.

Vuoi scrivere app con Javascript e HTML? Vedi Guida introduttiva: Aggiunta della Guida dell'app (app di Windows Store in JavaScript e HTML).

Prerequisiti

Per il download di Visual Studio 2013 e Windows 8.1, vedi Scarica gli strumenti.

Questa guida introduttiva si basa sul presupposto che la Guida venga aggiunta a un progetto di app di Windows Store tramite C#, Visual Basic o C++. Se non hai ancora creato un'app, scegli il linguaggio preferito e leggi le istruzioni dettagliate:

Aggiungere un controllo SettingsFlyout a un'app

Segui questi passaggi per creare un controllo SettingsFlyout per un'app di Windows Store esistente. Il controllo SettingsFlyout predefinito include una sezione intestazione con un titolo, un pulsante Indietro e un'icona del logo, nonché una sezione per il contenuto.

  • Apri il progetto dell'app di Windows Store creato in Visual Studio 2013.
  • Scegli Aggiungi nuovo elemento dal menu Progetto. Viene visualizzata una finestra di dialogo Aggiungi nuovo elemento (puoi anche usare i tasti di scelta rapida CTRL+MAIUSC+A per aprire questa finestra di dialogo).
  • Nel riquadro Visual C# seleziona Windows Store.
  • Dal riquadro centrale scorri verso il basso e seleziona Riquadro a comparsa impostazioni.
  • Nella casella di testo Nome immetti un nome per il controllo SettingsFlyout. In questo esempio viene usato il nome HelpSettingsFlyout. Visual Studio 2013 crea un file HelpSettingsFlyout.xaml e un file HelpSettingsFlyout.xaml.cs corrispondente. Questi file HelpSettingsFlyout ora vengono visualizzati con il resto dei file del progetto in Esplora soluzioni.

Applicare uno stile al riquadro a comparsa e aggiungere il contenuto della Guida

Sostituisci il contenuto del controllo SettingsFlyout predefinito con la Guida specifica dell'app, quindi applica al riquadro a comparsa uno stile corrispondente allo schema della struttura. Puoi modificare un controllo SettingsFlyout nei modi seguenti:

  • Cambia il titolo visualizzato del riquadro a comparsa usando la proprietà Title. Per impostazione predefinita, il titolo visualizzato nella parte superiore del riquadro a comparsa corrisponde al nome scelto per il controllo SettingsFlyout quando è stato aggiunto al progetto.
  • Valuta se modificare la larghezza del riquadro a comparsa. La larghezza predefinita di un controllo SettingsFlyout è ridotta (346 px).
  • Visualizza un'icona del logo diversa o rimuovila reimpostando o rimuovendo la proprietà IconSource.
  • Cambia la combinazione di colori o i caratteri usando il riquadro Proprietà. Se questo riquadro non è visibile accanto alla scheda Esplora soluzioni a destra dello schermo, scegli Proprietà dal menu Visualizza o premi CTRL+W+P per aprirlo.
  • Aggiungi sezioni di contenuto a seconda delle esigenze. Se l'app dispone di una risorsa di supporto online, valuta la possibilità di collegarti a tale risorsa dal riquadro a comparsa Help.

Considera che non è possibile rimuovere il pulsante Indietro in un controllo SettingsFlyout. Inoltre, un controllo SettingsFlyout si adatta sempre all'altezza dello schermo.

Il codice riportato di seguito è quasi identico a un controllo SettingsFlyout predefinito. Si differenza per il titolo, per un blocco di testo aggiuntivo e per la presenza di un pulsante di collegamento ipertestuale. Puoi aggiungere questo codice al file HelpSettingsFlyout.xaml.

Importante: questo controllo SettingsFlyout è stato creato in un progetto denominato AppHelpExample. Per il corretto funzionamento di questo codice nel progetto, sostituisci x:Class="AppHelpExample.HelpSettingsFlyout" con x:Class="<nome del progetto>.HelpSettingsFlyout" e xmlns:local="using:AppHelpExample" con xmlns:local="using:<nome del progetto>".


<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>


Aggiungere una barra inferiore dell'app con un pulsante Help

Nel passaggio precedente hai creato un riquadro a comparsa Help perfettamente funzionante. Ora permetti agli utenti di aprire il nuovo riquadro a comparsa Help facendo clic su un pulsante di una barra dell'app. Il frammento di codice riportato di seguito crea una barra inferiore dell'app con un pulsante Help. Questa barra dell'app viene visualizzata quando un utente fa clic con il pulsante destro del mouse in un punto qualsiasi della pagina o scorre rapidamente dalla parte inferiore dello schermo. Se un utente fa clic sul pulsante Help, viene richiamato l'evento HelpButton_Click.

Per creare una barra inferiore dell'app nella prima pagina dell'app, apri il file MainPage.xaml del progetto e aggiungi il codice XAML seguente:


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


La parte successiva di codice gestisce l'evento HelpButton_Click appena aggiunto. Il metodo ShowIndependent apre il riquadro a comparsa Help e torna nella pagina dell'app quando un utente chiude il riquadro a comparsa. L'ultima riga di questo frammento di codice nasconde la barra inferiore dell'app dallo schermo quando viene aperto il riquadro a comparsa Help.

Aggiungi il codice C# seguente nel file 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;
        }

Dopo aver aggiunto questi due frammenti di codice, compila ed esegui l'app. Fai clic con il pulsante destro del mouse o scorri rapidamente dalla parte inferiore della pagina di destinazione dell'app. Nella parte inferiore dello schermo dovrebbe visualizzarsi una barra dell'app con un pulsante Help. Fai clic sul pulsante e il riquadro a comparsa Help si estenderà dal lato destro dello schermo, come mostrato nella cattura di schermata riportata di seguito. Cattura di schermata che mostra un riquadro a comparsa Help stretto che si estende dal lato destro dello schermo

Aggiungere la Guida al riquadro delle impostazioni dell'app

Quando usi il controllo SettingsFlyout per creare un riquadro a comparsa Help, puoi aggiungere facilmente la Guida al riquadro delle impostazioni dell'app. Il riquadro delle impostazioni di un'app viene visualizzato quando un utente scorre rapidamente dal bordo destro dello schermo e seleziona l'accesso alle impostazioni o preme WINDOWS+I. Per altre informazioni sulle impostazioni delle app, leggi Guidelines for app settings. Se sei curioso a proposito dei pulsanti di accesso rapido, vedi questa panoramica sugli Accessi.

Aggiungi innanzitutto lo spazio dei nomi ApplicationSettings alla pagina App.xaml.cs dell'app:


	using Windows.UI.ApplicationSettings;

Nel codice seguente il metodo OnWindowCreated prepara il riquadro Impostazioni dell'app quando questa si avvia. OnCommandsRequested aggiunge un comando "Help" al riquadro delle impostazioni. SettingsCommand imposta le proprietà Label, Id e Invoked dell'impostazione personalizzata. Imposta la proprietà Label sul nome del comando che deve essere visualizzato dagli utenti nel riquadro delle impostazioni. La proprietà Invoked imposta il gestore dell'evento generato quando un utente seleziona un comando dal riquadro delle impostazioni. Questo esempio aggiunge un gestore eventi denominato ShowHelpSettingsFlyout. Il gestore eventi crea e apre il riquadro a comparsa quando l'utente fa clic su “Help” nel riquadro delle impostazioni.

Per aggiungere la Guida al riquadro delle impostazioni dell'app, aggiungi il codice C# seguente nel file 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();
        }


Il processo per aggiungere altre impostazioni personalizzate nel riquadro delle impostazioni dell'app è molto simile ai passaggi descritti in questa sezione. Vedi Quickstart: Add app settings (Windows Store apps using C#/VB/C++) per creare ulteriori impostazioni e visualizzarle nel riquadro delle impostazioni dell'app.

Esempi di codice completi

Queste sono copie complete delle quattro pagine modificate in questa guida introduttiva.

  • HelpSettingsFlyout.xaml: per il corretto funzionamento di questo codice nel progetto, sostituisci x:Class="AppHelpExample.HelpSettingsFlyout" con x:Class="<nome del progetto>.HelpSettingsFlyout" e xmlns:local="using:AppHelpExample" con xmlns:local="using:<nome del progetto>".
    
    <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();
            }
        }
    }
    
    
    

Riepilogo

Hai appena aggiunto un riquadro a comparsa Help a un'app usando il controllo SettingsFlyout e hai consentito agli utenti di accedere alla Guida da una barra inferiore dell'app e dal riquadro delle impostazioni. Vuoi aggiungere altre funzionalità all'interfaccia utente delle app? Nella pagina Interfaccia utente delle app di Windows Store, dall'inizio alla fine (XAML) sono presenti collegamenti a guide introduttive e linee guida per i controlli, i layout e le funzionalità di ricerca e condivisione che puoi usare in un'app.

Argomenti correlati

Guida introduttiva: Aggiunta della Guida dell'app (app di Windows Store in JavaScript e HTML)
Riferimento
SettingsFlyout class
SettingsFlyout.ShowIndependent method
SettingsFlyout.Show method
SettingsFlyout.IconSource property
Application.OnWindowCreated method
SettingsPane.CommandsRequested event
SettingsPane.Show method
AppBar class
Esempi
Esempio di impostazioni dell'app
Linee guida
Guidelines for app help
Linee guida per le impostazioni dell'app
Guidelines for flyouts
Guidelines and checklist for app bars
Panoramica concettuale
Elenco dei controlli (app di Windows Store in C#/VB/C++ e XAML)
Accessi
Funzionalità delle app dall'inizio alla fine
Interfaccia utente delle app di Windows Store, dall'inizio alla fine (XAML)

 

 

Mostra:
© 2015 Microsoft