여러 페이지에서 앱 바를 공유하는 방법

여러 페이지에서 앱 바를 공유하는 방법(XAML)

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

Windows 런타임 앱의 각 Page 클래스는 TopAppBarBottomAppBar 속성에 AppBar할당된 컨트롤을 가질 수 있습니다. 그러나 앱의 여러 관련 페이지에서 동일한 AppBar을(를) 사용하여 공통 탐색 또는 명령을 제공할 수도 있습니다. 예를 들어 앱 상단에 페이지를 탐색할 수 있는 탐색 모음을 제공할 수 있습니다. 페이지마다 탐색 모음을 다시 만들지 않고 모든 페이지에서 동일한 탐색 모음을 표시할 수 있습니다.

여기에서는 페이지 간에 AppBar 또는 CommandBar을(를) 공유할 수 있는 몇 가지 방법을 보여 줍니다. 이 자습서는 플랫 탐색 전체 프로세스 항목 및 관련된 플랫 탐색 샘플을 기반으로 합니다. 전체 코드는 플랫 탐색 샘플을 참조하세요.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

알아야 할 사항

기술

사전 요구 사항

지침

페이지에 공유 앱 바 추가

하나 이상의 페이지에 일반적인 앱 바를 추가하려면 Page 클래스에서 파생된 새로운 클래스를 생성합니다. 이 자습서에서는 NavigationPage(이)라는 클래스를 만듭니다. 이 클래스는 Page 클래스에서 TopAppBarBottomAppBar 속성을 상속합니다. 맨 위 앱 바에 탐색 명령을 추가하고 아래 앱 바에는 다른 공유 명령을 추가합니다. 그런 다음 앱 페이지가 Page 대신 NavigationPage에서 파생되도록 변경하여 각 페이지가 정의된 명령을 상속하도록 합니다.

JJ150604.wedge(ko-kr,WIN.10).gif공유 AppBar를 추가하려면

  1. Page 클래스에서 파생되는 새 클래스를 만듭니다. 이 자습서에서는 클래스 이름을 NavigationPage로 지정합니다.

    이 자습서 끝에 있는 전체 코드의 NavigationPage.cs을 참조하세요.

    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
    
        }
    }
    
    
    
  2. 탐색 명령이 포함된 AppBar 컨트롤을 NavigationPage 클래스의 TopAppBar 속성에 할당합니다. AppBar 콘텐츠는 다음 단계에서 정의하는 UserControl입니다.
    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }
    
        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Navigation controls go in the top app bar.
            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 }); 
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;
        }
    }
    
    
    
  3. AppBar 컨트롤은 모든 콘텐츠를 포함할 수 있으므로, UserControl에 모든 탐색 명령을 배치하고, UserControlAppBar의 콘텐츠로 설정할 수 있습니다. 이 자습서에서는 UserControl 이름을 NavigationControl로 지정합니다.
    
    <UserControl
        x:Class="FlatNavTemplate.NavigationControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:FlatNavTemplate"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <UserControl.Resources>
            <Style TargetType="Button">
                <Setter Property="Width" Value="140"/>
                <Setter Property="Height" Value="60"/>
                <Setter Property="Margin" Value="5"/>
            </Style>
        </UserControl.Resources>
    
       <StackPanel Orientation="Horizontal">
            <Button x:Uid="appbarHome" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
            <Button x:Uid="appbarPage2" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
            <!-- Add more buttons here as needed for new pages. -->
            <!-- Assign the fully qualified page name to the button's Tag property. -->
        </StackPanel>
    </UserControl>
    
    
  4. UserControl(NavigationControl.xaml.cs)의 코드 페이지에서 페이지간 탐색을 위한 코드를 추가합니다.

    여기서는 각 탐색 단추의 Tag 속성을 사용하여 탐색할 페이지의 이름을 지정합니다.

    
    public sealed partial class NavigationControl : UserControl
    {
        public NavigationControl()
        {
            this.InitializeComponent();
        }
    
        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            Frame rootFrame = Window.Current.Content as Frame;
    
            if (b != null && b.Tag != null)
            {
                Type pageType = Type.GetType(b.Tag.ToString());
    
                // Make sure the page type exists, but don't navigate to it if it's already the current page.
                if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
                {
                    (App.Current as App).Navigate(pageType);
                }
                else if (pageType == null)
                {
                    // TODO: Optional - Do something if page not found.
                }
            }
        }
    }
    
    

페이지에 공유 CommandBar 추가

Windows 8.1:  CommandBarAppBarButton 컨트롤은 Windows 8.1 및 Windows Phone 8.1에서만 사용할 수 있습니다. Windows 8의 경우 AppBarButton을 사용합니다.

JJ150604.wedge(ko-kr,WIN.10).gif공유 CommandBar를 추가하려면

  • CommandBarNavigationPage 클래스의 BottomAppBar 속성에 추가합니다.

    CommandBar은(는) 콘텐츠로AppBarButton 컨트롤만 가질 수 있으므로 AppBar에서처럼 UserControl에 명령을 넣을 수 없습니다. 대신 코드에 명령을 추가합니다. 이 자습서에서는 모든 페이지에서 공유되는 CommandBar도움말 단추를 추가합니다. 이 자습서의 끝에 있는 전체 코드에서 도움말 단추의 Click 이벤트 처리기를 볼 수 있습니다. 자세한 내용은 빠른 시작: 앱 도움말 추가를 참조하세요.

      

    사용자가 특정 페이지로 이동하면 해당 페이지에 대한 명령을 추가하고, 페이지를 닫으면 해당 페이지에 대한 명령을 제거할 수 있습니다. 자세한 내용은 앱 바에 상황에 맞는 명령을 추가하는 방법을 참조하세요.

     
    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }
    
        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // CommandBar for Help command goes in the BottomAppBar.
            CommandBar commandBar = new CommandBar();
            commandBar.Background = new SolidColorBrush(new Color() { A = 255, R = 0, G = 178, B = 240 });
                
            // Create the Help button.
            AppBarButton helpButton = new AppBarButton();
            helpButton.Icon = new SymbolIcon(Symbol.Help);
            helpButton.Label = "Help";
            helpButton.Click += helpButton_Click;
                
            // Add the Help button to the command bar.
            commandBar.PrimaryCommands.Add(helpButton);
            this.BottomAppBar = commandBar;
        }
    }
    
    
    

앱에 페이지 추가

  1. 사용자가 탐색할 수 있는 앱 페이지를 추가합니다.

    이 자습서 끝에 있는 전체 코드의 HomePage.xaml 및 Page2.xaml을 참조하세요.

  2. NavigationPage 대신 Page에서 파생하도록 앱 페이지를 변경합니다. 각 NavigationPage 파생 페이지에는 사용자가 정의한 탐색 및 도움말 명령이 포함됩니다.

    NavigationPage에서 파생하도록 업데이트된 HomePage 정의입니다.

    
    
    <nav:NavigationPage
        x:Name="pageRoot"
        x:Class="FlatNavTemplate.Pages.HomePage"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:nav="using:FlatNavTemplate"
        xmlns:local="using:FlatNavTemplate.Pages"
        xmlns:common="using:FlatNavTemplate.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <-- PAGE CONTENT -->   
        </Grid>
    </nav:NavigationPage>
    
    
    
    
    public sealed partial class HomePage : NavigationPage
    {
    
    }
    
    

설명

이 코드의 작동 방식을 보려면 플랫 탐색 샘플을 다운로드하세요.

전체 예제

NavigationPage


using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace FlatNavTemplate
{
    public class NavigationPage : Page
    {
        public static NavigationPage Current;

        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }

        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // To access the app bars from the code of a derived page, 
            // use NavigationPage.Current.TopAppBar or NavigationPage.Current.BottomAppBar.
            Current = this;

            // Navigation controls go in the top app bar.
            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 });
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;

            // CommandBar for Help command goes in the BottomAppBar.
            CommandBar commandBar = new CommandBar();
            commandBar.Background = new SolidColorBrush(new Color() { A = 255, R = 0, G = 178, B = 240 });
            // Create the Help button.
            AppBarButton helpButton = new AppBarButton();
            helpButton.Icon = new SymbolIcon(Symbol.Help);
            helpButton.Label = "Help";
            helpButton.Click += helpButton_Click;
            // Add the Help button to the command bar.
            commandBar.PrimaryCommands.Add(helpButton);
            this.BottomAppBar = commandBar;
        }

        void helpButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Settings.HelpSettings helpSettingsFlyout = new Settings.HelpSettings();
            // When the settings flyout is opened from the app bar instead of from
            // the Settings charm, use the ShowIndependent() method.
            helpSettingsFlyout.ShowIndependent();

            // Close the app bars.
            this.TopAppBar.IsOpen = false;
            this.BottomAppBar.IsOpen = false;
        }
    }
}

NavigationControl


<UserControl
    x:Class="FlatNavTemplate.NavigationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="140"/>
            <Setter Property="Height" Value="60"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </UserControl.Resources>
    
    <StackPanel Orientation="Horizontal">       
        <Button x:Uid="appbarHome" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
        <Button x:Uid="appbarPage2" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
        <!-- Add more buttons here as needed for new pages. -->
        <!-- Assign the fully qualified page name to the button's Tag property. -->
    </StackPanel>
</UserControl>



namespace FlatNavTemplate
{
    public sealed partial class NavigationControl : UserControl
    {
        public NavigationControl()
        {
            this.InitializeComponent();
        }

        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            Frame rootFrame = Window.Current.Content as Frame;

            if (b != null && b.Tag != null)
            {
                Type pageType = Type.GetType(b.Tag.ToString());

                // Make sure the page type exists, but don't navigate to it if it's already the current page.
                if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
                {
                    (App.Current as App).Navigate(pageType);
                }
                else if (pageType == null)
                {
                    // TODO: Optional - Do something if page not found.
                }
            }
        }
    }
}

HomePage


<nav:NavigationPage
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.HomePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:nav="using:FlatNavTemplate"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" 
                   Width="100" Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" 
                       Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</nav:NavigationPage>


public sealed partial class HomePage : NavigationPage
{
    // Only class definition is shown. Template code is removed for clarity.
}

페이지2


<nav:NavigationPage
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.Page2"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:nav="using:FlatNavTemplate"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application Page 2</x:String>
    </Page.Resources>
    
    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" 
                   Width="100" Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</nav:NavigationPage>


public sealed partial class Page2 : NavigationPage
{
    // Only class definition is shown. Template code is removed for clarity.
}

관련 항목

플랫 탐색 샘플
XAML AppBar 컨트롤 샘플
빠른 시작: 앱 바 추가
빠른 시작: 페이지 간 탐색
플랫 탐색 전체 프로세스(XAML)
Windows 스토어 앱용 탐색 디자인
Windows 스토어 앱용 명령 디자인

 

 

표시:
© 2016 Microsoft