[C/C++/C#/UWP] UWP Command Bar 구현하기

CommandBar 구현하기

[C/C++/C#/UWP] UWP 네비게이션 구현하기

http://duzi077.tistory.com/admin/entry/post/?id=92

이어서 코드를 추가하여 CommandBar를 만들어보겠습니다.

  

 

<PC>

<Mobile>

---

Command Bar를 생성하는 방식 2가지

1. VS 메뉴 활용하기

xaml 파일 -> 문서개요 클릭 -> BottonAppBar 오른쪽 버튼 클릭 -> CommandBar 추가

 

CommandBar 오른쪽 버튼 클릭 -> AppBarButton  추가

 

2. xaml 편집기에 직접 코딩

<Page
    ..
    mc:Ignorable="d">
 
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Accept" Icon="Accept"/>
            <AppBarButton Label="Cancel" Icon="Cancel"/>
        </CommandBar>
    </Page.BottomAppBar>
 
    <Grid ... />
</Page>

---

CommandBar & Secondary CommandBar 추가하기

MainPage.xaml

    <Page.BottomAppBar>
        <CommandBar ClosedDisplayMode="Minimal">
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <CommandBar.SecondaryCommands>
                <AppBarButton x:Name="aboutCommandBar" Tag="About" Label="About" Click="AppBarButton_Click"/>    
            </CommandBar.SecondaryCommands>
            <AppBarButton x:Name="contactCommandBar" Tag="Contact" Label="Contact" Icon="Contact" Click="AppBarButton_Click"/>
            <AppBarButton x:Name="favoriteCommandBar" Tag="Favorite" Label="Favorite" Icon="Favorite" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>

CommandBar  이벤트 추가하기

MainPage.xaml.cs

        private void AppBarButton_Click(object sender, RoutedEventArgs e)
        {
            switch((string)((AppBarButton)sender).Tag)
            {
                case "About":
                    this.Frame.Navigate(typeof(Aboutpage));
                    break;
 
                case "Contact":
                    this.Frame.Navigate(typeof(Contact));
                    break;
 
                case "Favorite":
                    this.Frame.Navigate(typeof(FavoritePage));
                    break;
 
                default:
                    break;
            }

빈 페이지  3개 ( Aboutpage , Contact , FavoritePage ) 를 만들고,

페이지 정보를 알려주는 TextBlock으로 구성합니다.

FavoritePage.xaml

    <Grid Background="DarkViolet">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Favorite Page" FontSize="30"/>
    </Grid>