앱 바에 상황별 명령을 추가하는 방법(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)

특정 컨텍스트에서만 관련이 있는 앱 바 명령을 관련이 있는 상태가 될 때까지 숨깁니다. 예를 들어 이미지를 선택하는 경우에만 유용한 이미지 편집 명령이 있을 수 있습니다. 또는 특정 페이지에서만 관련이 있는 명령이 포함된 글로벌 앱 바가 있을 수 있습니다. 이러한 예제는 앱 바에 상황별 명령을 추가할 수 있는 여러 방법을 보여 줍니다.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

알아야 할 사항

기술

사전 요구 사항

지침

단계 1: 명령 모음에 명령 단추 추가(Windows 8.1)

Windows 8.1:  이 단계는 Windows 8.1에만 적용됩니다. Windows 8의 경우에는 3-5단계를 참조하세요.

코드 숨김 파일에서 CommandBar에 명령을 추가할 수 있습니다. 일반적으로 항목을 선택할 때만 적용되는 명령을 추가하거나, 페이지 간에 CommandBar를 공유하고 한 페이지에만 적용되는 명령이 있을 경우 이렇게 합니다. 명령이 적용되는 페이지의 코드에 명령을 추가하면 해당 페이지의 요소에 명령을 연결하기가 더 쉽습니다. 여기에서는 사용자가 페이지를 탐색하면 공유 CommandBar에 명령을 추가하고 페이지에서 이동하면 제거합니다.

앱 바 공유에 대한 자세한 내용은 여러 페이지에서 앱 바를 공유하는 방법XAML AppBar 컨트롤 샘플을 참조하세요.

사용자가 해당 페이지로 이동하면 명령을 CommandBar에 추가합니다.

  1. CommandBar를 앱에 아래쪽 앱 바로 추가합니다. 자세한 내용은 빠른 시작: 앱 바 추가를 참조하세요.

    여기서는 XAML로 정의된 단일 단추가 있는 아래쪽 앱 바를 추가합니다.

    
        <Page.BottomAppBar>
            <CommandBar x:Name="bottomAppBar">
                <AppBarButton Icon="Sort" Label="Sort" Click="AppBarButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
    
    
  2. 사용자가 해당 페이지로 이동하면 CommandBar에 추가할 AppBarSeparator를 만듭니다.
  3. CommandBar에 추가할 AppBarButton을 만듭니다.
  4. AppBarButton에 대한 IconLabel을 설정합니다.
  5. Click 이벤트 처리기를 등록합니다.
  6. CommandBar에 단추를 추가합니다.

void Page1_Loaded(object sender, RoutedEventArgs e)
{
    bottomAppBar.PrimaryCommands.Insert(0, new AppBarSeparator());

    AppBarButton addButton = new AppBarButton();
    addButton.Icon = new SymbolIcon(Symbol.Add);
    addButton.Label = "Add";
    addButton.Click += AppBarButton_Click;
    bottomAppBar.PrimaryCommands.Insert(0, addButton);
}

단계 2: 명령 모음에서 명령 단추 제거(Windows 8.1)

Windows 8.1:  이 단계는 Windows 8.1에만 적용됩니다. Windows 8의 경우에는 3-5단계를 참조하세요.

사용자가 페이지에서 이동하면 AppBar에서 명령을 제거합니다.

  1. Click 이벤트 처리기를 등록 해제합니다.
  2. CommandBar에서 AppBarButton을 제거합니다.
  3. CommandBar에서 AppBarSeparator를 제거합니다.

void Page1_Unloaded(object sender, RoutedEventArgs e)
{
    CommandBar bottomCommandBar = this.BottomAppBar as CommandBar;
    if (bottomCommandBar != null)
    {
        AppBarButton b = bottomCommandBar.PrimaryCommands[0] as AppBarButton;
        b.Click -= AppBarButton_Click;

        // Remove AppBarButton.
        bottomCommandBar.PrimaryCommands.RemoveAt(0);
        // Remove AppBarSeparator.
        bottomCommandBar.PrimaryCommands.RemoveAt(0);
    }
}

단계 3: 명령 표시 및 숨기기(Windows 8)

Windows 8:  이 단계는 Windows 8에만 적용됩니다. Windows 8.1의 경우에는 1-2단계를 참조하세요. Windows 8.1에서 AppBarButtonStyle은 더 이상 사용되지 않으며 AppBarButton 컨트롤로 대체되었습니다.

