Como usar uma barra de aplicativos em diferentes tamanhos

Como usar uma barra de aplicativos em diferentes tamanhos

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Por padrão, um botão da barra de aplicativos tem 100 DIPs (pixels independentes de dispositivo) de largura e um rótulo de texto abaixo de seu ícone. Quando um usuário torna um aplicativo mais estreito, não há muito espaço horizontal para mostrar os comandos. Se você tem mais do que alguns botões na barra de aplicativos, é preciso fazer alguns ajustes para que eles sejam mostrados corretamente nesse espaço mais estreito.

Observação  Se o conteúdo da barra de aplicativos está hospedado em um controle CommandBar, a CommandBar cuida do layout e do redimensionamento dos controles filho dos botões da barra de aplicativos. As técnicas neste tutorial são necessárias apenas quando o conteúdo da barra de aplicativos está hospedado em um controle AppBar.
 

Mapa: como este tópico está relacionado aos outros? Veja:

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Etapa 1: Ocultar rótulos e reduzir largura (Windows 8.1)

Windows 8.1:  Esta etapa é válida apenas para o Windows 8.1. Para o Windows 8, veja a etapa 3.

O código nestes exemplos usa a AppBar definida nesta linguagem XAML.


<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>

Pela barra de aplicativos, parece que o aplicativo tem 1024 pixels de largura.

Uma barra de aplicativos com dez botões

Quando a largura do aplicativo é de 320 pixels, por padrão, a barra de aplicativos fica com esta aparência.

Uma barra de aplicativos com dez botões no modo de exibição ajustado

Os controles dos botões da barra de aplicativos (AppBarButton e AppBarToggleButton) têm dois tamanhos: normal e compacto. Por padrão, eles têm um rótulo de texto e preenchimento total. Quando a propriedade IsCompact é definida como true, o rótulo de texto fica oculto e o preenchimento ao redor dos botões é reduzido. O AppBarSeparator também tem um estado compacto com preenchimento reduzido. Para que os botões da barra de aplicativos usem menos espaço, defina a propriedade IsCompact como true.

Quando um botão da barra de aplicativos não está hospedado em uma CommandBar, gerencie sua propriedade IsCompact em seu código. Para isso, escute o evento SizeChanged da página e defina a propriedade IsCompact de cada botão da barra de aplicativos de acordo com o novo tamanho da janela.

JJ662742.wedge(pt-br,WIN.10).gifPara redimensionar botões

  1. Registre o evento SizeChanged da página.
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        this.SizeChanged += MainPage_SizeChanged;
    }
    
    
    
  2. No manipulador de eventos SizeChanged, verifique se a largura da página foi alterada. Em caso afirmativo, atualize o layout de AppBar.
    
    void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width != e.PreviousSize.Width)
        {
            UpdateBottomAppBarLayout(e.NewSize.Width);
        }
    }
    
    
  3. Para atualizar o layout de AppBar, defina a propriedade IsCompact de cada botão de acordo com a largura da página. Neste exemplo, há 10 AppBarButtons, cada um com 100 DIPs de largura, portanto, se a largura da página for inferior a 1000, você terá de compactar os botões.
    
    private void UpdateAppBarButtons(double newWidth)
    {
        if (newWidth < 1000)
        {
            ToggleIsCompact(true);
        }
        else
        {
            ToggleIsCompact(false);
        }
    }
    
    

    Se você tem um número fixo de botões, pode definir a propriedade IsCompact individualmente em cada um no código ou usando VisualStateManager. Se preferir, você poderá executar um loop neles, como mostrado aqui. Esse código considera que a barra de aplicativos usa um layout com um Panel raiz que inclui outros Panels para hospedar os botões.

    
    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;
                }
            }
        }
    }
    
    

Agora, quando o usuário tornar o aplicativo mais estreito, os botões serão redimensionados e a barra de aplicativos terá esta aparência.

Barra de aplicativos em aplicativo estreito

Etapa 2: Reorganizar e ocultar botões (Windows 8.1)

Windows 8.1:  Esta etapa é válida apenas para o Windows 8.1. Para o Windows 8, veja a etapa 4.

Observação  Nesta etapa, nós pressupomos que os botões da barra de aplicativos estejam no estado compacto, conforme descrito na etapa anterior, sem nenhum rótulo de texto e com a largura reduzida.
 
Em sua forma mais estreita, a barra de aplicativos é larga o suficiente para mostrar apenas cinco AppBarButton de uma vez. Se você tiver mais de cinco botões na barra de aplicativos, será necessário organizá-los em duas linhas, ocultar alguns botões ou fazer essas duas coisas.

