Guia de início rápido: adicionar ajuda ao aplicativo
Idioma: HTML | XAML

Guia de início rápido: adicionar a ajuda do aplicativo (aplicativos da Windows Store em C++, C# ou Visual Basic)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Adicione a ajuda ao seu aplicativo usando o controle de SettingsFlyout para XAML.

As seguintes etapas lhe fornecem uma explicação detalhada sobre o processo para adicionar o submenu Ajuda ao aplicativo da Windows Store usando o controle de SettingsFlyout. O uso do controle para XAML facilita a adição do comando Ajuda ao painel de Configurações do seu aplicativo e dá suporte para um design de submenu consistente.

Neste guia de início rápido, você adicionará um novo SettingsFlyout ao projeto do Microsoft Visual Studio 2013 existente, saiba como modificar e nomear o conteúdo padrão, e crie duas formas para que os usuários acessem seu submenu Ajuda: no botão Ajuda na barra de aplicativos na parte inferior e no painel de Configurações do seu aplicativo.

Gravando aplicativos em Javascript e HTML? Veja Guia de início rápido: adicione a ajuda do aplicativo usando Javascript e HTML).

Pré-requisitos

Para baixar o Visual Studio 2013 e o Windows 8.1, veja Obter as ferramentas.

Este guia de início rápido pressupõe que você deseja adicionar a ajuda a um projeto de aplicativo existente da Windows Store, em C#, Visual Basic ou C++. Se você não criou um aplicativo ainda, escolha seu idioma preferido e confira nossas orientações passo a passo:

Adicionar um SettingsFlyout ao seu aplicativo.

Siga estas etapas para criar um SettingsFlyout para o seu aplicativo existente da Windows Store. O controle padrão SettingsFlyout possui uma seção de cabeçalho com um título, botão voltar e ícone de logotipo, bem como uma seção de conteúdo.

  • Abra o projeto do aplicativo da Windows Store que você criou no Visual Studio 2013.
  • Selecione o menu Projeto e clique em Adicionar Novo Item. A caixa de diálogo Adicionar Novo Item é aberta. (Você também pode usar o atalho Ctrl+Shift+A para abrir a caixa de diálogo).
  • No painel Visual C#, selecione Windows Store.
  • No painel central, role e selecione Submenu Configurações.
  • Na caixa de texto Nome, insira um nome para o seu SettingsFlyout. Esse exemplo usa o nome HelpSettingsFlyout. O Visual Studio 2013 cria um arquivo HelpSettingsFlyout.xaml e um arquivo correspondente HelpSettingsFlyout.xaml.cs. Os arquivos HelpSettingsFlyout aparecem agora com os demais arquivos do projeto no Gerenciador de Soluções.

Nomeie o submenu e adicione o conteúdo de ajuda

Substitua o conteúdo padrão SettingsFlyout com a ajuda que seja específica para o seu aplicativo, em seguida, nomeie o submenu de modo que corresponda com o seu esquema de design. Você pode modificar um SettingsFlyout conforme descrito a seguir:

  • Altere o título de exibição do seu submenu usando a propriedade Title. Por padrão, o título apresentado na parte superior do submenu corresponderá ao nome que você selecionou para o SettingsFlyout quando você o adicionou ao seu projeto.
  • Considere o ajuste da largura do submenu. A largura padrão para um SettingsFlyout é estreita (346px).
  • Exiba um ícone de logotipo diferente ou remova o ícone de logotipo, reiniciando ou removendo a propriedade de IconSource.
  • Altere o esquema de cores ou as fontes no painel Propriedades. Se ele não estiver visível próximo à guia Gerenciador de Soluções no lado direito da tela, abra o menu Exibir e clique em Propriedades, ou pressione Ctrl+W+P para abri-lo.
  • Adicione as seções de conteúdo se necessário. Se o seu aplicativo tiver um recurso de suporte online, considere o link do submenu Ajuda.

Lembre-se de que não é possível remover o botão voltar em um SettingsFlyout. Um SettingsFlyout também é sempre ajustado para corresponder à altura da tela.

O código abaixo é quase idêntico ao SettingsFlyout padrão, exceto que possui um título diferente, contém um bloco de texto adicional e inclui um botão de hyperlink. Você pode adicionar esse código ao arquivo HelpSettingsFlyout.xaml.

Importante: Esse SettingsFlyout foi criado em um projeto denominado AppHelpExample. Para que esse código funcione no seu projeto, substitua x:Class="AppHelpExample.HelpSettingsFlyout" por x:Class="<name of your project>.HelpSettingsFlyout" e xmlns:local="using:AppHelpExample" para xmlns:local="using:<name of your project>".


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


Adicione uma barra de aplicativos na parte inferior com um botão Ajuda

