방법: XAML을 사용하여 Windows Phone용 응용프로그램 모음 만들기

2012-02-09

XAML을 사용하여 사용자가 응용프로그램의 가장 일반적인 작업을 빠르게 액세스할 수 있는 응용프로그램 모음을 만들 수 있습니다. XAML과 코드 중에서 어떤 것으로 응용프로그램 모음을 만들어야 할지 결정하려면 Windows Phone용 응용프로그램 모음 개요를 참조하십시오.

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

메뉴 항목이 있는 확장된 앱 모음

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의 주석 처리를 제거하거나 다음 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. 다음은 2개의 아이콘 버튼과 2개의 메뉴 항목이 있는 응용프로그램 모음의 예입니다. 클릭 이벤트 및 처리기는 다음 프로시저에서 추가합니다.

    <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. 각 아이콘 버튼 및 메뉴 항목에 대해, 사용자가 클릭하면 호출할 이벤트를 추가합니다. Page 클래스 내에 코드를 추가합니다. 다음은 이전 프로시저의 응용프로그램 모음에 대한 클릭 이벤트의 예입니다.

    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.
    }
    

표시: