Exibição de dois painéisTwo-pane view

TwoPaneView é um controle de layout que ajuda você a gerenciar a exibição de aplicativos que têm duas áreas distintas de conteúdo, como exibição mestre/detalhe.TwoPaneView is a layout control that helps you manage the display of apps that have 2 distinct areas of content, like a master/detail view.

Importante

Este artigo descreve a funcionalidade e as diretrizes que estão em versão prévia pública e podem ser substancialmente modificadas antes de passarem para a disponibilidade geral.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. A Microsoft não faz nenhuma garantia, expressa ou implícita, com relação às informações fornecidas aqui.Microsoft makes no warranties, express or implied, with respect to the information provided here.

Embora ele funcione em todos os dispositivos Windows, o controle TwoPaneView foi projetado para ajudar você a aproveitar ao máximo os dispositivos de tela dupla automaticamente, sem a necessidade de codificação especial.While it works on all Windows devices, the TwoPaneView control is designed to help you take full advantage of dual-screen devices automatically, with no special coding needed. Em um dispositivo de tela dupla, a exibição de dois painéis garante que a interface do usuário seja dividida corretamente quando ela abranger o espaço entre as telas, de modo que o conteúdo seja apresentado em ambos os lados do espaço.On a dual-screen device, the two-pane view ensures that the user interface (UI) is split cleanly when it spans the gap between screens, so that your content is presented on either side of the gap.

Observação

Um dispositivo de tela dupla é um tipo especial de dispositivo com funcionalidades exclusivas.A dual-screen device is a special kind of device with unique capabilities. Não é equivalente a um dispositivo de desktop com vários monitores.It's not equivalent to a desktop device with multiple monitors. Para obter mais informações sobre os dispositivos de tela dupla, confira Introdução aos dispositivos de tela dupla.For more info about dual-screen devices, see Introduction to dual-screen devices. (Confira Mostrar várias exibições para obter mais informações sobre as maneiras de otimizar seu aplicativo para vários monitores.)(See Show multiple views for more info about ways you can optimize your app for multiple monitors.)

Obter a biblioteca de interface do usuário do WindowsGet the Windows UI Library

Logotipo do WinUI Este controle TwoPaneView está incluído como parte da Biblioteca de interface do usuário do Windows, um pacote NuGet que contém novos controles e recursos de interface do usuário para aplicativos do Windows.The TwoPaneView control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Para obter mais informações, incluindo instruções de instalação, confira Biblioteca de interface do usuário do Windows.For more info, including installation instructions, see Windows UI Library.

APIs da Biblioteca de interface do usuário do Windows: Classe TwoPaneViewWindows UI Library APIs: TwoPaneView class

Dica

Neste documento, usamos o alias muxc em XAML para representar a APIs da Biblioteca de interface do usuário do Windows que incluímos em nosso projeto.Throughout this document, we use the muxc alias in XAML to represent the Windows UI Library APIs that we have included in our project. Adicionamos isso ao nosso elemento Page: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"We have added this to our Page element: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

No code-behind, também usamos o alias muxc em C# para representar a APIs da Biblioteca de interface do usuário do Windows que incluímos em nosso projeto.In the code-behind, we also use the muxc alias in C# to represent the Windows UI Library APIs that we have included in our project. Adicionamos essa instrução using na parte superior do arquivo: using muxc = Microsoft.UI.Xaml.Controls;We have added this using statement at the top of the file: using muxc = Microsoft.UI.Xaml.Controls;

Esse é o controle correto?Is this the right control?

Use a exibição de dois painéis quando tiver duas áreas distintas de conteúdo e:Use the two-pane view when you have 2 distinct areas of content and:

  • O conteúdo precisar ser reorganizado e redimensionado automaticamente para se ajustar melhor à janela.The content should automatically rearrange and resize to best fit the window.
  • A área secundária de conteúdo precisar ser mostrada/ocultada com base no espaço disponível.The secondary area of content should show/hide based on available space.
  • O conteúdo precisa ser dividido corretamente entre as duas telas de um dispositivo de tela dupla.The content should split cleanly between the 2 screens of a dual-screen device.

ExemplosExamples

