여러 다른 크기로 앱 바를 사용하는 방법

Applies to Windows only

기본적으로 앱 바 단추는 너비가 100DIP(Device-Independent Pixel)이며 해당 아이콘 아래에 텍스트 레이블이 있습니다. 사용자가 앱의 너비를 더 좁히면 명령을 표시할 만한 가로 공간이 충분하지 않습니다. 앱 바에 단추가 많은 경우 약간 조정하여 단추가 더 좁은 너비에서 올바르게 표시되도록 해야 합니다.

참고  앱 바 콘텐츠가 CommandBar 컨트롤에서 호스트되는 경우 CommandBar는 자식 앱 바 단추 컨트롤의 크기 조정 및 레이아웃을 처리합니다. 이 자습서에 설명된 기술은 앱 바 콘텐츠가 AppBar 컨트롤에서 호스트되는 경우에만 필요합니다.

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

알아야 할 사항

기술

사전 요구 사항

지침

단계 1: 레이블을 숨기고 너비 줄이기(Windows 8.1)

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

다음 예제의 코드에서는 XAML(Extensible Application Markup Language)에 정의된 AppBar를 사용합니다.


<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <AppBarButton Label="Save" Icon="Save"/>
                <AppBarButton Label="Discard" Icon="Delete"/>
                <AppBarButton Label="Edit" Icon="Edit"/>
                <AppBarButton Label="Undo" Icon="Undo"/>
                <AppBarButton Label="Redo" Icon="Redo"/>
            </StackPanel>
            
            <StackPanel x:Name="rightAppBarPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <AppBarButton Label="Skip Back" Icon="Previous"/>
                <AppBarButton Label="Skip Ahead" Icon="Next"/>
                <AppBarButton Label="Play" Icon="Play"/>
                <AppBarButton Label="Pause" Icon="Pause"/>
                <AppBarButton Label="Stop" Icon="Stop"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

이 앱 바는 너비가 1024픽셀인 앱에서 다음과 같이 표시됩니다.

단추가 10개 있는 앱 바

앱 너비가 320픽셀일 경우 앱 바는 기본적으로 다음과 같이 표시됩니다.

사이드 뷰의 단추가 10개인 앱 바

앱 바 단추 컨트롤(AppBarButtonAppBarToggleButton)은 일반 및 컴팩트의 두 가지 크기로 제공됩니다. 기본적으로 텍스트 레이블과 전체 여백이 포함됩니다. IsCompact 속성을 true로 설정하면 텍스트 레이블이 숨겨지고 단추 주위의 여백이 줄어듭니다. 또한 AppBarSeparator는 여백이 줄어든 컴팩트 상태가 됩니다. 앱 바 단추가 더 적은 공간을 사용하도록 하려면 IsCompact 속성을 true로 설정합니다.

앱 바 단추가 CommandBar에서 호스트되지 않을 경우에는 코드에서 해당 IsCompact 속성을 관리해야 합니다. 이렇게 하려면 페이지의 SizeChanged 이벤트를 수신 대기한 다음 각 앱 바 단추의 IsCompact 속성을 새 창 크기에 적절하게 설정합니다.

JJ662742.wedge(ko-kr,WIN.10).gif단추 크기를 조정하려면

  1. 페이지의 SizeChanged 이벤트를 등록합니다.
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        this.SizeChanged += MainPage_SizeChanged;
    }
    
    
    
  2. SizeChanged 이벤트 처리기에서 페이지 너비가 변경되었는지 확인합니다. 변경된 경우 AppBar의 레이아웃을 업데이트합니다.
    
    void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width != e.PreviousSize.Width)
        {
            UpdateBottomAppBarLayout(e.NewSize.Width);
        }
    }
    
    
  3. AppBar 레이아웃을 업데이트하려면 페이지 너비에 따라 각 단추의 IsCompact 속성을 설정합니다. 이 예제에서는 10개의 AppBarButton이 있고 각각 너비가 100DIP이므로 페이지 너비가 1000보다 작은 경우 단추를 컴팩트하게 만들어야 합니다.
    
    private void UpdateAppBarButtons(double newWidth)
    {
        if (newWidth < 1000)
        {
            ToggleIsCompact(true);
        }
        else
        {
            ToggleIsCompact(false);
        }
    }
    
    

    고정된 수의 단추가 있는 경우 코드에서 또는 VisualStateManager를 사용하여 각 단추에 대해 개별적으로 IsCompact 속성을 설정할 수 있습니다. 또는 여기 표시된 대로 단추 사이를 순환할 수 있습니다. 이 코드에서는 앱 바가 단추를 호스트하는 추가 Panel이 포함된 루트 Panel의 레이아웃을 사용한다고 가정합니다.

    
    private void ToggleIsCompact(bool isCompact)
    {
        // Get the app bar's root Panel.
        Panel root = bottomAppBar.Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                foreach (ICommandBarElement child in panel.Children)
                {
                    child.IsCompact = isCompact;
                }
            }
        }
    }
    
    

