언어: 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="AppHelpExample.HelpSettingsFlyout"을 x:Class="<프로젝트 이름>.HelpSettingsFlyout"으로 바꾸고 xmlns:local="using:AppHelpExample"을 xmlns:local="using:<프로젝트 이름>"으로 바꿉니다.


<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는 사용자 지정 설정의 Label, Id, Invoked 속성을 설정합니다. 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="AppHelpExample.HelpSettingsFlyout"을 x:Class="<프로젝트 이름>.HelpSettingsFlyout"으로 바꾸고 xmlns:local="using:AppHelpExample"을 xmlns:local="using:<프로젝트 이름>"으로 바꿉니다.
    
    <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