JJ662742.wedge(pt-br,WIN.10).gifPara organizar botões em duas linhas

  1. Para reorganizar botões em duas linhas, use um layout como este para a barra de aplicativos. Use uma Grid raiz com duas linhas e dois painéis (normalmente StackPanels) para incluir os botões.
    
    <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. Quando o aplicativo ficar muito estreito para mostrar todos os botões de uma vez, mude o valor da propriedade Grid.Row no elemento rightAppBarPanel para 1 e mude a propriedade HorizontalAlignment do painel para Left.

    Isso é útil quando você precisa manter ambos os botões principal (direita) e secundário (esquerda) visíveis. Se você não precisa manter os comandos secundários visíveis, pode ocultá-los, como mostrado a seguir.

    Quando o aplicativo estiver em sua forma mais estreita, os botões à direita serão movidos para a linha de baixo. A barra de aplicativos terá a seguinte aparência.

    Uma barra de aplicativos no modo de exibição ajustado com duas linhas

    Neste exemplo, há 10 AppBarButtons, cada um com 60 DIPs de largura quando compactado. Se a largura da página for inferior a 600, você terá de compactar os botões e movê-los para duas linhas.

    
    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(pt-br,WIN.10).gifPara ocultar botões

  • Quando o aplicativo ficar muito estreito para mostrar todos os botões de uma vez, mude o valor da propriedade Visibility no elemento leftAppBarPanel para Collapsed.

    Quando o aplicativo estiver em sua forma mais estreita, os botões no painel esquerdo ficarão ocultos. A barra de aplicativos terá a seguinte aparência.

    Uma barra de aplicativos no modo de exibição ajustado com uma linha

    Neste exemplo, há 10 AppBarButtons, cada um com 60 DIPs de largura quando compactado. Se a largura da página for inferior a 600, você terá de compactar os botões e ocultar os comandos secundários.

    
    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);
        }
    }
    
    

Etapa 3: Ocultar rótulos e reduzir largura (Windows 8)

Windows 8:  Esta etapa é válida apenas para o Windows 8. Para o Windows 8.1, veja a etapa 1. No Windows 8.1, o AppBarButtonStyle foi preterido e substituído pelos controles AppBarButton.

O código nestes exemplos usa a AppBar definida nesta linguagem XAML.

Observação  Para usar os recursos de "AppBarButtonStyle" mostrados aqui, você deve editar o arquivo StandardStyles.xaml para disponibilizá-los. Para saber mais, veja Guia de início rápido: adicionando botões à barra de aplicativos.
 

<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>

Pela barra de aplicativos, parece que o aplicativo tem 1024 pixels de largura.

Uma barra de aplicativos com dez botões

Quando o aplicativo está ajustado, a barra de aplicativos fica deste jeito por padrão.

Uma barra de aplicativos com dez botões no modo de exibição ajustado

Para fazer com que os botões da barra de aplicativos usem menos espaço, a AppBarButtonStyle base Style inclui VisualStates que ocultam o rótulo do botão e reduzem sua largura nos modos de exibição Snapped e FullScreenPortrait. Os VisualStates são definidos no recurso AppBarButtonStyle, mas, por padrão, os controles não conhecem o estado da exibição do aplicativo. Para fazer com que o botão da barra de aplicativos mude de estado com base no estado da exibição do aplicativo, você deve fornecer códigos adicionais para que o Button reconheça as mudanças de estado da exibição do aplicativo. O código fornecido depende da página que hospeda a barra de aplicativos (se ela deriva ou não da classe LayoutAwarePage).

Observação  Os modelos de página do Microsoft Visual Studio (exceto Página em branco) derivam da classe LayoutAwarePage. LayoutAwarePage é uma implementação de Page que habilita funcionalidades importantes para o desenvolvimento de aplicativo da Windows Store, como o gerenciamento de estados de exibição, navegação básica e gerenciamento de estados de sessão de aplicativos. Para saber mais, veja modelos de item em C#, VB e C++.
 

Em uma LayoutAwarePage, qualquer controle pode invocar StartLayoutUpdates para registrar o recebimento de mudanças no estado visual que correspondem às mudanças do estado da exibição do aplicativo. Isso significa que um botão da barra de aplicativos pode ir para o estado da exibição Snapped quando o estado da exibição do aplicativo muda para Snapped.

JJ662742.wedge(pt-br,WIN.10).gifPara redimensionar botões em LayoutAwarePage

  1. Se a AppBar tem apenas um ou dois comandos, você pode registrar e cancelar o registro deles individualmente em seus eventos Loaded e Unloaded, da seguinte forma.
    
    <Button Style="{StaticResource PlayAppBarButtonStyle}"
            Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"/>
    
    
  2. Se a barra de aplicativos tem mais botões, a melhor opção é registrar e cancelar o registro de todos eles no código quando a barra de aplicativos for carregada e descarregada, conforme mostrado aqui.

    Este código pressupõe que a barra de aplicativos use um layout com um Panel raiz que inclui outros Panels para hospedar os botões. Cada botão é registrado para receber mudanças de estado quando a AppBar é carregada; e o registro é cancelado quando a barra de aplicativos é descarregada.

    Os eventos Loaded e Unloaded são registrados na linguagem XAML AppBar mostrada anteriormente.

    
    
    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());
                }
            }
        }
    }
    
    

Se a página que hospeda a barra de aplicativos não derivar de LayoutAwarePage, você deverá fornecer uma funcionalidade na página para alterar o estado da exibição do Button. Para isso, escute as alterações de estado da exibição do aplicativo e chame ViewStateManager.GoToState para cada botão da barra de aplicativos quando o estado da exibição do aplicativo mudar.

JJ662742.wedge(pt-br,WIN.10).gifPara redimensionar botões em uma página em branco

  1. Registre o evento SizeChanged da janela.
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        Window.Current.SizeChanged += Current_SizeChanged;
    }
    
    
    
  2. No manipulador do evento SizeChanged, confira se a barra de aplicativos está aberta. Se estiver, atualize o estado da exibição de cada botão.

    Este código cuida dos casos em que o estado da exibição do aplicativo muda enquanto a barra de aplicativos está aberta.

    
    void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        if (bottomAppBar.IsOpen == true)
        {
            UpdateAppBarButtonsViewState();
        }
    }
    
    
  3. Adicione um manipulador para o evento Loaded da AppBar. No manipulador do evento Loaded, atualize o estado da exibição de cada botão.

    Este código cuida dos casos em que a barra de aplicativos é aberta após a alteração do estado da exibição do aplicativo.

    Esse evento Loaded é registrado na linguagem XAML da AppBar mostrada anteriormente.

    
    private void bottomAppBar_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateAppBarButtonsViewState();
    }
    
    
  4. Para atualizar o estado da exibição de cada botão, chame VisualStateManager.GoToState e passe o estado da exibição atual do aplicativo.

    Se a barra de aplicativos tiver apenas um ou dois comandos, você poderá nomeá-los e chamar GoToState para eles individualmente, deste modo.

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

    Se a barra de aplicativos tiver mais botões, a melhor opção será usar um layout com um Panel raiz que inclui outros Panels para hospedar os botões.

    
    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);
                    }
                }
            }
        }
    }
    
    

Quando o aplicativo é girado para a orientação retrato e os botões são redimensionados, a barra de aplicativos fica assim.

Uma barra de aplicativos no modo de exibição retrato

Etapa 4: Reorganizar e ocultar botões (Windows 8)

Windows 8:  Esta etapa é válida apenas para o Windows 8. Para o Windows 8.1, veja a etapa 2. No Windows 8.1, o AppBarButtonStyle foi preterido e substituído pelos controles AppBarButton.

Observação  Nesta etapa, pressupomos que os botões da barra de aplicativos estejam no VisualState Snapped, conforme descrito na etapa anterior, sem rótulo de texto e com largura reduzida.
 
No modo de exibição Snapped, a largura da barra de aplicativos é suficiente para mostrar apenas cinco botões de uma vez. Se você tiver mais de cinco botões na barra de aplicativos, será necessário organizá-los em duas linhas, ocultar alguns botões ou fazer essas duas coisas.

JJ662742.wedge(pt-br,WIN.10).gifPara organizar botões em duas linhas

  1. Para reorganizar botões em duas linhas, use um layout como este para a barra de aplicativos. Use uma Grid raiz com duas linhas e dois painéis (normalmente StackPanels) para manter os botões.
    
    <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. No VisualState Snapped, altere o valor da propriedade Grid.Row do elemento rightAppBarPanel para 1 e altere a propriedade HorizontalAlignment do painel para Left.

    Quando o aplicativo for ajustado, os botões à direita irão para a linha de baixo. A barra de aplicativos terá a seguinte aparência.

    Uma barra de aplicativos no modo de exibição ajustado com duas linhas

    
    <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(pt-br,WIN.10).gifPara ocultar botões

  • No VisualState Snapped, altere o valor da propriedade Visibility do elemento leftAppBarPanel para Collapsed.

    Quando o aplicativo é ajustado, os botões no painel esquerdo ficam ocultos. A barra de aplicativos terá a seguinte aparência.

    Uma barra de aplicativos no modo de exibição ajustado com uma linha

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

Comentários

Você pode ocultar comandos menos importantes no modo de exibição Snapped ocultando um painel inteiro (conforme mostrado) ou ocultando botões individuais do mesmo modo. Para ocultar um botão individual, você deve nomeá-lo de modo que possa referenciá-lo no VisualStateManager.

 

 

Mostrar:
© 2017 Microsoft