이제 사용자가 앱 너비를 좁히면 단추 크기가 조정되고 앱 바가 다음과 같이 표시됩니다.

너비가 좁은 앱의 앱 바

단계 2: 단추 다시 정렬 및 숨기기(Windows 8.1)

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

참고  이 단계에서는 이전 단계에서 설명한 대로 앱 바 단추가 컴팩트 상태이며 텍스트 레이블이 없고 너비가 줄었다고 가정합니다.

너비가 가장 좁을 때 앱 바는 한 행에 5개의 AppBarButton만 표시할 수 있습니다. 앱 바에 5개 이상의 단추가 있으면 2행에 단추를 정렬하거나, 일부 단추를 숨기거나, 둘 다를 수행해야 합니다.

JJ662742.wedge(ko-kr,WIN.10).gif단추를 2행으로 이동하려면

  1. 단추를 2행에 다시 정렬하려면 앱 바에 다음과 같은 레이아웃을 사용합니다. 행이 2개이고 패널(일반적으로 StackPanel)이 2개인 루트 Grid를 사용하여 단추를 유지합니다.
    
    <AppBar>
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                    
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <!-- Buttons -- >
            </StackPanel>
                    
            <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" 
                        HorizontalAlignment="Right">
                <!-- Buttons -- >
            </StackPanel>
        </Grid>
    </AppBar>
    
    
  2. 앱 너비가 너무 좁아서 한 행에 단추를 모두 표시할 수 없는 경우에는 rightAppBarPanel 요소의 Grid.Row 속성 값을 1로 변경하고 패널의 HorizontalAlignment 속성을 Left로 변경합니다.

    이렇게 하면 기본(오른쪽) 단추와 보조(왼쪽) 단추를 모두 표시해야 할 경우 유용합니다. 보조 명령을 표시할 필요가 없을 경우에는 다음에 표시된 대로 보조 명령을 숨길 수 있습니다.

    앱의 너비가 가장 좁은 상태일 때 오른쪽에 있는 단추가 아래쪽 행으로 이동합니다. 앱 바는 다음과 같이 표시됩니다.

    사이드 뷰에 2개 행이 있는 앱 바

    이 예제에서는 10개의 AppBarButton이 있고 컴팩트 상태일 때 각각의 너비는 60DIP입니다. 페이지 너비가 600보다 작을 경우 버튼을 컴팩트하게 만들고 2개 행으로 이동해야 합니다.

    
    private void UpdateBottomAppBarLayout(double newWidth)
    {
        if (newWidth < 600)
        {
            ToggleIsCompact(true);
            rightAppBarPanel.SetValue(Grid.RowProperty, 1);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Left);
        }
        else if (newWidth < 1000)
        {
            ToggleIsCompact(true);
            rightAppBarPanel.SetValue(Grid.RowProperty, 0);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);
        }
        else
        {
            ToggleIsCompact(false);
            rightAppBarPanel.SetValue(Grid.RowProperty, 0);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);
        }
    }
    
    

