Exibição de dois painéis

O modo de exibição de dois painéis é um controle de layout que ajuda você a gerenciar a exibição de aplicativos que têm duas áreas distintas de conteúdo, como uma exibição de lista/detalhes.

Esse é o controle correto?

Use a exibição de dois painéis quando você tiver duas áreas distintas, mas relacionadas, de conteúdo e:

• O conteúdo deve reorganizar e redimensionar automaticamente para se ajustar melhor à janela.
• A área secundária do conteúdo deve mostrar/ocultar com base no espaço disponível.

Se você precisar exibir duas áreas de conteúdo, mas não precisar do redimensionamento e da reorganização fornecidos pelo modo de exibição de dois painéis, considere usar um modo de exibição dividida.

Para opções de navegação, use uma Visão de Navegação.

Como funciona

O modo de exibição de dois painéis tem dois painéis em que você coloca seu conteúdo. Ele ajusta o tamanho e a disposição dos painéis, dependendo do espaço disponível para a janela. Os layouts de painel possíveis são definidos pela enumeração TwoPaneViewMode :

Aplicativo em modo amplo.

Aplicativo no modo vertical.

Você configura o modo de exibição de dois painéis definindo o PanePriority para especificar qual painel é mostrado quando há espaço para apenas um painel. Em seguida, especifique se Pane1 é mostrado na parte superior ou inferior para janelas altas ou à esquerda ou à direita para janelas largas.

A exibição de dois painéis manipula o tamanho e a disposição dos painéis, mas você ainda precisa fazer com que o conteúdo dentro do painel se adapte às alterações de tamanho e orientação. Consulte Layouts responsivos com XAML e Painéis de layout para obter mais informações sobre como criar uma UI adaptável.

Criar uma exibição de dois painéis

Este XAML mostra como criar um elemento básico TwoPaneView.

<TwoPaneView>
    <TwoPaneView.Pane1>
        <Grid Background="{ThemeResource LayerFillColorDefaultBrush}">
            <TextBlock Text="Pane 1" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane1>

    <TwoPaneView.Pane2>
        <Grid Background="{ThemeResource LayerFillColorAltBrush}">
            <TextBlock Text="Pane 2" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane2>
</TwoPaneView>

O TwoPaneView não precisa ser o elemento raiz do layout da página. Na verdade, você geralmente o usará dentro de um controle NavigationView que fornece a navegação geral para seu aplicativo. O TwoPaneView adapta-se adequadamente, independentemente de onde ele esteja na árvore XAML.

Adicionar conteúdo aos painéis

Cada painel de uma visão de dois painéis pode conter um único XAML UIElement. Para adicionar conteúdo, você normalmente coloca um painel de layout XAML em cada painel e, em seguida, adiciona outros controles e conteúdo ao painel. Os painéis podem alterar o tamanho e alternar entre os modos largo e alto, portanto, você precisa garantir que o conteúdo em cada painel possa se adaptar a essas alterações. Consulte Layouts Responsivos com XAML e Painéis de Layout para obter mais informações sobre como criar uma interface do usuário adaptável.

Este exemplo cria a interface do usuário do aplicativo de imagens/informações simples mostrada anteriormente. O conteúdo pode ser mostrado em dois painéis ou combinado em um único painel, dependendo da quantidade de espaço disponível. (Quando há apenas espaço para um painel, você move o conteúdo do Painel2 para o Painel1 e permite que o usuário role para ver qualquer conteúdo oculto. Você verá o código para isso mais tarde na seção Responder ao modo de alterações .)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton x:Name="Share" Icon="Share" Label="Share" Click="Share_Click"/>
        <AppBarButton x:Name="Print" Icon="Print" Label="Print" Click="Print_Click"/>
    </CommandBar>

    <TwoPaneView
        x:Name="MyTwoPaneView"
        Grid.Row="1"
        MinWideModeWidth="959"
        MinTallModeHeight="863"
        ModeChanged="TwoPaneView_ModeChanged">

        <TwoPaneView.Pane1>
            <Grid x:Name="Pane1Root">
                <ScrollViewer>
                    <StackPanel x:Name="Pane1StackPanel">
                        <Image Source="Assets\LandscapeImage8.jpg"
                               VerticalAlignment="Top" HorizontalAlignment="Center"
                               Margin="16,0"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </TwoPaneView.Pane1>

        <TwoPaneView.Pane2
            <Grid x:Name="Pane2Root">
                <ScrollViewer x:Name="DetailsContent">
                    <StackPanel Padding="16">
                        <TextBlock Text="Mountain.jpg" MaxLines="1"
                                       Style="{ThemeResource HeaderTextBlockStyle}"/>
                        <TextBlock Text="Date Taken:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="8/29/2019 9:55am"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Dimensions:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="800x536"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Resolution:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="96 dpi"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Description:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
                                       Style="{ThemeResource SubtitleTextBlockStyle}"
                                       TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </TwoPaneView.Pane2>
    </TwoPaneView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TwoPaneViewStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Wide">
                <VisualState.Setters>
                    <Setter Target="MyTwoPaneView.Pane1Length"
                            Value="2*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Especificar qual painel exibir

Quando o modo de exibição de dois painéis só pode exibir um único painel, ele usa a propriedade PanePriority para determinar qual painel exibir. Por padrão, PanePriority é definido como Pane1. Veja como você pode definir essa propriedade em XAML ou em código.

<TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Dimensionamento do painel

