언어: HTML | XAML

빠른 시작: 앱 바 추가(C#/VB/C++ 및 XAML을 사용하는 Windows 런타임 앱)

Applies to Windows and Windows Phone

앱 바를 사용하여 필요하지 않을 때 숨길 수 있는 탐색, 명령 및 도구를 표시할 수 있습니다. 앱 바를 페이지 상단, 하단 또는 두 곳 모두에 지정할 수 있습니다. 앱 바는 기본적으로 숨김으로 설정되며, 사용자가 마우스 오른쪽 단추로 클릭하거나 Windows+Z를 누르거나 화면의 상단 또는 하단 가장자리를 살짝 밀면 표시되거나 사라집니다. 사용자가 항목을 선택하거나 앱을 조작할 때 프로그래밍 방식으로 표시될 수 있습니다.

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

사전 요구 사항

AppBar 또는 CommandBar 선택

XAML 프레임워크는 가장자리를 살짝 밀 때 화면의 위쪽 또는 아래쪽 가장자리에 나타나는 UI를 표시하도록 CommandBarAppBar 컨트롤을 제공합니다. CommandBar에는 더 많은 기본 제공 기능이 있지만 배치할 수 있는 콘텐츠 종류가 제한됩니다. AppBar를 사용하면 XAML(Extensible Application Markup Language) 콘텐츠를 추가할 수 있지만 직접 레이아웃 및 크기 조정을 관리해야 합니다.

중요  CommandBar, AppBarButton, AppBarToggleButtonAppBarSeparator 컨트롤은 Windows 8.1을 대상으로 하는 앱에서만 사용할 수 있습니다. Windows 8을 대상으로 하는 앱에서는 AppBar 컨트롤을 사용해야 합니다.

  1. AppBarButton, AppBarToggleButtonAppBarSeparator 컨트롤만 포함된 앱 바가 필요할 때는 CommandBar를 사용합니다. CommandBar의 다음 기능을 통해 기본 앱 바를 간편하제 만들 수 있습니다.

    • 오른쪽의 기본 명령과 왼쪽의 보조 명령이 포함된 명령 자동 레이아웃
    • 앱 크기가 변경될 경우 앱 바 명령 자동 크기 조정
  2. 이미지, 진행률 표시줄, 검색 상자, 텍스트 블록 및 사용자 지정 스타일의 단추 같은 더 복잡한 콘텐츠가 필요할 경우에는 AppBar 컨트롤을 사용합니다. 사용자 지정 콘텐츠와 함께 AppBar를 사용하여 도구 또는 탐색 UI의 표시줄을 만들 수 있습니다. 명령을 AppBar 컨트롤에 배치할 경우 스크린 크기가 변경됨에 따라 AppBar 콘텐츠의 크기를 조정하고 다시 정렬해야 합니다. 자세한 내용은 여러 다른 뷰에서 앱 바를 사용하는 방법을 참조하세요.

앱 바 추가

  • 앱에 앱 바를 추가하려면 CommandBar 또는 AppBar 컨트롤을 PageTopAppBar 또는 BottomAppBar 속성에 할당합니다.

    앱에 탐색을 표시하려면 탐색 모음(상단 앱 바)을 사용합니다. 일반적으로 탐색을 위한 사용자 지정 스타일의 단추와 함께 AppBar를 사용합니다. 자세한 내용은 Windows 스토어 앱용 탐색 디자인을 참조하세요.

    명령 및 도구를 표시하려면 하단 앱 바를 사용합니다. 자세한 내용은 Windows 스토어 앱용 명령 디자인을 참조하세요.

    이 예제에서는 AppBar 컨트롤을 위쪽 앱 바로 추가하고 CommandBar 컨트롤을 아래쪽 앱 바로 추가하는 방법을 보여 줍니다.

    
    
    <Page.TopAppBar>
        <AppBar>
            <!-- AppBar content -->
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <CommandBar>
            <!-- CommandBar content -->
        </CommandBar>
    </Page.BottomAppBar>
    
    

다중 페이지 앱의 경우 여러 페이지에서 일반 명령이 포함된 앱 바를 공유할 수 있습니다. 자세한 내용은 여러 페이지에서 앱 바를 공유하는 방법을 참조하세요.

CommandBar에 콘텐츠 추가

  • CommandBar에 콘텐츠를 추가하려면 AppBarButton, AppBarToggleButtonAppBarSeparator 컨트롤을 CommandBarPrimaryCommandsSecondaryCommands 컬렉션에 추가합니다. XAML에서 CommandBar에 직접 추가된 컨트롤은 PrimaryCommands 컬렉션에 자동으로 추가됩니다.

    이 예제에서는 PrimaryCommandsSecondaryCommands가 포함된 CommandBar를 보여 줍니다.

    
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    
    

    하단 앱 바 컨트롤

AppBar에 콘텐츠 추가

  • AppBar에는 하나의 자식 콘텐츠만 포함될 수 있으므로 일반적으로 다른 컨트롤을 추가할 수 있는 레이아웃 패널을 추가합니다.

    이 예제에서는 탐색 단추 및 검색 상자가 포함된 AppBar를 보여 줍니다.

    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    

    하단 앱 바 컨트롤

앱 바를 프로그래밍 방식으로 열기

기본적으로 앱 바는 사용자가 마우스 오른쪽 단추로 클릭하거나 Windows+Z를 누르거나 화면의 상단 또는 하단 가장자리를 살짝 밀면 표시됩니다. 사용자가 이러한 작업 중 하나를 수행하면 상단 및 하단 앱 바가 페이지에 모두 있는 경우 둘 다 표시됩니다. IsOpen 속성을 true로 설정하면 프로그래밍 방식으로 앱 바를 열 수 있습니다. 이렇게 하면 속성 값을 설정한 해당 앱 바(상단 또는 하단)만 열립니다.

  1. 페이지가 로드될 때 앱 바를 처음 열려면 XAML에서 IsOpen 속성을 true로 설정합니다.
    
    <Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
  2. 앱 바를 프로그래밍 방식으로 열려면 코드에서 IsOpen 속성을 true로 설정합니다. 코드에서 앱 바를 참조하려면 앱 바의 이름을 지정한 다음 이름으로 참조하거나 TopAppBar 또는 BottomAppBar 속성을 참조할 수 있습니다.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.BottomAppBar != null)
        {
            this.BottomAppBar.IsOpen = true;
        }
    }
    
    

    일반적으로 사용자가 앱에서 항목을 조작할 때 상황별 명령을 표시하기 위해 프로그래밍 방식으로 앱 바를 엽니다. 예를 들어 사용자가 앱에서 텍스트를 선택하면 서식 명령이 있는 앱 바를 표시할 수 있습니다. 상황별 명령을 표시하는 경우 명령을 계속 표시하도록 문맥이 변경될 때까지 앱 바 해제 모드를 고정으로 설정합니다.