JJ662742.wedge(ko-kr,WIN.10).gif단추를 숨기려면

  • 앱 너비가 너무 좁아서 한 행에 단추를 모두 표시할 수 없는 경우에는 leftAppBarPanel 요소의 Visibility 속성 값을 Collapsed로 변경합니다.

    앱의 너비가 가장 좁은 상태일 때 왼쪽 패널의 단추가 숨겨집니다. 앱 바는 다음과 같이 표시됩니다.

    사이드 뷰에 1개 행이 있는 앱 바

    이 예제에서는 10개의 AppBarButton이 있고 컴팩트 상태일 때 각각의 너비는 60DIP입니다. 페이지 너비가 600보다 작을 경우 버튼을 컴팩트하게 만들고 보조 명령을 숨겨야 합니다.

    
    private void UpdateBottomAppBarLayout(double newWidth)
    {
        if (newWidth < 600)
        {
            ToggleIsCompact(true);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Collapsed);
    
        }
        else if (newWidth < 1000)
        {
            ToggleIsCompact(true);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Visible);
        }
        else
        {
            ToggleIsCompact(false);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Visible);
        }
    }
    
    

단계 3: 레이블을 숨기고 너비 줄이기(Windows 8)

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

다음 예제의 코드에서는 XAML에 정의된 AppBar를 사용합니다.

참고  여기에 표시된 "AppBarButtonStyle" 리소스를 사용하려면 StandardStyles.xaml 파일을 편집하여 사용할 수 있도록 해야 합니다. 자세한 내용은 빠른 시작: 앱 바 단추 추가를 참조하세요.


<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True" 
            Loaded="appBar_Loaded" Unloaded="appBar_Unloaded">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <Button Style="{StaticResource SaveAppBarButtonStyle}"/>
                <Button Style="{StaticResource DiscardAppBarButtonStyle}"/>
                <Button Style="{StaticResource EditAppBarButtonStyle}"/>
                <Button Style="{StaticResource UndoAppBarButtonStyle}"/>
                <Button Style="{StaticResource RedoAppBarButtonStyle}"/>
            </StackPanel>
            
            <StackPanel x:Name="rightAppBarPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource SkipBackAppBarButtonStyle}"/>
                <Button Style="{StaticResource SkipAheadAppBarButtonStyle}"/>
                <Button Style="{StaticResource PlayAppBarButtonStyle}"/>
                <Button Style="{StaticResource PauseAppBarButtonStyle}"/>
                <Button Style="{StaticResource StopAppBarButtonStyle}"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

이 앱 바는 너비가 1024픽셀인 앱에서 다음과 같이 표시됩니다.

단추가 10개 있는 앱 바

사이드 앱일 경우 앱 바는 기본적으로 다음과 같이 표시됩니다.

사이드 뷰의 단추가 10개인 앱 바

앱 바 단추에서 더 적은 공간을 사용하도록 하기 위해 AppBarButtonStyle 기본 StyleSnappedFullScreenPortrait 뷰에서 단추의 레이블을 숨기고 너비를 줄이는 VisualState가 포함되어 있습니다. VisualStateAppBarButtonStyle 리소스에 정의되지만 기본적으로 컨트롤은 앱의 보기 상태에 대해 알지 못합니다. 앱의 보기 상태에 따라 앱 바 단추가 상태를 변경하도록 하려면 Button에서 앱 보기 상태 변경을 인식하도록 하는 추가 코드를 제공해야 합니다. 제공하는 코드는 앱 바를 호스트하는 페이지가 LayoutAwarePage 클래스에서 파생되었는지 여부에 따라 달라집니다.

참고  빈 페이지가 아닌 Microsoft Visual Studio 페이지 템플릿은 LayoutAwarePage 클래스에서 파생됩니다. LayoutAwarePage는 보기 상태 관리, 기본 탐색 및 앱 세션 상태 관리와 같은 Windows 스토어 앱 개발의 중요한 기능을 사용하도록 설정하는 Page의 구현입니다. 자세한 내용은 C#, VB 및 C++ 항목 템플릿을 참조하세요.