Estas imagens mostram um aplicativo em execução em tela única e estendidos em telas duplas.These images show an app running on a single-screen and spanned across dual-screens. A exibição de dois painéis adapta a interface do usuário do aplicativo às diversas configurações de tela.The two-pane view adapts the app UI to the various screen configurations.

Aplicativo de exibição de dois painéis em tela única

Aplicativo em uma tela única.App on a single-screen.

Aplicativo de exibição de dois painéis em telas duplas no modo horizontal

Aplicativo que abrange um dispositivo de tela dupla no modo horizontal.App spanning a dual-screen device in wide mode.

Aplicativo de exibição de dois painéis em telas duplas no modo vertical

Aplicativo que abrange um dispositivo de tela dupla no modo vertical.App spanning a dual-screen device in tall mode.

Como funcionaHow it works

Na exibição de dois painéis, há dois painéis em que você coloca o conteúdo.The two-pane view has two panes where you place your content. Ela ajusta o tamanho e a organização dos painéis, dependendo do espaço disponível para a janela.It adjusts the size and arrangement of the panes depending on the space available to the window. Os layouts de painel possíveis são definidos pela enumeração TwoPaneViewMode:The possible pane layouts are defined by the TwoPaneViewMode enumeration:

Valor da enumeraçãoEnum value DescriçãoDescription
SinglePane Somente um painel é mostrado, conforme especificado pela propriedade PanePriority.Only one pane is shown, as specified by the PanePriority property.
Wide Os painéis são mostrados lado a lado ou só um painel é mostrado, conforme especificado pela propriedade WideModeConfiguration.Panes are shown side-by-side, or a single pane is shown, as specified by the WideModeConfiguration property.
Tall Os painéis são mostrados de cima para baixo ou só um painel é mostrado, conforme especificado pela propriedade TallModeConfiguration.Panes are shown top-bottom, or a single pane is shown, as specified by the TallModeConfiguration property.

Configure a exibição de dois painéis definindo a PanePriority para especificar qual painel será mostrado quando houver espaço para apenas um painel.You configure the two-pane view by setting the PanePriority to specify which pane is shown when there is space for only one pane. Em seguida, especifique se Pane1 é mostrado na parte superior ou inferior nas janelas verticais ou à esquerda ou à direita nas janelas horizontais.Then, you specify whether Pane1 is shown on the top or bottom for tall windows, or on the left or right for wide windows.

A exibição de dois painéis lida com o tamanho e a organização dos painéis, mas você ainda precisa fazer com que o conteúdo dentro do painel se adapte às alterações no tamanho e na orientação.The two-pane view handles the size and arrangement of the panes, but you still need to make the content inside the pane adapt to the changes in size and orientation. Confira Layouts dinâmicos com XAML e Painéis de layout para obter mais informações sobre como criar uma interface do usuário adaptável.See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

O TwoPaneView gerencia a exibição dos painéis com base no estado de abrangência do aplicativo.The TwoPaneView manages the display of the panes based on the spanning state of the app.

  • Em uma tela únicaOn a single-screen

    Quando o aplicativo estiver em tela única, o TwoPaneView ajustará o tamanho e a posição dos próprios painéis com base nas configurações de propriedade que você especificar.When your app is on only a single screen, the TwoPaneView adjusts the size and position of its panes based on property settings you specify. Explicaremos essas propriedades mais detalhadamente na próxima seção.We explain these properties in more detail in the next section. A única diferença entre os dispositivos é que alguns dispositivos, como computadores desktop, permitem janelas redimensionáveis, enquanto outros dispositivos não.The only difference between devices is that some devices, like desktop PCs, allow re-sizable windows, while other devices don't.

  • Estendido entre telas duplasSpanned across dual-screens

    O TwoPaneView foi projetado para facilitar a otimização da interface do usuário para ser estendida nos dispositivos com duas telas.The TwoPaneView is designed to make it easy to optimize your UI for spanning on dual-screen devices. A janela é dimensionada para usar todo o espaço disponível nas telas.The window sizes itself to use all the available space on the screens. Quando o aplicativo abranger ambas as telas de um dispositivo de tela dupla, cada tela exibirá o conteúdo de um dos painéis e abrangerá corretamente o conteúdo ao longo do espaço.When your app spans both screens of a dual-screen device, each screen displays the content of one of the panes and properly spans content across the gap. O reconhecimento de abrangência é interno quando você usa a exibição de dois painéis.Spanning-awareness is built-in when you use two-pane view. Você só precisa definir a configuração vertical/horizontal para especificar qual painel é mostrado em qual tela.You only need to set the tall/wide configuration to specify which pane is shown on which screen. A exibição de dois painéis cuida do resto.The two-pane view takes care of the rest.

