ApplicationBar for Windows Phone 7 #WP7

ApplicationBar라는 것은 PhoneApplicationPage에 프로퍼티로 존재합니다.
즉, 페이지마다 다른 ApplicationBar를 준비할 수도 있다는 이야기 입니다.

여기서는 MainPage.xaml에서 ApplicationBar를 사용하는 시나리오로 사용법을 알아봅니다.
(페이지마다 공통으로 사용하고 싶은 Global Application Bar를 생각하신다면 App.xaml등에 Resource로 생성하는 것이 좋습니다.)


1) 프로젝트에 Microsoft.Phone.Shell 어셈블리가 참조 되어있나 확인하고, 참조되어 있지 않으면 참조추가를 합니다.

2) MainPage.xaml에 아래 네임스페이스가 추가되어있나 확인하고 없으면 네임스페이스를 추가합니다.

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"

3) MainPage.xaml에 ApplicationBar를 생성합니다.
ApplicationBar는 아이콘으로 표현되는 ApplicationBarIconButton의 집합인 Buttons와
Text로 표현되는 ApplicationBarMenuItem의 집합인 MenuItems로 구성됩니다.

<phoneNavigation:PhoneApplicationPage
    x:Class="HFApplicationBarSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
    xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
    <phoneNavigation:PhoneApplicationPage.ApplicationBar>
        <!-- AppBar -->
        <shell:ApplicationBar>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Red" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="Green" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="Blue" Click="ApplicationBarMenuItem_Click" />
            </shell:ApplicationBar.MenuItems>
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="Images/ApplicationBar/ColorSwatch.png" Click="ApplicationBarIconButton_Click"/>
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phoneNavigation:PhoneApplicationPage.ApplicationBar>

4) 마지막으로 Button이나 Menu에 대한 이벤트핸들러를 구현해 주세요.

물론 ApplicationBar는 코드 비하인드에서 C# 코드만으로도 추가할 수 있습니다만,
디자이너와 협업을 생각해서 휴즈플로우는 XAML 작업을 선호합니다.

참~쉽죠? 자세한 것은 아래 소스를 참고하세요.

Download

HFApplicationBarSample.zip