Language: HTML | XAML

快速入門:新增應用程式說明 (使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式)

使用 XAML SettingsFlyout 控制項,為應用程式新增說明。

下列步驟將為您逐步解說如何使用 SettingsFlyout 控制項,將 [說明] 飛出視窗新增到 Windows 市集應用程式的程序。使用這個 XAML 控制項可以輕易地將說明命令新增到應用程式的 [設定] 窗格,並支援一致的飛出視窗設計。

在這個快速入門中,您會將新的 SettingsFlyout 新增到現有的 Microsoft Visual Studio 2013 專案、了解如何修改預設內容和設定預設內容的樣式,以及為使用者建立兩種方式來存取您的 [說明] 飛出視窗:從底部應用程式列上的 [說明] 按鈕存取,以及從應用程式的 [設定] 窗格存取。

使用 Javascript 和 HTML 撰寫應用程式?請參閱快速入門:新增應用程式說明 (使用 Javascript 和 HTML 的 Windows 市集應用程式)

先決條件

若要下載 Visual Studio 2013 和 Windows 8.1,請參閱取得工具

這個快速入門假設您想要將說明新增到使用 C#、Visual Basic 或 C++ 的現有 Windows 市集應用程式專案。如果您尚未建立應用程式,請選擇您慣用的語言,並查看我們的逐步指導方針:

將 SettingsFlyout 新增至您的應用程式

遵循這些步驟,為您現有的 Windows 市集應用程式建立 SettingsFlyout。預設的 SettingsFlyout 控制項有一個包含標題、上一頁按鈕及標誌圖示的標頭區段,還有一個內容區段。

  • 開啟您在 Visual Studio 2013 中建立的 Windows 市集應用程式專案。
  • 選取 [專案] 功能表,然後按一下 [加入新項目]。隨即出現 [加入新項目] 對話方塊 (您也可以使用快速鍵 Ctrl+Shift+A 來開啟這個對話方塊)。
  • 在 [Visual C#] 窗格中,選取 [Windows 市集]
  • 在中央窗格向下捲動,然後選取 [設定飛出視窗]
  • 在 [名稱] 文字方塊中,輸入 SettingsFlyout 的名稱。這個範例使用 HelpSettingsFlyout 的名稱。Visual Studio 2013 會建立 HelpSettingsFlyout.xaml 檔案和對應的 HelpSettingsFlyout.xaml.cs 檔案。這些 HelpSettingsFlyout 檔案現在會和您其餘的專案檔案一同出現在 [方案總管] 中。

設定飛出視窗的樣式和新增說明內容

使用您應用程式特定的說明取代預設的 SettingsFlyout 內容,然後設定飛出視窗的樣式,以符合您的設計配置。您可以使用下列方式修改 SettingsFlyout

  • 使用 Title 屬性變更飛出視窗的顯示標題。根據預設,飛出視窗頂端顯示的標題與您將 SettingsFlyout 新增到專案時所選擇的名稱相符。
  • 請考慮調整飛出視窗的寬度。SettingsFlyout 的預設寬度是窄格式 (346px)。
  • 藉由重設或移除 IconSource 屬性,顯示不同的標誌圖示或移除標誌圖示。
  • 使用 [內容] 窗格變更色彩配置或字型。如果您在螢幕右側的 [方案總管] 索引標籤旁邊沒有看到這個窗格,請開啟 [檢視] 功能表,然後按一下 [屬性];或按 Ctrl+W+P 予以開啟。
  • 視需要新增內容區段。 如果您的應用程式有線上支援資源,請考慮從您的 [說明] 飛出視窗連結這些資源。

請記住,您無法移除 SettingsFlyout 的上一頁按鈕。此外,SettingsFlyout 一律會調整為符合畫面的高度。

下列程式碼除了標題不同、包含其他文字區塊,以及包括一個超連結按鈕之外,與預設的 SettingsFlyout 幾乎完全相同。 您可以將這段程式碼新增到 HelpSettingsFlyout.xaml 檔案。

重要:這個 SettingsFlyout 是在名為 AppHelpExample 的專案中所建立。為了讓這段程式碼可以在您的專案中運作,請使用 x:Class="<您的專案名稱>.HelpSettingsFlyout" 取代 x:Class="AppHelpExample.HelpSettingsFlyout",並以 xmlns:local="using:<您的專案名稱>" 取代 xmlns:local="using:AppHelpExample"。


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


新增含有說明按鈕的底部應用程式列

在上一個步驟中,您建立了功能完整的 [說明] 飛出視窗。現在,讓使用者可以按一下應用程式列按鈕來開啟您新的 [說明] 飛出視窗。下列程式碼片段會建立含有 [說明] 按鈕的底部應用程式列。這個應用程式列會在使用者以滑鼠右鍵按一下頁面的任一處或從畫面底部撥動時出現。如果使用者按一下 [說明] 按鈕,即會叫用 HelpButton_Click 事件。

若要在應用程式的第一頁建立底部應用程式列,請開啟專案的 MainPage.xaml 檔案,然後新增下列 XAML 程式碼:


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


下一段程式碼會處理您剛新增的 HelpButton_Click 事件。 ShowIndependent 方法會開啟 [說明] 飛出視窗,並在使用者關閉飛出視窗時返回應用程式頁。這個程式碼片段的最後一行會在 [說明] 飛出視窗開啟時,隱藏底部應用程式列。

將下列 C# 程式碼新增到 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;
        }

