Windows Phone의 XAML을 사용하여 앱 바를 만드는 방법

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

사용자가 응용프로그램의 가장 일반적인 작업에 빠르게 액세스할 수 있는 XAML을 사용하여 응용프로그램 모음을 만들 수 있습니다. 응용프로그램 모음을 XAML에서 만들지, 코드에서 만들지 결정하려면 Windows Phone의 앱 바를 참조하세요.

다음 그림에서는 사용자가 응용프로그램 모음을 확장한 후의 예를 보여 줍니다.

App Bar expanded with menu items

이 항목에는 다음 단원이 포함되어 있습니다.

 

Windows Phone SDK 와 함께 제공된 페이지 템플릿에는 주석 처리된 샘플 응용프로그램 모음에 대한 XAML이 포함되어 있습니다. 응용프로그램 모음을 만들려면 XAML의 주석 처리를 해제합니다. 이 절차에서는 페이지가 포함된 Windows Phone 응용프로그램이 있는 것으로 가정합니다. 응용프로그램 모음에서 아이콘 버튼의 이미지를 사용할 수 있으려면 먼저 이 이미지를 응용프로그램에 추가해야 합니다. 자세한 내용은 Windows Phone의 앱 바 아이콘 버튼을 참조하세요.

XAML을 사용하여 응용프로그램 모음을 만들려면

  1. 디자이너에서 페이지를 열어 XAML을 확인합니다.

  2. 기본적으로 페이지에 추가되는 샘플 응용프로그램 모음 요소를 찾습니다. 이는 다음과 같습니다.

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        …
    </phone:PhoneApplicationPage.ApplicationBar>-->
    

    페이지가 파노라마 페이지인 경우에는 샘플 응용프로그램 모음이 없습니다. XAML의 마지막 줄 앞에 응용프로그램 모음을 추가합니다. 이는 다음과 같습니다.

    </phone:PhoneApplicationPage>
    
    참고참고:

    응용프로그램 모음에는 파노라마 페이지의 공간을 적게 차지하도록 특별히 디자인된 새로운 미니 모드가 포함됩니다. 자세한 내용은 Windows Phone의 앱 바를 참조하세요.

  3. 다음 XAML의 주석 처리를 해제하거나 추가합니다.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  4. 필요한 경우 응용프로그램 모음 속성을 설정합니다. 속성에 대한 자세한 내용은 Windows Phone의 앱 바를 참조하세요.

  5. 필요한 경우 아이콘 버튼을 제거하거나 추가합니다. 아이콘 이미지 및 버튼 텍스트를 설정합니다.

  6. 메뉴 항목은 선택 사항입니다. 필요한 경우 선택 사항을 제거하거나 새로 추가합니다. 텍스트를 설정합니다.

  7. 다음은 아이콘 버튼과 메뉴 항목이 각각 두 개씩 있는 응용프로그램 모음의 예제입니다. 다음 절차에서 클릭 이벤트와 처리기를 추가합니다.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
    
            <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save"/>
            <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings"/>
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="menu item 1" />
                <shell:ApplicationBarMenuItem Text="menu item 2" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    

아이콘 버튼과 메뉴 항목은 코드에서 처리할 수 있는 클릭 이벤트를 표시합니다.

클릭 이벤트를 처리하려면

  1. 디자이너에서 페이지를 열어 XAML을 확인합니다.

  2. 각 아이콘 버튼과 메뉴 항목의 경우 사용자가 클릭하면 호출할 이벤트를 식별합니다. 다음은 클릭 이벤트가 식별된 이전 절차의 응용프로그램 모음에 대한 예제입니다.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
    
            <shell:ApplicationBarIconButton Click="Save_Click" IconUri="/Images/save.png" Text="save" />
            <shell:ApplicationBarIconButton Click="Settings_Click" IconUri="/Images/settings.png" Text="settings" />
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 1" />
                <shell:ApplicationBarMenuItem Click="MenuItem2_Click" Text="menu item 2" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  3. 편집기에서 페이지에 대한 코드 숨김 파일을 엽니다.

  4. 각 아이콘 버튼과 메뉴 항목의 경우 사용자가 클릭하면 호출할 이벤트를 추가합니다. 페이지 클래스 안에 코드를 추가합니다. 다음은 이전 절차에서 사용한 응용프로그램 모음에 대한 클릭 이벤트의 예제입니다.

    private void Save_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Save button works!");
        //Do work for your application here.
    }
    
    private void Settings_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Settings button works!");
        //Do work for your application here.
    }
    
    private void MenuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 1 works!");
        //Do work for your application here.
    }
    
    private void MenuItem2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 2 works!");
        //Do work for your application here.
    }
    

표시:
© 2014 Microsoft