빠른 시작: 앱 설정 추가
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장
언어: HTML | XAML

빠른 시작: 앱 설정 추가(XAML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

XAML SettingsFlyout 컨트롤을 사용하여 앱의 설정 창에 사용자 지정 설정을 추가합니다.

모든 Windows 스토어 앱은 자동으로 설정 계약에 참여합니다. 앱 설정을 수정하지 않는 경우에도 사용자가 앱 내에서 설정 참 메뉴를 클릭하고 기본 설정 창을 표시할 수 있습니다. 시스템에서 제공하는 이 기본 설정 창에는 사용 권한 링크와 6개 시스템 설정(볼륨, 네트워크 정보, 전원 포함)이 있습니다. 그러나 SettingsFlyout 컨트롤을 통해 고유한 앱 설정을 만들고 설정 창에서 이러한 새 사용자 지정 설정에 연결하여 이 창을 사용자 지정할 수 있습니다.

이 빠른 시작에서는 새로운 SettingsFlyout을 만들고, 앱 특정 콘텐츠 및 컨트롤을 추가한 다음 새로운 SettingsCommandSettingsPane.CommandsRequested 이벤트를 사용하여 새 설정을 설정 창에 통합하는 방법을 보여 줍니다. 이 빠른 시작이 끝나면 사용자가 앱의 설정 창 내에서 사용자 지정 설정을 클릭하고 사용자 지정 설정 플라이아웃을 표시할 수 있습니다. 다음 단계에 제공된 코드를 복사하는 경우 사용자 지정 플라이아웃이 다음과 같이 표시됩니다.

이 빠른 시작에서 만든 사용자 지정 SettingsFlyout의 스크린샷

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  Windows 스토어 앱 UI 전체 프로세스

Javascript 및 HTML로 앱을 작성 중이세요? Quickstart: Adding app settings using Javascript를 참조하세요.

사전 요구 사항

1단계: 앱에 대한 새로운 SettingsFlyout 만들기

기존 Windows 스토어 앱에 SettingsFlyout을 추가하려면 다음 단계를 따릅니다. 기본 SettingsFlyout 컨트롤에는 제목, 뒤로 단추, 로고 아이콘이 포함된 헤더 섹션과 콘텐츠 섹션이 있습니다.

  • Visual Studio 2013에서 만든 Windows 스토어 앱 프로젝트를 엽니다.
  • 프로젝트 메뉴를 선택하고 새 항목 추가를 클릭합니다. 새 항목 추가 대화 상자가 나타납니다. Ctrl+Shift+A 바로 가기를 사용하여 이 대화 상자를 열 수도 있습니다.
  • Visual C# 창에서 Windows 스토어를 선택합니다.
  • 가운데 창에서 아래로 스크롤하여 설정 플라이아웃을 선택합니다.
  • 이름 입력란에 SettingsFlyout의 이름을 입력합니다. 이 예제에서는 이름으로 CustomSetting을 사용합니다. Visual Studio 2013에서 CustomSetting.xaml 파일과 해당 CustomSetting.xaml.cs 파일을 만듭니다. 이제 이러한 CustomSetting 파일이 나머지 프로젝트 파일과 함께 솔루션 탐색기에 표시됩니다.

2단계: 사용자 지정 SettingsFlyout에 콘텐츠 및 컨트롤 추가

이전 단계에서 SettingsFlyout을 추가한 후 CustomSetting.xaml 파일을 엽니다. 기본 콘텐츠를 앱과 관련된 정보로 바꾼 다음 디자인 구성표와 일치하도록 플라이아웃 스타일을 지정합니다. 다음과 같은 방법으로 SettingsFlyout을 수정할 수 있습니다.

  • Title 속성을 사용하여 플라이아웃의 표시 제목을 변경합니다. 기본적으로 플라이아웃 맨 위에 표시되는 제목은 프로젝트에 추가할 때 SettingsFlyout에 대해 선택한 이름과 일치합니다.
  • 플라이아웃의 너비를 조정하는 것이 좋습니다. SettingsFlyout의 기본 너비는 좁고(346px) SettingsPane의 너비와 일치합니다.
  • IconSource 속성을 다시 설정하거나 제거하여 로고 아이콘을 변경하거나 제거합니다.
  • 색 구성표 또는 글꼴을 수정합니다. 속성 창을 사용합니다. 이 창이 화면 오른쪽에 있는 솔루션 탐색기 탭 옆에 표시되지 않으면 보기 메뉴를 열고 속성을 클릭하거나 Ctrl+W+P를 눌러 엽니다.
  • 원하는 경우 컨트롤을 추가합니다. 설정의 목적에 따라 Windows 스토어 앱에 사용할 수 있는 표준 XAML 컨트롤을 활용하는 것이 좋습니다. 표준 XAML 컨트롤에 대한 자세한 내용은 컨트롤 목록 또는 Quickstart: Adding controls and content를 참조하세요.
  • 필요에 따라 콘텐츠 섹션을 추가합니다.

SettingsFlyout에서 뒤로 단추를 제거할 수는 없습니다. 또한 SettingsFlyout은 항상 화면의 높이에 맞게 조정됩니다.

자주 사용되는 일부 컨트롤을 구현하는 방법을 확인하려는 경우 다음 XAML을 CustomSetting.xaml 파일에 복사합니다. 이 코드는 기본 SettingsFlyout 콘텐츠를 ToggleSwitch, Button, ComboBox, HyperlinkButton, TextBox RadioButton 예제로 바꿉니다.

중요: 새로운 SettingsFlyout을 프로젝트에 추가하면 자동으로 생성된 클래스 및 네임스페이스 선언에 해당 프로젝트의 이름이 포함됩니다. 아래 코드 조각은 AppSettingsExample 프로젝트에서 만든 것이므로 다음 줄에서 "AppSettingsExample"을 해당 프로젝트의 이름으로 바꾸지 않으면 이 코드는 빌드되지 않습니다.

  • x:Class="AppSettingsExample.CustomSetting"을 x:Class="<name of your project>.CustomSetting"으로 바꿉니다.
  • xmlns:local="using:AppSettingsExample"을 xmlns:local="using:<name of your project>"로 바꿉니다.

<SettingsFlyout
    x:Class="AppSettingsExample.CustomSetting"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppSettingsExample"
    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="CustomSetting"
    d:DesignWidth="346">

    <!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- Toggle switch -->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="Toggle Switch" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,25" Text="Use toggle switches to let users set Boolean values." Style="{StaticResource BodyTextBlockStyle}"/>
            <ToggleSwitch Margin="-6,0,0,0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>
            <ToggleSwitch Margin="-6,0,0,0" Header = "Install updates automatically" HorizontalAlignment="Stretch"/>
        </StackPanel>
        
        <!-- Button -->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="Push button" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,25" Text="With a push button, users initiate an immediate action." Style="{StaticResource BodyTextBlockStyle}"/>
            <TextBlock Text="Button label" Style="{StaticResource BodyTextBlockStyle}"/>
            <Button Margin="-3,0,0,0" Content="Clear"/>
        </StackPanel>

        <!-- ComboBox -->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="ComboBox" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,25" Text="Use the ComboBox to allow users to select one item from a set of text-only items." Style="{StaticResource BodyTextBlockStyle}"/>
            <ComboBox Header="State:" Margin="0,7,0,0" SelectedIndex="0" HorizontalAlignment="Left">
                <ComboBoxItem Content="Washington"/>
                <ComboBoxItem Content="Oregon"/>
                <ComboBoxItem Content="California"/>
            </ComboBox>
        </StackPanel>
        
        <!-- HyperlinkButton -->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="Hyperlink" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,25" Text="Use a hyperlink when the associated action will take the user out of this flyout." Style="{StaticResource BodyTextBlockStyle}"/>
            <HyperlinkButton Padding="-5,0,0,0" Content="View privacy statement" Tag="http://privacy.microsoft.com" HorizontalAlignment="Left"/>
        </StackPanel>

        <!-- TextBox -->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="TextBox" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,25" Text="Use a TextBox to allow users to enter text." Style="{StaticResource BodyTextBlockStyle}"/>
            <StackPanel Margin="0,7,0,0" Orientation="Horizontal">
                <TextBox HorizontalAlignment="Left" Width="150"/>
                <Button Margin="20,0,0,0" Content="Add"/>
            </StackPanel>
        </StackPanel>

        <!-- RadioButton -->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="Radio button group" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,25" Text="Lets users choose one item from a small set of mutually exclusive, related options." Style="{StaticResource BodyTextBlockStyle}"/>
            <TextBlock Text="Video quality" Style="{StaticResource BodyTextBlockStyle}"/>
            <RadioButton Margin="0,7,0,0" Content="High"/>
            <RadioButton Margin="0,17,0,0" Content="Medium"/>
            <RadioButton Margin="0,17,0,0" Content="Low"/>
        </StackPanel>
    </StackPanel>
</SettingsFlyout>


3단계: 앱의 설정 창에 SettingsFlyout 추가

SettingsFlyout 컨트롤을 사용하면 앱의 설정 창에 사용자 지정 플라이아웃을 쉽게 추가할 수 있습니다. 다음 두 가지 C# 코드를 앱에 추가하면 새 플라이아웃에 연결하는 "사용자 지정 설정" 명령이 설정 창에 포함됩니다.

먼저 ApplicationSettings 네임스페이스를 앱의 App.xaml.cs 페이지에 추가합니다.


	using Windows.UI.ApplicationSettings;

아래 코드에서 OnWindowCreated 메서드는 앱이 시작될 때 앱의 설정 창을 준비합니다. OnCommandsRequested는 설정 창에 "사용자 지정 설정" 명령을 추가합니다. SettingsCommand는 사용자 지정 설정의 Label, Id, Invoked 속성을 설정합니다. Label 속성을 설정 창에서 사용자에게 표시하려는 이름으로 설정합니다. Invoked 속성은 사용자가 설정 창에서 명령을 선택할 때 발생하는 이벤트의 처리기를 설정합니다. 이 예제에서는 ShowCustomSettingFlyout이라는 이벤트 처리기를 추가합니다. 이 이벤트 처리기는 사용자가 설정 창에서 "사용자 지정 설정"을 클릭할 때 플라이아웃을 만들고 엽니다.

App.xaml.cs에 다음 C# 코드를 추가하여 앱의 설정 창에 사용자 지정 플라이아웃을 추가합니다.


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

        private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {

            args.Request.ApplicationCommands.Add(new SettingsCommand(
                "Custom Setting", "Custom Setting", (handler) => ShowCustomSettingFlyout()));
        }

        public void ShowCustomSettingFlyout()
        {
            CustomSetting CustomSettingFlyout = new CustomSetting();
            CustomSettingFlyout.Show();
        }


이제 사용자가 화면의 오른쪽 가장자리에서 살짝 밀고 설정 참 메뉴를 선택하거나 Windows+I를 눌러 설정 창을 노출하면 설정 창에 시스템에서 생성된 사용 권한 플라이아웃뿐 아니라 사용자 지정 플라이아웃에 대한 링크도 표시됩니다.

전체 코드 예제

이 빠른 시작에서 수정된 두 페이지의 전체 복사본은 다음과 같습니다.

  • CustomSetting.xaml: x:Class="AppSettingsExample.CustomSetting"을 x:Class="<name of your project>.CustomSetting"으로, xmlns:local="using:AppSettingsExample"을 xmlns:local="using:<name of your project>"로 바꾸지 않으면 이 코드는 빌드되지 않습니다.
    
    <SettingsFlyout
        x:Class="AppSettingsExample.CustomSetting"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:AppSettingsExample"
        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="CustomSetting"
        d:DesignWidth="346">
    
        <!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
        <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    
            <!-- Toggle switch -->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
                <TextBlock Text="Toggle Switch" Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Margin="0,0,0,25" Text="Use toggle switches to let users set Boolean values." Style="{StaticResource BodyTextBlockStyle}"/>
                <ToggleSwitch Margin="-6,0,0,0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>
                <ToggleSwitch Margin="-6,0,0,0" Header = "Install updates automatically" HorizontalAlignment="Stretch"/>
            </StackPanel>
            
            <!-- Button -->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
                <TextBlock Text="Push button" Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Margin="0,0,0,25" Text="With a push button, users initiate an immediate action." Style="{StaticResource BodyTextBlockStyle}"/>
                <TextBlock Text="Button label" Style="{StaticResource BodyTextBlockStyle}"/>
                <Button Margin="-3,0,0,0" Content="Clear"/>
            </StackPanel>
    
            <!-- ComboBox -->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
                <TextBlock Text="ComboBox" Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Margin="0,0,0,25" Text="Use the ComboBox to allow users to select one item from a set of text-only items." Style="{StaticResource BodyTextBlockStyle}"/>
                <ComboBox Header="State:" Margin="0,7,0,0" SelectedIndex="0" HorizontalAlignment="Left">
                    <ComboBoxItem Content="Washington"/>
                    <ComboBoxItem Content="Oregon"/>
                    <ComboBoxItem Content="California"/>
                </ComboBox>
            </StackPanel>
            
            <!-- HyperlinkButton -->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
                <TextBlock Text="Hyperlink" Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Margin="0,0,0,25" Text="Use a hyperlink when the associated action will take the user out of this flyout." Style="{StaticResource BodyTextBlockStyle}"/>
                <HyperlinkButton Padding="-5,0,0,0" Content="View privacy statement" Tag="http://privacy.microsoft.com" HorizontalAlignment="Left"/>
            </StackPanel>
    
            <!-- TextBox -->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
                <TextBlock Text="TextBox" Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Margin="0,0,0,25" Text="Use a TextBox to allow users to enter text." Style="{StaticResource BodyTextBlockStyle}"/>
                <StackPanel Margin="0,7,0,0" Orientation="Horizontal">
                    <TextBox HorizontalAlignment="Left" Width="150"/>
                    <Button Margin="20,0,0,0" Content="Add"/>
                </StackPanel>
            </StackPanel>
    
            <!-- RadioButton -->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
                <TextBlock Text="Radio button group" Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Margin="0,0,0,25" Text="Lets users choose one item from a small set of mutually exclusive, related options." Style="{StaticResource BodyTextBlockStyle}"/>
                <TextBlock Text="Video quality" Style="{StaticResource BodyTextBlockStyle}"/>
                <RadioButton Margin="0,7,0,0" Content="High"/>
                <RadioButton Margin="0,17,0,0" Content="Medium"/>
                <RadioButton Margin="0,17,0,0" Content="Low"/>
            </StackPanel>
        </StackPanel>
    </SettingsFlyout>
    
    
    
  • 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 AppSettingsExample
    {
        /// <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(
                    "Custom Setting", "Custom Setting", (handler) => ShowCustomSettingFlyout()));
            }
    
            public void ShowCustomSettingFlyout()
            {
                CustomSetting CustomSettingFlyout = new CustomSetting();
                CustomSettingFlyout.Show();
            }
    
        }
    }
    
    
    

