Layout TwoPaneView do .NET MAUI

Artigo
08/30/2024

A classe TwoPaneView representa um contêiner com duas exibições que dimensionam e posicionam o conteúdo no espaço disponível, lado a lado ou de cima para baixo. TwoPaneView herda de Grid, portanto, a maneira mais fácil de entender essas propriedades é imaginar que elas estão sendo aplicadas a uma grade.

Surface Duo dual-screen emulator showing a basic TwoPaneView test app

O controle de layout é fornecido pelo pacote NuGet Microsoft.Maui.Controls.Foldable.

Visão geral do suporte a dispositivos dobráveis

Os dispositivos dobráveis incluem o Microsoft Surface Duo e dispositivos Android de outros fabricantes. Eles preenchem a lacuna entre telefones e telas maiores, como tablets e desktops, porque os aplicativos podem precisar se ajustar a uma variedade de tamanhos de tela e orientações no mesmo dispositivo, incluindo a adaptação a uma dobradiça ou dobra na tela.

Visite os documentos do desenvolvedor de tela dupla para obter mais informações sobre como criar aplicativos destinados a dispositivos dobráveis, incluindo padrões de design e experiências do usuário. Há também um emulador do Surface Duo que você pode baixar para Windows, Mac e Linux.

Importante

O TwoPaneView controle só se adapta a dispositivos dobráveis Android que suportam a API do Jetpack Window Manager fornecida pelo Google (como o Microsoft Surface Duo).

Em todas as outras plataformas e dispositivos (ou seja, outros dispositivos Android, iOS, macOS, Windows) ele funciona como uma visualização dividida configurável e responsiva que pode mostrar dinamicamente um ou dois painéis, proporcionalmente dimensionados na tela.

Adicionar e configurar o NuGet de suporte dobrável

Abra a caixa de diálogo Gerenciador de Pacotes NuGet para sua solução.
Na guia Procurar, pesquise por Microsoft.Maui.Controls.Foldable.
Instale o Microsoft.Maui.Controls.Foldable pacote em sua solução.
Adicione a chamada do UseFoldable() método de inicialização (e namespace) à classe do MauiApp projeto, no CreateMauiApp método:
```
using Microsoft.Maui.Foldable; // ADD THIS NAMESPACE
...
public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    ...
    builder.UseFoldable(); // ADD THIS LINE TO THE TEMPLATE
    return builder.Build();
}
```
A UseFoldable() inicialização é necessária para que o aplicativo possa detectar alterações no estado do aplicativo, como ser estendido em uma dobra.
Atualize o [Activity(...)] atributo na MainActivity classe em Platforms/Android, para que ele inclua todas estas ConfigurationChanges opções:
```
ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
```
Esses valores são necessários para que as alterações de configuração e o estado da extensão possam ser relatados de forma mais confiável para suporte confiável a duas telas.

Configurar o TwoPaneView

Para adicionar o TwoPaneView layout à sua página:

Adicione um foldable alias de namespace para o NuGet dobrável:

xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"

Adicione o como o TwoPaneView elemento raiz na página e adicione controles a Pane1 e Pane2:

<foldable:TwoPaneView x:Name="twoPaneView">
    <foldable:TwoPaneView.Pane1
        BackgroundColor="#dddddd">
        <Label
            Text="Hello, .NET MAUI!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" />
    </foldable:TwoPaneView.Pane1>
    <foldable:TwoPaneView.Pane2>
        <StackLayout BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}">
            <Label Text="Pane2 StackLayout"/>
        </StackLayout>
    </foldable:TwoPaneView.Pane2>
</foldable:TwoPaneView>

Entender os modos do TwoPaneView

Somente um destes modos pode estar ativo:

SinglePane somente um painel está visível no momento.
Wide os dois painéis estão dispostos horizontalmente. Um painel fica à esquerda, e o outro, à direita. Quando estiver em duas telas, esse será o modo do dispositivo na orientação retrato.
Tall os dois painéis estão dispostos verticalmente. Um painel fica na parte superior, e o outro, na parte inferior. Quando estiver em duas telas, esse será o modo do dispositivo na orientação paisagem.

Controlar o TwoPaneView quando ele estiver apenas em uma tela

As propriedades a seguir se aplicam quando TwoPaneView estiver ocupando uma única tela:

MinTallModeHeight indica a altura mínima que o controle deve ter para entrar no Tall modo.
MinWideModeWidth Indica a largura mínima que o controle deve ter para entrar no Wide modo.
Pane1Lengthdefine a largura do Pane1 no modo, a altura do modo e não tem efeito no Wide SinglePane modoTall.Pane1
Pane2LengthDefine a largura do modo InWide, a altura do Pane2 modo Tall In Pane2 e não tem efeito no SinglePane modo.

Importante

Se o TwoPaneView for estendido através de uma dobradiça ou dobra, essas propriedades não terão efeito.

Propriedades que se aplicam quando em uma tela ou duas

As propriedades a seguir se aplicam quando TwoPaneView estiver ocupando uma ou duas telas:

TallModeConfiguration indica, quando estiver no Tall modo, a disposição Superior/Inferior ou se você quiser apenas um único painel visível, conforme definido pelo TwoPaneViewPriority.
WideModeConfiguration indica, quando no Wide modo, a disposição Esquerda/Direita ou se você deseja apenas um único painel visível, conforme definido pelo TwoPaneViewPriority.
PanePriority determina se deve ser exibido Pane1 ou Pane2 se está no SinglePane modo.

Solução de problemas

Se o layout não estiver funcionando conforme o TwoPaneView esperado, verifique novamente as instruções de configuração nesta página. Omitir ou configurar incorretamente o método ou os UseFoldable() ConfigurationChanges valores de atributo são causas comuns de erros.

Compartilhar via