Compartilhar via

Xamarin.Forms Layout TwoPaneView

  • Artigo

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.

Configurar o TwoPaneView

Siga estas instruções para criar um layout de tela dupla em seu aplicativo:

  1. Siga as instruções de introdução para adicionar o NuGet e configurar a classe Android MainActivity .

  2. Comece com um básico TwoPaneView usando o seguinte XAML:

    <ContentPage
    xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen">
    <dualScreen:TwoPaneView>
        <dualScreen:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane1>
        <dualScreen:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane2>
    </dualScreen:TwoPaneView>
</ContentPage>

Dica

O XAML acima omite muitos atributos comuns do ContentPage elemento . Ao adicionar um TwoPaneView ao seu aplicativo, lembre-se de declarar o xmlns:dualScreen namespace conforme mostrado.

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 deverá ter para entrar no modo alto.
  • MinWideModeWidth indica a largura mínima que o controle deverá ter para entrar no modo largo.
  • Pane1Length define a largura de Pane1 no modo largo, a altura de Pane1 no modo alto e não tem efeito no modo SinglePane.
  • Pane2Length define a largura de Pane2 no modo largo, a altura de Pane2 no modo alto e não tem efeito no modo SinglePane.

Importante

Caso TwoPaneView se estenda pelas duas telas, essas propriedades não terão nenhum 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 no modo alto, a disposição Superior/Inferior ou se você deseja apenas um único painel visível, conforme definido pelo TwoPaneViewPriority.
  • WideModeConfiguration indica, quando no modo largo, a disposição Esquerda/Direita ou se você deseja apenas um único painel visível, conforme definido pelo TwoPaneViewPriority.
  • PanePriority determina se o Pane1 ou o Pane2 deve estar no modo SinglePane.