Como usar o controle de exibição de dois painéisHow to use the two-pane view control

O TwoPaneView não precisa ser o elemento raiz do layout da página.The TwoPaneView doesn't have to be the root element of your page layout. Na verdade, você geralmente o usará dentro de um controle NavigationView que fornece a navegação geral do aplicativo.In fact, you'll often use it inside a NavigationView control that provides the overall navigation for your app. O TwoPaneView se adapta de acordo, independentemente da localização dele na árvore XAML; no entanto, recomendamos que você não aninhe um TwoPaneView dentro de outro TwoPaneView.The TwoPaneView adapts appropriately regardless of where it is in the XAML tree; however, we do recommend that you not nest a TwoPaneView inside another TwoPaneView. (Se você fizer isso, somente o TwoPaneView externo reconhecerá a extensão.)(If you do, only the outer TwoPaneView is spanning-aware.)

Adicionar conteúdo aos painéisAdd content to the panes

Cada painel de uma exibição de dois painéis pode conter um só UIElement XAML.Each pane of a two-pane view can hold a single XAML UIElement. Para adicionar conteúdo, você normalmente coloca um painel de layout XAML em cada painel e, em seguida, adiciona outros controles e o conteúdo ao painel.To add content, you typically place a XAML layout panel in each pane, and then add other controls and content to the panel. Os painéis podem ter o tamanho alterado e alternar entre os modos horizontal e vertical e, portanto, você precisará garantir que o conteúdo de cada painel possa se adaptar a essas alterações.The panes can change size and switch between wide and tall modes, so you need to make sure the content in each pane can adapt to these changes. Confira Layouts dinâmicos com XAML e Painéis de layout para obter mais informações sobre como criar uma interface do usuário adaptável.See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

Este exemplo cria a interface do usuário do aplicativo de informações/imagens simples mostradas anteriormente na seção Exemplos.This example creates the the simple picture/info app UI shown previously in the Examples section. Quando o aplicativo é estendido entre telas duplas, a imagem e as informações são mostradas em telas separadas.When the app is spanned across dual-screens, the picture and the info are shown on separate screens. Em uma única tela, o conteúdo pode ser mostrado em dois painéis ou combinado em apenas um painel, dependendo da quantidade de espaço disponível.On a single screen, the content can be shown in two panes, or combined into a single pane, depending on how much space is available. (Quando só houver espaço para um painel, mova o conteúdo de Pane2 para Pane1 e permita que o usuário role a página para ver o conteúdo oculto.(When there's only space for one pane, you move the content of Pane2 into Pane1, and let the user scroll to see any hidden content. Você verá o código disso mais adiante na seção Como responder às alterações de modo.)You'll see the code for this later in the Responding to mode changes section.)

Imagem pequena do aplicativo de exemplo distribuída em telas duplas

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

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

        <muxc: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>
        </muxc:TwoPaneView.Pane1>

        <muxc: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>
        </muxc:TwoPaneView.Pane2>
    </muxc: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 será exibidoSpecify which pane to display

Quando a exibição de dois painéis puder exibir apenas um painel, ela usará a propriedade PanePriority para determinar qual painel deverá ser exibido.When the two-pane view can only display a single pane, it uses the PanePriority property to determine which pane to display. Por padrão, PanePriority é definido como Pane1.By default, PanePriority is set to Pane1. Veja como você pode definir essa propriedade em XAML ou no código.Here's how you can set this property in XAML or in code.

<muxc:TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">
MyTwoPaneView.PanePriority = Microsoft.UI.Xaml.Controls.TwoPaneViewPriority.Pane2;

Dimensionamento do painelPane sizing

Em um dispositivo de tela única, o tamanho dos painéis é determinado pelas propriedades Pane1Length e Pane2Length.On a single screen, the size of the panes is determined by the Pane1Length and Pane2Length properties. Elas usam valores de GridLength que dão suporte ao dimensionamento automático e em estrela(*).These use GridLength values that support auto and star(*) sizing. Confira a seção Propriedades de layout de Layouts dinâmicos com XAML para obter uma explicação do dimensionamento automático e em estrela.See the Layout properties section of Responsive layouts with XAML for an explanation of auto and star sizing.

Por padrão, Pane1Length é definido como Auto e é dimensionado para se ajustar ao respectivo conteúdo.By default, Pane1Length is set to Auto and it sizes itself to fit its content. Pane2Length é definido como * e usa todo o espaço restante.Pane2Length is set to * and it uses all the remaining space.

Exibição de dois painéis com painéis definidos para tamanhos padrão

Painéis com dimensionamento padrãoPanes with default sizing

Os valores padrão são úteis para um layout típico de mestre/detalhe, no qual você tem uma lista de itens em Pane1 e muitos detalhes em Pane2.The default values are useful for a typical master/detail layout, where you have a list of items in Pane1, and a lot of details in Pane2. No entanto, dependendo do conteúdo, talvez você prefira dividir o espaço de outra maneira.However, depending on your content, you might prefer to divide the space differently. Aqui, Pane1Length é definido como 2*, de modo que fica com duas vezes mais espaço que Pane2.Here, Pane1Length is set to 2* so it gets twice as much space as Pane2.

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

Exibição de dois painéis com o painel 1 usando dois terços de tela e o painel 2 usando um terço

Painéis dimensionados 2* e *Panes sized 2* and *

Observação

Conforme mencionado anteriormente, quando o aplicativo é estendido entre telas duplas, essas propriedades são ignoradas e cada painel preenche uma das telas.As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and each pane fills one of the screens.

Se você definir um painel para usar o dimensionamento automático, poderá controlar o tamanho definindo a altura e a largura do painel que apresenta o conteúdo do painel.If you set a pane to use auto sizing, you can control the size by setting the height and width of the Panel that holds the pane's content. Nesse caso, talvez seja necessário processar o evento ModeChanged e definir as restrições de altura e largura do conteúdo conforme apropriado do modo atual.In this case, you might need to handle the ModeChanged event and set the height and width constraints of the content as appropriate for the current mode.

Exibição no modo horizontal ou verticalDisplay in wide or tall mode

Quando usado em apenas uma tela, o Modo de exibição da exibição de dois painéis é determinado pelas propriedades MinWideModeWidth e MinTallModeHeight.On a single screen, the two-pane view's display Mode is determined by the MinWideModeWidth and MinTallModeHeight properties. Ambas as propriedades têm um valor padrão igual a 641 px, o mesmo que NavigationView.CompactThresholdWidth.Both properties have a default value of 641px, the same as NavigationView.CompactThresholdWidth.

Esta tabela mostra como a altura e a largura de TwoPaneView determinam qual modo de exibição é usado.This table shows how the Height and Width of the TwoPaneView determine which display mode is used.

Condição de TwoPaneViewTwoPaneView condition ModoMode
Width > MinWideModeWidth O modo Wide é usadoWide mode is used
Width <= MinWideModeWidth e Height > MinTallModeHeightWidth <= MinWideModeWidth, and Height > MinTallModeHeight O modo Tall é usadoTall mode is used
Width <= MinWideModeWidth e Height <= MinTallModeHeightWidth <= MinWideModeWidth, and Height <= MinTallModeHeight O modo SinglePane é usadoSinglePane mode is used

Observação

Conforme mencionado anteriormente, quando o aplicativo é estendido entre telas duplas, essas propriedades são ignoradas e o modo de exibição é determinado com base na postura do dispositivo.As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and display mode is determined based on the device posture.

Opções de configuração de WideWide configuration options

A exibição de dois painéis entra no modo Wide quando há uma só exibição que é mais larga do que a propriedade MinWideModeWidth.The two-pane view enters Wide mode when there's a single display that's wider than the MinWideModeWidth property. MinWideModeWidth controla quando a exibição de dois painéis entra no modo horizontal.MinWideModeWidth controls when the two-pane view enters wide mode. O valor padrão é 641 px, mas você pode alterá-lo para qualquer outro desejado.The default value is 641px, but you can change it to whatever you want. Em geral, você deve definir essa propriedade com o valor desejado para a largura mínima do painel.In general, you should set this property to whatever you want the minimum width of your pane to be.

Quando a exibição de dois painéis está no modo horizontal, a propriedade WideModeConfiguration determina o que é mostrado:When the two-pane view is in wide mode, the WideModeConfiguration property determines what to show:

Valor da enumeraçãoEnum value DescriçãoDescription
SinglePane Um único painel (conforme determinado pelo PanePriority).A single pane (as determined by PanePriority). O painel ocupa o tamanho original do TwoPaneView (ou seja, é dimensionado em estrela em ambas as direções).The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
LeftRight Pane1 à esquerda/Pane2 à direita.Pane1 on the left/Pane2 on the right. Ambos os painéis são dimensionados em estrela verticalmente: a largura de Pane1 é dimensionada automaticamente e a largura de Pane2 é dimensionada em estrela.Both panes are star sized vertically, Pane1's width is autosized, and Pane2's width is star sized.
RightLeft Pane1 à direita/Pane2 à esquerda.Pane1 on the right/Pane2 on the left. Ambos os painéis são dimensionados em estrela verticalmente: a largura de Pane2 é dimensionada automaticamente e a largura de Pane1 é dimensionada em estrela.Both panes are star sized vertically, Pane2's width is autosized, and Pane1's width is star sized.

A configuração padrão é LeftRight.The default setting is LeftRight.

LeftRightLeftRight RightLeftRightLeft
Exibição de dois painéis configurada da esquerda para a direita Exibição de dois painéis configurada da direita para a esquerda

DICA: Quando o dispositivo usa uma linguagem RTL (da direita para esquerda), a exibição de dois painéis troca automaticamente a ordem: RightLeft é renderizado como LeftRight e LeftRight é renderizado como RightLeft.TIP: When the device uses a right-to-left (RTL) language, the two-pane view automatically swaps the order: RightLeft renders as LeftRight, and LeftRight renders as RightLeft.

Opções de configuração de TallTall configuration options

A exibição de dois painéis entra no modo Tall quando há uma só exibição que é mais estreita do que MinWideModeWidth e mais alta que MinTallModeHeight.The two-pane view enters Tall mode when there's a single display that's narrower than MinWideModeWidth, and taller than MinTallModeHeight. O valor padrão é 641 px, mas você pode alterá-lo para qualquer outro desejado.The default value is 641px, but you can change it to whatever you want. Em geral, você deve definir essa propriedade com o valor desejado para a altura mínima do painel.In general, you should set this property to whatever you want the minimum height of your pane to be.

Quando a exibição de dois painéis está no modo vertical, a propriedade TallModeConfiguration determina o que é mostrado:When the two-pane view is in tall mode, the TallModeConfiguration property determines what to show:

Valor da enumeraçãoEnum value DescriçãoDescription
SinglePane Um único painel (conforme determinado pelo PanePriority).A single pane (as determined by PanePriority). O painel ocupa o tamanho original do TwoPaneView (ou seja, é dimensionado em estrela em ambas as direções).The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
TopBottom Pane1 na parte superior/Pane2 na parte inferior.Pane1 on the top/Pane2 on the bottom. Ambos os painéis são dimensionados em estrela horizontalmente: a altura de Pane1 é dimensionada automaticamente e a altura de Pane2 é dimensionada em estrela.Both panes are star sized horizontally, Pane1's height is autosized, and Pane2's height is star sized.
BottomTop Pane1 na parte inferior/Pane2 na parte superior.Pane1 on the bottom/Pane2 on the top. Ambos os painéis são dimensionados em estrela horizontalmente: a altura de Pane2 é dimensionada automaticamente e a altura de Pane1 é dimensionada em estrela.Both panes are star sized horizontally, Pane2's height is autosized, and Pane1's height is star sized.

O padrão é TopBottom.The default is TopBottom.

TopBottomTopBottom BottomTopBottomTop
Exibição de dois painéis configurada da parte superior para a inferior Exibição de dois painéis configurada da parte inferior para a superior

Valores especiais para MinWideModeWidth e MinTallModeHeightSpecial values for MinWideModeWidth and MinTallModeHeight

Use a propriedade MinWideModeWidth para impedir que a exibição de dois painéis entre no modo horizontal: basta definir MinWideModeWidth como Double.PositiveInfinity.You can use the MinWideModeWidth property to prevent the two-pane view from entering Wide mode - just set MinWideModeWidth to Double.PositiveInfinity.

Se você definir MinTallModeHeight como Double.PositiveInfinity, isso impedirá que a exibição de dois painéis entre no modo vertical.If you set MinTallModeHeight to Double.PositiveInfinity, it prevents the two-pane view from entering Tall mode.

Se você definir MinTallModeHeight como 0, isso impedirá que a exibição de dois painéis entre no modo SinglePane.If you set MinTallModeHeight to 0, it prevents the two-pane view from entering SinglePane mode.

Como responder às alterações de modoResponding to mode changes

Use a propriedade Mode somente leitura para obter o modo de exibição atual.You can use the read-only Mode property to get the current display mode. Sempre que a exibição de dois painéis altera quais painéis são exibidos, o evento ModeChanged ocorre antes da renderização do conteúdo atualizado.Whenever the two-pane view changes which pane or panes it's displaying, the ModeChanged event occurs before it renders the updated content. Você pode processar o evento para responder às alterações no modo de exibição.You can handle the event to respond to changes in the display mode.

Dica

O evento ModeChanged não ocorre quando a página é carregada inicialmente, portanto, o XAML padrão deve representar a interface do usuário da maneira como ela deve aparecer quando carregada pela primeira vez.The ModeChanged event does not occur when the page is initially loaded, so your default XAML should represent the UI as it should appear when first loaded.

Uma maneira de usar esse evento é atualizar a interface do usuário do aplicativo, de modo que os usuários possam exibir todo o conteúdo no modo SinglePane.One way you can use this event is to update your app's UI so users can view all the content in SinglePane mode. Por exemplo, o aplicativo de exemplo tem um painel primário (a imagem) e um painel de informações.For example, the example app has a primary pane (the image) and an info pane.

Imagem pequena do aplicativo de exemplo distribuída no modo vertical

Modo verticalTall mode

Quando só houver espaço suficiente para exibição de um painel, será possível mover o conteúdo de Pane2 para Pane1, de modo que o usuário possa rolar a página para ver todo o conteúdo.When there's only enough space to display one pane, you can move the content of Pane2 into Pane1 so the user can scroll to see all the content. Ela terá a aparência a seguir.It looks like this.

Imagem do aplicativo de exemplo em uma tela com toda a rolagem de conteúdo em um único painel

Modo SinglePaneSinglePane mode

Lembre-se de que as propriedades MinWideModeWidth e MinTallModeHeight determinam quando o modo de exibição é alterado, de modo que você pode alterar quando o conteúdo é movido entre os painéis ajustando os valores dessas propriedades.Remember that the MinWideModeWidth and MinTallModeHeight properties determine when the display mode changes, so you can change when the content is moved between panes by adjusting the values of these properties.

Aqui está o código do manipulador de eventos ModeChanged que move o conteúdo entre Pane1 e Pane2.Here's the ModeChanged event handler code that moves the content between Pane1 and Pane2. Ele também define um VisualState para restringir a largura da imagem em modo horizontal.It also sets a VisualState to constrain the width of the image in Wide mode.

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

    // Single pane
    if (sender.Mode == Microsoft.UI.Xaml.Controls.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 == Microsoft.UI.Xaml.Controls.TwoPaneViewMode.Wide)
        {
            Windows.UI.Xaml.VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

O que fazer e o que não fazerDos and don'ts

  • Use a exibição de dois painéis sempre que possível para que o aplicativo possa aproveitar as telas duplas e as telas grandes.Do use the two-pane view whenever you can so that your app can take advantage of dual-screens and large screens.
  • Não coloque uma exibição de dois painéis dentro de outra exibição de dois painéis.Don't put a two-pane view inside another two-pane view.