Na etapa anterior, você criou um submenu Ajuda totalmente funcional. Agora, permita que os usuários abram seu novo submenu Ajuda, clicando no botão da barra de aplicativos. O trecho de código abaixo cria uma barra de aplicativos na parte inferior com um botão Ajuda. Essa barra de aplicativos aparece quando um usuário clica com o botão direito do mouse em qualquer lugar na página ou passa o dedo na parte inferior da tela. Se um usuário clicar no botão Ajuda, o evento HelpButton_Click é invocado.

Para criar uma barra de aplicativos na parte inferior na primeira página do seu aplicativo, abra o arquivo MainPage.xaml do seu projeto e adicione o seguinte código XAML:


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


O próximo pedaço de código trata do evento HelpButton_Click que você adicionou. O método ShowIndependent abre o submenu e retorna para a página do aplicativo quando um usuário fecha o submenu. A última linha desse trecho de código oculta a barra de aplicativos na parte inferior da tela quando o submenu Ajuda é aberto.

Adicione o seguinte código C# a 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;
        }

Após adicionar esses dois trechos de códigos, crie e execute seu aplicativo. Clique com o botão direito do mouse ou passe o dedo na parte inferior da página de aterrissagem do aplicativo e uma barra de aplicativos com um botão Ajuda deve aparecer na parte inferior da tela. Clique no botão e o submenu Ajuda se estenderá no lado direito da tela, conforme demonstrado na captura de tela abaixo. Captura de tela mostrando um submenu Ajuda estreito no lado direito da tela

Adicione a Ajuda ao painel de Configurações do seu aplicativo

Ao usar o controle de SettingsFlyout para criar um submenu Ajuda, você pode adicionar facilmente a Ajuda no painel de Configurações do seu aplicativo. Um painel de Configurações do aplicativo aparece quando um usuário passa o dedo na borda direita da tela e seleciona o botão Configurações ou pressiona Windows+I. Para obter mais informações sobre as configurações do aplicativo, leia nossas Guidelines for app settings. Se você está curioso sobre os botões, veja a visão geral Botões.

Primeiro, adicione o namespace ApplicationSettings à página App.xaml.cs do seu aplicativo:


	using Windows.UI.ApplicationSettings;

No código abaixo, o método OnWindowCreated prepara o painel de Configurações do aplicativo quando o seu aplicativo é iniciado. OnCommandsRequested adiciona o comando "Ajuda" ao painel de Configurações. SettingsCommand define as propriedades de Label, Id, e Invoked das configurações personalizadas. Defina a propriedade de Label cujo nome de comando você gostaria que os usuários vissem no painel de Configurações. A propriedade Invoked define o manipulador do evento gerado quando um usuário seleciona um comando do painel de Configurações. Esse exemplo adiciona um manipulador de eventos denominado ShowHelpSettingsFlyout. O manipulador de eventos cria e abre o submenu quando o usuário clica em "Ajuda" no painel de Configurações.

Para adicionar a Ajuda ao painel de Configurações do seu aplicativo, adicione o seguinte código C# a 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();
        }


O processo para adicionar outras configurações personalizadas ao painel de Configurações do seu aplicativo é muito similar às etapas descritas nessa seção. Veja Quickstart: Add app settings (Windows Store apps using C#/VB/C++) se você deseja criar configurações adicionais e exibi-las no painel de Configurações do seu aplicativo.

Exemplos de código completos

Veja as cópias completas das quatro páginas modificadas nesse quia de início rápido.

  • HelpSettingsFlyout.xaml: Para que esse código funcione no seu projeto, substitua x:Class="AppHelpExample.HelpSettingsFlyout" por x:Class="<name of your project>.HelpSettingsFlyout" e xmlns:local="using:AppHelpExample" para xmlns:local="using:<name of your project>".
    
    <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();
            }
        }
    }
    
    
    

Resumo

Você adicionou agora um submenu Ajuda ao seu aplicativo usando o controle SettingsFlyout, e os usuários podem acessar a Ajuda na barra de aplicativos inferior e do painel de Configurações.

Tópicos relacionados

Referência
SettingsFlyout class
SettingsFlyout.ShowIndependent method
SettingsFlyout.Show method
SettingsFlyout.IconSource property
Application.OnWindowCreated method
SettingsPane.CommandsRequested event
SettingsPane.Show method
AppBar class
Exemplos
Amostra de configurações de aplicativo
Diretrizes
Guidelines for app help
Diretrizes de configuração de aplicativos
Guidelines for flyouts
Visão geral conceitual
Lista de controles (aplicativos da Windows Store em C#/VB/C++ e XAML)
Botões

 

 

Mostrar:
© 2016 Microsoft