Vista com dois painéis

A visualização de dois painéis é um controlo de disposição que o ajuda a gerir a apresentação de aplicativos com 2 áreas distintas de conteúdo, como uma vista de lista/detalhe.

Será este o controlo correto?

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

• O conteúdo deve ser reorganizado e redimensionado automaticamente para melhor se adequar à 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 reorganização fornecidos pelo modo de exibição de dois painéis, considere usar um modo de exibição Dividido .

Para opções de navegação, utilize uma vista de Navegação.

Como funciona

O modo de exibição de dois painéis tem dois painéis onde 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 :

Valor do enum	Descrição
SinglePane	Apenas um painel é mostrado, conforme especificado pela propriedade PanePriority.
Wide	Os painéis são mostrados lado a lado ou um único painel é mostrado, conforme especificado pela propriedade WideModeConfiguration .
Tall	Os painéis são mostrados de cima para baixo ou um único painel é mostrado, conforme especificado pela propriedade TallModeConfiguration .

Aplicação em modo amplo.

Aplicação em modo alto.

Configure 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 amplas.

O modo de exibição de dois painéis lida com 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 mudanças de tamanho e orientação. Veja Layouts responsivos com XAML e painéis de Layout para mais informações sobre como criar uma interface adaptável.

Crie uma vista de dois painéis

• APIs importantes:classe TwoPaneView

Este XAML mostra como criar um TwoPaneView básico.

<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, muitas vezes você o usará dentro de um controle de NavigationView que fornece a navegação geral para seu aplicativo. TwoPaneView adapta-se adequadamente, independentemente de onde esteja na árvore XAML.

Adicionar conteúdo aos painéis

Cada painel de uma visualização com dois painéis pode conter um único XAML UIElement. Para adicionar conteúdo, normalmente você coloca um painel de layout XAML em cada painel e, em seguida, adiciona outros controles e conteúdo ao painel. Os painéis podem mudar de 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. Veja Layouts responsivos com XAML e painéis de Layout para mais informações sobre como criar uma interface adaptável.

Este exemplo cria a interface do usuário simples do aplicativo picture/info mostrada anteriormente. O conteúdo pode ser mostrado em dois painéis ou combinado em um único painel, dependendo de quanto espaço está disponível. (Quando houver apenas espaço para um painel, mova o conteúdo do Pane2 para o Pane1 e deixe o usuário rolar para ver qualquer conteúdo oculto. Você verá o código para isso mais adiante na seção Respondendo a alterações de modo .)

<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 . Estes usam valores de GridLength que suportam automático e dimensionamento deestrela (*). Consulte a seção Propriedades de layout de Layouts responsivos com XAML para obter uma explicação sobre o dimensionamento automático e em estrela.

Por padrão, Pane1Length é definido como Auto e dimensiona-se para se ajustar ao seu conteúdo. Pane2Length está 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/detalhe, onde você tem uma lista de itens no Pane1, e muitos detalhes no Pane2. No entanto, dependendo do seu conteúdo, você pode preferir dividir o espaço de forma diferente. Aqui, Pane1Length está definido para 2* que receba o dobro de espaço do que Pane2.

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

Painéis de tamanho 2* e *

Se você definir um painel para usar o dimensionamento automático, poderá controlar o tamanho definindo a altura e a largura do Panel painel que contém o conteúdo. 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.

Ecrã em modo largo ou alto

Numa única tela, a visão de dois painéis Modo é determinada 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 Width do TwoPaneView determinar qual modo de exibição é usado.

Condição TwoPaneView	Modo
Width > MinWideModeWidth	O modo Wide é usado
Width <= MinWideModeWidth, e Height>MinTallModeHeight	O modo Tall é usado
Width <= MinWideModeWidth, e Height<= MinTallModeHeight	O modo SinglePane é usado

Amplas opções de configuração

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

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

Valor de Enum	Descrição
SinglePane	Um único painel (conforme determinado por PanePriority). O painel ocupa o tamanho total do TwoPaneView (ou seja, é do tamanho de uma estrela em ambas as direções).
LeftRight	Pane1 à esquerda/Pane2 à direita. Ambos os painéis são do tamanho da estrela verticalmente, Pane1a largura do é autodimensionada e Pane2a largura do é do tamanho da estrela.
RightLeft	Pane1 à direita/Pane2 à esquerda. Ambos os painéis são do tamanho da estrela verticalmente, Pane2a largura do é autodimensionada e Pane1a largura do é do tamanho da estrela.

A predefinição é LeftRight.

EsquerdaDireita	DireitaEsquerda

Observação

Quando o dispositivo usa um idioma da direita para a esquerda (RTL), a exibição de dois painéis troca automaticamente a ordem: RightLeft renderiza como LeftRight, e LeftRight renderiza como RightLeft.

Opções de configuração extensivas

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

Quando a visualização em dois painéis está no modo alto, a propriedade TallModeConfiguration determina o conteúdo a ser exibido:

Valor de Enum	Descrição
SinglePane	Um único painel (conforme determinado por PanePriority). O painel ocupa o tamanho total do TwoPaneView (ou seja, é do tamanho de uma estrela em ambas as direções).
TopBottom	Pane1 em cima/Pane2 em baixo. Ambos os painéis têm tamanho estelar na horizontal, a altura do Pane1é dimensionada automaticamente e a altura do Pane2é de tamanho estelar.
BottomTop	Pane1 na parte inferior/Pane2 na parte superior. Ambos os painéis têm tamanho estelar na horizontal, a altura do Pane2é dimensionada automaticamente e a altura do Pane1é de tamanho estelar.

A predefinição é TopBottom.

Topo e Fundo	Topo inferior

Valores especiais para MinWideModeWidth e MinTallModeHeight

Você pode usar a MinWideModeWidth propriedade para impedir que a vista de dois painéis entre no Wide modo - basta definir MinWideModeWidth como Double.PositiveInfinity.

Se definir MinTallModeHeight como Double.PositiveInfinity, isso impedirá que a visualização de dois painéis entre no modo Tall.

Se definir MinTallModeHeight como 0, isso impedirá que o modo de exibição de dois painéis entre no modo SinglePane.

Responder a alterações de modo

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

Importante

O ModeChanged evento não ocorre quando a página é carregada inicialmente, portanto, seu XAML padrão deve representar a interface do usuário como ela deve aparecer quando carregada pela primeira vez.

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

Modo vertical

Quando só houver espaço suficiente para exibir um único painel, pode mover o conteúdo de Pane2 para Pane1, para que o utilizador possa rolar e ver todo o conteúdo. Parece que é assim.

modo SinglePane

Lembre-se de que as MinWideModeWidth propriedades e MinTallModeHeight determinam quando o modo de exibição é alterado, portanto, você pode alterar 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

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou 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.

• WinUI 2 Apis:TwoPaneView classe

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte 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
• Vista dividida