LayoutAwarePage에서 모든 컨트롤은 StartLayoutUpdates를 호출하여 앱 보기 상태 변경에 해당하는 시각적 상태 변경을 받도록 등록할 수 있습니다. 즉, 앱 보기 상태가 Snapped로 변경되면 앱 바 단추가 Snapped 보기 상태로 전환될 수 있습니다.

JJ662742.wedge(ko-kr,WIN.10).gifLayoutAwarePage에서 단추의 크기를 조정하려면

  1. AppBar에 1개 또는 2개의 명령만 있는 경우 다음과 같이 LoadedUnloaded 이벤트에서 개별적으로 등록 및 등록 취소할 수 있습니다.
    
    <Button Style="{StaticResource PlayAppBarButtonStyle}"
            Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"/>
    
    
  2. 앱 바에 단추가 더 많은 경우에는 다음과 같이 앱 바가 로드되고 언로드될 때 코드에서 모두 등록하고 등록 취소하는 것이 좋습니다.

    다음 코드에서는 앱 바가 단추를 호스트하는 추가 Panel이 포함된 루트 Panel이 있는 레이아웃을 사용한다고 가정합니다. AppBar가 로드될 때 상태 변경을 받도록 각 단추를 등록하고 앱 바가 언로드될 때 등록 취소합니다.

    LoadedUnloaded 이벤트는 앞에 표시된 AppBar XAML에 등록되어 있습니다.

    
    
    private void appBar_Loaded(object sender, RoutedEventArgs e)
    {
        // Get the app bar's root Panel.
        Panel root = ((AppBar)sender).Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and register for layout updates.
                foreach (UIElement child in panel.Children)
                {
                    base.StartLayoutUpdates(child, new RoutedEventArgs());
                }
            }
        }
    }
    
    private void appBar_Unloaded(object sender, RoutedEventArgs e)
    {
        // Get the app bar's root Panel.
        Panel root = ((AppBar)sender).Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and unregister layout updates.
                foreach (UIElement child in panel.Children)
                {
                    base.StopLayoutUpdates(child, new RoutedEventArgs());
                }
            }
        }
    }
    
    

앱 바를 호스트하는 페이지가 LayoutAwarePage에서 파생되지 않은 경우 페이지에서 Button의 보기 상태를 변경하는 기능을 제공해야 합니다. 이렇게 하려면 앱 보기 상태 변경을 수신 대기한 다음 앱의 보기 상태가 변경될 때 각 앱 바 단추에 대해 ViewStateManager.GoToState를 호출합니다.

JJ662742.wedge(ko-kr,WIN.10).gif빈 페이지에서 단추의 크기를 조정하려면

  1. 창의 SizeChanged 이벤트를 등록합니다.
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        Window.Current.SizeChanged += Current_SizeChanged;
    }
    
    
    
  2. SizeChanged 이벤트 처리기에서 앱 바가 열려 있는지 확인합니다. 열려 있으면 각 단추의 보기 상태를 업데이트합니다.

    다음 코드에서는 앱 바가 열려 있는 동안 앱 보기 상태가 변경되는 경우를 처리합니다.

    
    void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        if (bottomAppBar.IsOpen == true)
        {
            UpdateAppBarButtonsViewState();
        }
    }
    
    
  3. AppBarLoaded 이벤트에 대한 처리기를 추가합니다. Loaded 이벤트 처리기에서 각 단추의 보기 상태를 업데이트합니다.

    다음 코드에서는 앱 보기 상태가 변경된 후 앱 바가 열린 경우를 처리합니다.

    Loaded 이벤트는 앞에 표시된 AppBar XAML에 등록되어 있습니다.

    
    private void bottomAppBar_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateAppBarButtonsViewState();
    }
    
    
  4. 각 단추의 보기 상태를 업데이트하려면 VisualStateManager.GoToState를 호출하고 앱의 현재 보기 상태를 전달합니다.

    앱 바에 1개 또는 2개의 명령만 있는 경우 다음과 같이 이름을 지정하고 해당 명령에서 개별적으로 GoToState를 호출할 수 있습니다.

    
    private void UpdateAppBarButtonsViewState()
    {
        string viewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString();
    
        VisualStateManager.GoToState(playButton, viewState, true);
        VisualStateManager.GoToState(stopButton, viewState, true);
    }
    
    

    앱 바에 단추가 더 많은 경우에는 다음과 같이 반복하는 것이 좋습니다. 다음 코드에서는 앱 바가 단추를 호스트하는 추가 Panel이 포함된 루트 Panel가 있는 레이아웃을 사용한다고 가정합니다.

    
    private void UpdateAppBarButtonViewState()
    {
        string viewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString();
    
        // Get the app bar's root Panel.
        Panel root = bottomAppBar.Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and update its state if 
               // it's a Button or ToggleButton.
                foreach (UIElement child in panel.Children)
                {
                    if (child.GetType() == typeof(Button) || 
                        child.GetType() == typeof(ToggleButton))
                    {
                        VisualStateManager.GoToState((ButtonBase)child, viewState, true);
                    }
                }
            }
        }
    }
    
    