요약

사용자 지정 SettingsFlyout을 만들고 앱의 설정 창과 통합했습니다. 다른 SettingsFlyout을 추가하려는 경우 SettingsFlyout 컨트롤을 사용하여 다른 플라이아웃을 만들고, 새로운 args.Request.ApplicationCommands.Add(new Settings Command()) 줄을 OnCommandsRequested에 추가한 다음 새로운 SettingsFlyout을 인스턴스화하고 표시할 이벤트 처리기를 작성하면 됩니다.

앱에 도움말 콘텐츠를 추가하려는 경우 Quickstart: Add app help (Windows Store app using C++, C#, or VB)를 참조하세요.

관련 항목

참조
SettingsFlyout class
SettingsFlyout.ShowIndependent method
SettingsFlyout.Show method
SettingsFlyout.IconSource property
ApplicationSettings namespace
Application.OnWindowCreated method
ApplicationSettings.SettingsCommand class
SettingsPane class
SettingsPane.CommandsRequested event
SettingsPane.Show method
샘플
앱 설정 샘플
Reversi 샘플 기능 시나리오: 설정 플라이아웃
빠른 시작
Quickstart: Adding app settings (Windows Store apps using Javascript)
Quickstart: Add app help (Windows Store apps using C++, C#, or VB)
Quickstart: Adding controls and content (Windows Store apps using C#/VB/C++ and XAML)
지침
앱 설정에 대한 지침
Guidelines for flyouts
개념 개요
참 메뉴
컨트롤 목록(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)
앱 기능 전체 프로세스
Windows 스토어 앱 UI 전체 프로세스(XAML)

 

 

표시:
© 2017 Microsoft