O tamanho dos painéis é determinado pelas propriedades Pane1Length e Pane2Length . Eles usam valores GridLength que dão suporte ao dimensionamento auto e star (*). Consulte a seção propriedades layout de layouts responsivos com XAML para obter uma explicação do dimensionamento automático e de estrela.

Por padrão, Pane1Length é definido como Auto e ajusta automaticamente ao seu conteúdo. Pane2Length é definido como * e usa todo o espaço restante.

Painéis com dimensionamento padrão

Os valores padrão são úteis para um layout típico de lista/detalhes, onde você tem uma lista de itens em Pane1, e muitos detalhes em Pane2. No entanto, dependendo do conteúdo, talvez você prefira dividir o espaço de forma diferente. Aqui, Pane1Length é definido para 2* para que ele obtenha o dobro de espaço que Pane2.

<TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">

Painéis dimensionados 2* e *

Quando um painel está configurado para usar o dimensionamento automático, você pode controlar o tamanho definindo a largura e a altura do Panel que contém o conteúdo do painel. Nesse caso, talvez seja necessário manipular o ModeChanged evento e definir as restrições de altura e largura do conteúdo conforme apropriado para o modo atual.

Exibir no modo largo ou alto

Em uma única tela, o modo de exibição da visualização de dois painéis é determinado pelas propriedades MinWideModeWidth e MinTallModeHeight. Ambas as propriedades têm um valor padrão de 641px, o mesmo que NavigationView.CompactThresholdWidth.

Esta tabela mostra como o Height e o Width do TwoPaneView determinam qual modo de exibição é utilizado.

Opções de configuração ampla

MinWideModeWidth controla quando o modo de exibição de dois painéis entra em modo largo. A exibição de dois painéis entra no modo Wide quando o espaço disponível é maior que a propriedade MinWideModeWidth. O valor padrão é 641px, mas você pode alterá-lo para o que quiser. Em geral, você deve definir essa propriedade para o valor desejado como a largura mínima do seu painel.

Quando a exibição de dois painéis está em modo largo, a propriedade WideModeConfiguration determina o que mostrar:

A configuração padrão é LeftRight.

EsquerdaDireita	DireitaEsquerda

Opções de configuração avançadas

O modo de exibição de dois painéis Tall entra no modo quando o espaço disponível é mais estreito que MinWideModeWidth, e mais alto que MinTallModeHeight. O valor padrão é 641px, mas você pode alterá-lo para o que quiser. Em geral, você deve definir essa propriedade de acordo com a altura mínima desejada para o seu painel.

Quando o modo vertical é ativado na exibição de dois painéis, a propriedade TallModeConfiguration determina o que mostrar:

O padrão é TopBottom.

TopBottom	DeBaixoParaCima

Valores especiais para MinWideModeWidth e MinTallModeHeight

Você pode usar a propriedade MinWideModeWidth para impedir que a exibição de dois painéis entre no modo de Wide – basta definir MinWideModeWidth como Double.PositiveInfinity.

Se você definir MinTallModeHeight como Double.PositiveInfinity, ele impedirá que o modo de exibição Tall de dois painéis entre no modo.

Se você definir MinTallModeHeight como 0, impedirá que o modo de dois painéis entre no modo SinglePane.

Respondendo a alterações de modo

Você pode usar a propriedade Modo de somente leitura para obter o modo de exibição atual. Sempre que a exibição de dois painéis altera qual painel ou painéis está sendo exibido, o evento ModeChanged ocorre antes de renderizar o conteúdo atualizado. Você pode manipular o evento para responder às alterações no modo de exibição.

Uma maneira de usar esse evento é atualizar a interface do usuário do aplicativo para que os usuários possam visualizar todo o conteúdo no modo SinglePane. Por exemplo, o aplicativo de exemplo tem um painel primário (a imagem) e um painel de informações.

Modo vertical

Quando houver espaço suficiente apenas para exibir um painel, você pode mover o conteúdo de Pane2 para Pane1, permitindo que o usuário role para ver todo o conteúdo. Ela terá a aparência a seguir.

Modo SinglePane

Lembre-se de que as propriedades MinWideModeWidth e MinTallModeHeight determinam quando o modo de exibição é alterado, assim você pode modificar quando o conteúdo é movido entre painéis ajustando os valores dessas propriedades.

Aqui está o código do ModeChanged manipulador de eventos que move o conteúdo entre Pane1 e Pane2. Ele também define um VisualState para restringir a largura da imagem no Wide modo.

private void TwoPaneView_ModeChanged(TwoPaneView sender, object args)
{
    // Remove details content from it's parent panel.
    ((Panel)DetailsContent.Parent).Children.Remove(DetailsContent);
    // Set Normal visual state.
    VisualStateManager.GoToState(this, "Normal", true);

    // Single pane
    if (sender.Mode == TwoPaneViewMode.SinglePane)
    {
        // Add the details content to Pane1.
        Pane1StackPanel.Children.Add(DetailsContent);
    }
    // Dual pane.
    else
    {
        // Put details content in Pane2.
        Pane2Root.Children.Add(DetailsContent);

        // If also in Wide mode, set Wide visual state
        // to constrain the width of the image to 2*.
        if (sender.Mode == TwoPaneViewMode.Wide)
        {
            VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

UWP e WinUI 2

O TwoPaneView para aplicativos UWP requer WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem no namespace Microsoft.UI.Xaml.Controls .

Para usar o código neste artigo com a WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca de Interface do Usuário do Windows incluídas em seu projeto. Confira Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:TwoPaneView />

Artigos relacionados

• Visão geral do layout
• Modo divisão