當您新增這兩個程式碼片段之後,請建置並執行您的應用程式。使用滑鼠右鍵按一下應用程式的登陸頁面或從該頁面底部撥動,應該會從畫面底部出現含有 [說明] 按鈕的應用程式列。按一下該按鈕,[說明] 飛出視窗將會從畫面右側展開,如下列螢幕擷取畫面所示。顯示從畫面右側展開窄格式 [說明] 飛出視窗的螢幕擷取畫面

在應用程式的設定窗格中新增說明

當您使用 SettingsFlyout 控制項建立 [說明] 飛出視窗時,可以輕易地將說明新增到應用程式的 [設定] 窗格。當使用者從畫面右邊緣撥動並選取設定常用鍵,或者按 Windows+I 時,應用程式的 [設定] 窗格即會出現。如需應用程式設定的詳細資訊,請瀏覽我們的 Guidelines for app settings。如果您想了解常用鍵,請參閱這個常用鍵概觀。

首先,將 ApplicationSettings 命名空間新增到您應用程式的 App.xaml.cs 頁面:


	using Windows.UI.ApplicationSettings;

在下列程式碼中,OnWindowCreated 方法會在您的應用程式啟動時準備應用程式的 [設定] 窗格。OnCommandsRequested 會將「說明」命令新增到 [設定] 窗格。SettingsCommand 會設定自訂設定的 LabelIdInvoked 屬性。將 Label 屬性設為您想要讓使用者在 [設定] 窗格中看見的命令名稱。Invoked 屬性會針對使用者從 [設定] 窗格中選取命令時引發的事件設定處理常式。這個範例會新增名為 ShowHelpSettingsFlyout 的事件處理常式。這個事件處理常式會在使用者按一下 [設定] 窗格中的 [說明] 時建立並開啟飛出視窗。

若要將說明新增到應用程式的 [設定] 窗格,請將下列 C# 程式碼新增到 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();
        }


將其他自訂設定新增到應用程式 [設定] 窗格的程序與本節所述的步驟非常類似。如果您想要建立其他設定,並在應用程式的 [設定] 窗格中顯示它們,請參閱 Quickstart: Add app settings (Windows Store apps using C#/VB/C++)

完整程式碼範例

以下為這個快速入門中所修改的四個頁面的完整複本。

  • HelpSettingsFlyout.xaml:為了讓這段程式碼可以在您的專案中運作,請使用 x:Class="<您的專案名稱>.HelpSettingsFlyout" 取代 x:Class="AppHelpExample.HelpSettingsFlyout",並以 xmlns:local="using:<您的專案名稱>" 取代 xmlns:local="using:AppHelpExample"。
    
    <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();
            }
        }
    }
    
    
    

摘要

您現在已經使用 SettingsFlyout 控制項,將 [說明] 飛出視窗新增到您的應用程式,並且讓使用者能夠從底部應用程式列和 [設定] 窗格存取說明。想要將更多功能新增到應用程式的 UI?我們的 Windows 市集應用程式 UI,從開始到完成 (XAML) 頁面有一些連結,提供您可以在應用程式中使用的控制項、配置及搜尋和共用功能的快速入門與指導方針。

相關主題

快速入門:新增應用程式說明 (使用 Javascript 和 HTML 的 Windows 市集應用程式)
參考
SettingsFlyout class
SettingsFlyout.ShowIndependent method
SettingsFlyout.Show method
SettingsFlyout.IconSource property
Application.OnWindowCreated method
SettingsPane.CommandsRequested event
SettingsPane.Show method
AppBar class
範例
應用程式設定範例
指導方針
Guidelines for app help
應用程式設定的指導方針
Guidelines for flyouts
Guidelines and checklist for app bars
概念性概觀
控制項清單 (使用 C#/VB/C++ 和 XAML 的 Windows 市集應用程式)
常用鍵
應用程式功能,從開始到完成
Windows 市集應用程式 UI,從開始到完成 (XAML)

 

 

顯示:
© 2015 Microsoft