앱 바를 고정 상태로 설정하기

기본적으로 앱 바는 사용자가 앱 바 외부에서 앱을 조작하면 해제됩니다. 명령이 계속 표시되도록 IsSticky 속성을 true로 설정하여 해제 모드를 변경할 수 있습니다. 앱 바가 고정되면 사용자가 마우스 오른쪽 단추로 클릭하거나 Windows+Z를 누르거나 화면의 상단 또는 하단 가장자리를 살짝 미는 경우에만 해제됩니다.

  1. 앱을 조작하는 경우에도 앱 바가 계속 표시되도록 하려면 XAML에서 IsSticky 속성을 true로 설정합니다.
    
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
  2. 프로그래밍 방식으로 앱 바를 해제 모드로 변경하려면 코드에서 IsSticky 속성을 true로 설정합니다. 코드에서 앱 바를 참조하려면 앱 바의 이름을 지정한 다음 이름으로 참조하거나 TopAppBar 또는 BottomAppBar 속성을 참조할 수 있습니다.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.TopAppBar != null)
        {
            this.TopAppBar.IsSticky = true;
        }
    }
    
    

요약 및 다음 단계

이 빠른 시작에서는 C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱에 앱 바를 추가하는 방법에 대해 알아보았습니다.

사용자에게 일관된 환경을 제공하려면 앱 바에 대한 지침을 검토하세요.

AppBarButton 컨트롤에 대한 자세한 내용은 빠른 시작: 앱 바 단추 추가를 참조하세요.

관련 항목

XAML AppBar 컨트롤 샘플
빠른 시작: 앱 바 단추 추가
Windows 스토어 앱용 명령 디자인
AppBar
Reversi 샘플 기능 시나리오: 앱 바

 

 

표시:
© 2014 Microsoft