이제 앱이 세로 방향으로 회전되고 단추 크기가 조정되면 앱 바가 다음과 같이 표시됩니다.

세로 뷰의 앱 바

단계 4: 단추 다시 정렬 및 숨기기(Windows 8)

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

참고  이 단계에서는 이전 단계에서 설명한 대로 앱 바 단추가 Snapped VisualState에 있으며 텍스트 레이블이 없고 너비가 줄었다고 가정합니다.

Snapped 뷰에서 앱 바의 너비는 한 행에 단추 5개만 표시할 만큼입니다. 앱 바에 5개 이상의 단추가 있으면 2행에 단추를 정렬하거나, 일부 단추를 숨기거나, 둘 다를 수행해야 합니다.

JJ662742.wedge(ko-kr,WIN.10).gif단추를 2행으로 이동하려면

  1. 단추를 2행에 다시 정렬하려면 앱 바에 다음과 같은 레이아웃을 사용합니다. 행이 2개이고 패널(일반적으로 StackPanel)이 2개인 루트 Grid를 사용하여 단추를 유지합니다.
    
    <AppBar>
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                    
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <!-- Buttons -- >
            </StackPanel>
                    
            <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right">
                <!-- Buttons -- >
            </StackPanel>
        </Grid>
    </AppBar>
    
    
  2. Snapped VisualState에서 rightAppBarPanel 요소의 Grid.Row 속성 값을 1로 변경하고 패널의 HorizontalAlignment 속성을 Left로 변경합니다.

    사이드 앱일 경우 오른쪽에 있는 단추가 아래쪽 행으로 이동합니다. 앱 바는 다음과 같이 표시됩니다.

    사이드 뷰에 2개 행이 있는 앱 바

    
    <VisualStateManager.VisualStateGroups>
        ...
            <VisualState x:Name="Snapped">
                <Storyboard>
                    ... 
    
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" 
                                                   Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" 
                                           Storyboard.TargetProperty="HorizontalAlignment">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                    </ObjectAnimationUsingKeyFrames>
                    ...
                </Storyboard>
            </VisualState>
        ...
    </VisualStateManager.VisualStateGroups>
    
    

JJ662742.wedge(ko-kr,WIN.10).gif단추를 숨기려면

  • Snapped VisualState에서 leftAppBarPanel 요소의 Visibility 속성 값을 Collapsed로 변경합니다.

    사이드 앱일 경우 왼쪽 패널의 단추가 숨겨집니다. 앱 바는 다음과 같이 표시됩니다.

    사이드 뷰에 1개 행이 있는 앱 바

    
    <VisualStateManager.VisualStateGroups>
        ...
            <VisualState x:Name="Snapped">
                <Storyboard>
                    ...
    
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="leftAppBarPanel" 
                                                   Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        ...
    </VisualStateManager.VisualStateGroups>
    
    

설명

표시된 대로 전체 패널을 숨기거나 동일한 방식으로 개별 단추를 숨기면 Snapped 뷰에서 덜 중요한 명령을 숨길 수 있습니다. 개별 단추를 숨기려면 이름을 지정하여 VisualStateManager에서 참조할 수 있도록 해야 합니다.

 

 

표시:
© 2014 Microsoft