AppBar에서 명령 그룹을 표시하고 숨기기 위해 Visibility 속성을 사용할 수 있습니다. 일반적으로 이 방법으로 페이지에서 사용자 선택에 따라 상황별 명령을 제어합니다.

  1. 앱에 앱 바를 추가합니다. 자세한 내용은 빠른 시작: 앱 바 추가를 참조하세요.
  2. 표시하고 숨길 명령 또는 그룹을 명명합니다.
    1. 개별 명령을 표시하고 숨기려면 해당 명령 단추를 명명합니다.
    2. 명령 그룹을 표시하고 숨기려면 명령 그룹을 명명된 컨테이너에 지정합니다.

    이 예제에서는 "Pin" 및 "Unpin" 명령을 pinCommandsStackPanel에 지정합니다. 처음에는 pinCommands 그룹이 축소되어 있습니다.

    
    <AppBar IsOpen="True" IsSticky="True">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <StackPanel x:Name="pinCommands" Orientation="Horizontal"
                            Visibility="Collapsed">
                    <Button Style="{StaticResource UnpinAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Button Style="{StaticResource PinAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Rectangle Height="50" Width="2" Fill="LightGray"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Style="{StaticResource FavoriteAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Button Style="{StaticResource SearchAppBarButtonStyle}" 
                            Click="Button_Click"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </AppBar>
    
    
    
  3. 명명된 명령 또는 컨테이너를 표시하거나 숨기려면 해당 Visibility 속성을 설정합니다.

    여기에서는 ToggleSwitch를 사용하여 pinCommands 그룹을 표시하고 숨깁니다. 일반 앱에서는 사용자 선택 또는 앱의 다른 일부 조작에 따라 명령을 표시하고 숨길 수 있습니다.

    
    private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
    {
        ToggleSwitch toggle = (ToggleSwitch)sender;
    
        if (toggle.IsOn == true)
        {
            pinCommands.Visibility = Visibility.Visible;
        }
        else
        {
            pinCommands.Visibility = Visibility.Collapsed;
        }
    }
    
    
    

명령을 숨긴 앱 바의 모양은 다음과 같습니다.

명령을 숨긴 앱 바

명령을 표시한 앱 바의 모양은 다음과 같습니다.

명령을 표시한 앱 바

단계 4: 앱 바에 명령 단추 추가(Windows 8)

Windows 8:  이 단계는 Windows 8에만 적용됩니다. Windows 8.1의 경우에는 1-2단계를 참조하세요. Windows 8.1에서 AppBarButtonStyle은 더 이상 사용되지 않으며 AppBarButton 컨트롤로 대체되었습니다.

코드 숨김 파일에서 AppBar에 명령을 추가할 수 있습니다. 일반적으로 이러한 작업은 여러 페이지에서 AppBar를 공유하며 한 페이지에만 적용되는 명령이 있는 경우 수행합니다. 명령이 적용되는 페이지의 코드에 명령을 추가하면 해당 페이지의 요소에 명령을 연결하기가 더 쉽습니다. 여기에서는 사용자가 페이지를 탐색하면 공유 AppBar에 명령을 추가하고 페이지에서 이동하면 제거합니다.

앱 바 공유에 대한 자세한 내용은 여러 페이지에서 앱 바를 공유하는 방법XAML AppBar 컨트롤 샘플을 참조하세요.

사용자가 해당 페이지로 이동하면 명령을 AppBar에 추가합니다.

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

    여기서는 XAML로 정의된 단일 단추가 있는 아래쪽 앱 바를 추가합니다.

    
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" IsSticky="True">
            <Grid>
                <StackPanel x:Name="rightPanel" 
                            Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource AppBarButtonStyle}" 
                            Content="&#xE174;" 
                            AutomationProperties.Name="Sort"
                            AutomationProperties.AutomationId="SortButton"
                            Click="SortMenuButton_Click" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    
    
    
  2. 사용자가 해당 페이지로 이동하면 명령 단추를 만들어 AppBar에 추가합니다.
  3. 앱 바 단추 스타일을 아래에 적용합니다.
  4. Click 이벤트 처리기를 등록합니다.
  5. AppBar에 단추를 추가합니다.

Button addButton = null;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add a button to an AppBar.
   
    if (rightPanel != null)
    {
        // Create the button to add
        addButton = new Button();

        // Apply the button style so that it looks like an AppBar button
        addButton.Style = (Style)App.Current.Resources["AddAppBarButtonStyle"];

        // Add the Click handler for the new button
        addButton.Click += Button_Click;

        // Add the button to the AppBar
        rightPanel.Children.Add(addButton);
    }
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Perform action here.
}


단계 5: 앱 바에서 명령 단추 제거(Windows 8)

Windows 8:  이 단계는 Windows 8에만 적용됩니다. Windows 8.1의 경우에는 1-2단계를 참조하세요. Windows 8.1에서 AppBarButtonStyle은 더 이상 사용되지 않으며 AppBarButton 컨트롤로 대체되었습니다.

사용자가 페이지에서 이동하면 AppBar에서 명령을 제거합니다.

  1. Click 이벤트 처리기를 등록 해제합니다.
  2. AppBar에서 단추를 제거합니다.

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (rightPanel != null)
    {
        // Unhook the Click event handler for the button
        addButton.Click -= Button_Click;

        // Remove the button from the AppBar
        rightPanel.Children.Remove(addButton);
    }
}


관련 항목

XAML AppBar 컨트롤 샘플
빠른 시작: 앱 바 추가
AppBar

 

 

표시:
© 2014 Microsoft. All rights reserved.