앱 바에 메뉴를 추가하는 방법(XAML)

Applies to Windows and Windows Phone

앱 바에 명령을 추가하는 경우 명령 집합이 명령 메뉴에서 더 잘 작동하는지 여부를 고려합니다. 메뉴를 사용하면 더 적은 공간에 더 많은 옵션을 제공하고 대화형 컨트롤을 포함할 수 있습니다. 이 예제에서는 정렬 메뉴에 옵션 선택을 쉽게 만드는 간단한 목록이 팝업됩니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  Windows 스토어 앱 UI 전체 프로세스

앱 바 메뉴

알아야 할 사항

기술

사전 요구 사항

지침

단계 1: 앱에 앱 바 추가

자세한 내용은 빠른 시작: 앱 바 추가를 참조하세요.

여기서는 CommandBar를 하단 앱 바로 추가합니다.


<Page.BottomAppBar>
    <CommandBar>
        ...
    </CommandBar>
</Page.BottomAppBar>

단계 2: 앱 바에 AppBarButton을 추가합니다.

AppBarButton을 추가하고 IconLabel 속성을 설정합니다.


...
    <CommandBar>
        <AppBarButton Icon="Sort" Label="Sort">
            .... 
        </AppBarButton>
    </CommandBar>
...

단계 3: AppBarButton에 MenuFlyout 추가

단추의 Flyout 속성에 MenuFlyout을 추가합니다. 단추를 클릭하면 플라이아웃이 자동으로 열립니다.


...
        <AppBarButton Icon="Sort" Label="Sort">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    ....
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
...

단계 4: MenuFlyout에 MenuFlyoutItems 추가

메뉴의 각 선택 항목에 대해 MenuFlyoutItem을 추가하고 해당 Text 속성을 설정합니다. Click 이벤트를 처리하거나, 사용자가 항목을 선택할 때 작업을 수행할 Command를 할당합니다.


...
                <MenuFlyout>
                    <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating"/>
                    <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match"/>
                    <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance"/>
                </MenuFlyout>
...

전체 예제

다음은 앱 바의 최종 XAML 및 MenuFlyoutItem.Click 이벤트에 대한 이벤트 처리기 코드입니다.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Icon="Sort" Label="Sort">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating"/>
                    <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match"/>
                    <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance"/>
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>


private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    MenuFlyoutItem selectedItem = sender as MenuFlyoutItem;

    if (selectedItem != null)
    {
        if (selectedItem.Tag.ToString() == "rating")
        {
            SortByRating();
        }
        else if (selectedItem.Tag.ToString() == "match")
        {
            SortByMatch();
        }
        else if (selectedItem.Tag.ToString() == "distance")
        {
            SortByDistance();
        }
    }
}

관련 항목

빠른 시작: 앱 바 추가
AppBar
CommandBar
AppBarButton
MenuFlyout

 

 

표시:
© 2014 Microsoft