XAML AppBar control sample

마이크로 소프트의 셈플 중 하나인 AppBar control sample을 간단하게 살펴 보도록 하겠다

셈플 다운로드 :
http://code.msdn.microsoft.com/windowsapps/XAML-AppBar-control-sample-2aa1cbb4

1. 3개의 시나리오로 구성된다.

1) 기본 앱바를 만드는 시나리오

2) Sticky appbar를 만드는 시나리오 (고정된 앱바)
이 방법에 대해서는 별도로 설명하지 않는다. 음..사용해 보면 그 만의 사용 용도가 있을 것이라고 생각되지만...

3) 글로벌 앱바 ( 앱의 다른 페이지에서도 사용되는 앱바)

2. 기본 앱바

앱바가 보이도록 하기 위해서는 마우스의 오른쪽 버튼 클릭 or Windows + Z를 입력 한다.

위와 같은 모양의 앱바를 만드는 것을 알아보자.

1) 일단 앱바의 버튼들의 배치를 보면, 왼쪽과 오른쪽으로 나누어져 있는 것을 알 수가 있는데, 이는 테블릿을 양손으로 들고 엄지 손가락으로 터치가 가능한 위치에 버튼을 놓기 위한 디자인 철학의 일부라고 한다. 그러니 될 수 있으면 이런 배치를 따르는 것이 좋겠다.

2) 소스를 보면 여러개의 파일들이 보이는데, 각 시나리오 별로 페이지가 별도로 만들어져 있는 것이다. 시나리오 1번을 살펴 볼 것이기 때문에, ScenarioInput1.xaml(상단에 나오는 페이지), ScenarioOutput1.xaml(하단에 결과 출력되는 페이지) 이렇게 2개의 페이지를 살펴보면 되겠다.

ScenarioInput1.xaml에는 중요한 내용이 없다.

ScenarioOutput1.xaml
<Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit"/>
                <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Save"/>
                <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Delete"/>
            </StackPanel>
            <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refresh"/>
                <Button x:Name="Previous" Style="{StaticResource PreviousAppBarButtonStyle}" Tag="Previous"/>
                <Button x:Name="Next" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next"/>
                <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

앱바의 버튼은 일반 버튼 컨트를에 스타일을 입혀놓은 것이다. 새로운 아이콘 모양의 버튼을 추가하려면, 다음의 페이지를 참고하면 된다.

W8WIL #1: Friendly Names for AppBar Icon
http://www.devhammer.net/blog/w8wil-1-friendly-names-for-appbar-icons

버튼의 스타일을 변경하려면, 버튼을 선택하고, 프로퍼티 윈도우에서 Style 오른쪽 네모 상자를 클릭하고, Local Resource를 선택하면, 그 중 하나를 고를 수 있다. 이 예제에서는 몇개 선택할 수 없는데, 새로운 프로젝트를 만들고 앱바를 추가하고, 버튼을 선택할 때는 상당히 많은 종류의 버튼을 선택 할 수 있다.

3. 글로벌 앱바 ( 앱의 다른 페이지에서도 사용되는 앱바)

전체 구성을 먼저 살펴 보면,

MainPage.xaml -> GlobalPage.xaml -> Page1.xaml -> Page2.xaml

순으로 이동하게 되어 있다. 그래서, ScenarioInput3.xaml, ScenarioOutput3.xaml에는 뭔가 중요한 내용이 없고, ScenarioInput3.xaml.cs 곳을 열어 보면

        private void ShowMe_Click(object sender, RoutedEventArgs e)
        {
            rootPage.Frame.Navigate(typeof(GlobalPage), rootPage);
        }

이런 내용이 있는 것을 찾을 수 있다. ShowMe 버튼을 클릭하면 GlobalPage로 네비게이션이 되는 것이다.

GlabalPage.xaml
<Page
    x:Name="pageRoot"
    x:Class="AppBarControl.GlobalPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
   
    <Page.BottomAppBar>
        <AppBar x:Name="GlobalAppBar" Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Back" Tag="Back" Style="{StaticResource BackAppBarButtonStyle}" HorizontalAlignment="Left" Click="Back_Click"/>
                </StackPanel>
                <StackPanel x:Name="RightCommands" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="White">
        <Frame x:Name="Frame1"/>
    </Grid>
</Page>

GlobalPage.xaml.cs
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    rootPage = e.Parameter as MainPage;

    //페이지가 네이게이트 되어서 들어오자마자, Frame1에 Page1을 네이게이션 해준다.
    Frame1.Navigate(typeof(Page1), this);
}

private void Back_Click(object sender, RoutedEventArgs e)
{
    //Frame1에서 Back을 할 수 있는지 여부를 확인하고, 않되면 rootPage.Frame의 Back을 사용
    if (Frame1.CanGoBack)
    {
        Frame1.GoBack();
    }
    else
    {
        rootPage.Frame.GoBack();
    }
}

Page1.xaml.cs
public sealed partial class Page1 : Page
{
    //루트 페이지를 글로벌 페이지로 사용
    GlobalPage rootPage = null;
    public Page1()
    {
        this.InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        //루트 페이지 지정
        rootPage = e.Parameter as GlobalPage;
    }

    private void PageTwo_Click(object sender, RoutedEventArgs e)
    {
        //버튼 클릭시 Page2로 네비게이션하면서 파라메터를 루트 페이지로 가지고 감
        this.Frame.Navigate(typeof(Page2), rootPage);
    }
}

여기까지 실행되 었을 때의 모습 

이제 Go To Page Two 버튼을 클릭해서 Page2로 넘어가면..

Page2.xaml.cs
public sealed partial class Page2 : Page
{
    GlobalPage rootPage = null;
    Button starButton = null;
    StackPanel rightPanel = null;

    public Page2()
    {
        this.InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        //Page1에서 넘어온 파라메터
        rootPage = e.Parameter as GlobalPage;

        // While our AppBar has global commands for navigation, we can demonstrate
        // how we can add contextual AppBar command buttons that only pertain to
        // particular pages. 

        // In this case, whenever we navigate to this page, we want to add a new command button
        // to our AppBar

        // We want to add command buttons to the right side StackPanel within the AppBar.
        //글로벌 페이지에 있는 RightCommand 패널을 찾아서
        rightPanel = rootPage.FindName("RightCommands") as StackPanel;
        if (rightPanel != null)
        {
            // Create the button to add
            // 버튼을 추가
            starButton = new Button();

            // Hook up the custom button style so that it looks like an AppBar button
            starButton.Style = App.Current.Resources.MergedDictionaries[0]["StarAppBarButtonStyle"] as Style;
            starButton.Tag = "Superstar";

            // Set up the Click handler for the new button
            starButton.Click += new RoutedEventHandler(starButton_Click);

            // Add the button to the AppBar
            rightPanel.Children.Add(starButton);
        }
    }

    //네비게이션으로 빠져나가면 연결된 이벤트 해제, 버튼 삭제
    protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
    {
        if (rightPanel != null)
        {
            // Unhook the Click event handler for the button
            starButton.Click -= new RoutedEventHandler(starButton_Click);

            // Remove the button from the AppBar
            rightPanel.Children.Remove(starButton);
        }
    }

    // This is the handler for our ApplicationBar button that is only available on this page
    async void starButton_Click(object sender, RoutedEventArgs e)
    {
        Windows.UI.Popups.MessageDialog dialog = new Windows.UI.Popups.MessageDialog("You're a Superstar!");
        await dialog.ShowAsync();
    }

}

위의 코드에서 보듯이 앱바에 동적으로 버튼을 추가, 삭제 하는 것이 가능하다.