Layout TwoPaneView do Xamarin.Forms

O controle TwoPaneView está disponível na versão prévia do Xamarin.Forms.DualScreen NuGet versão prévia. O código a seguir mostra um exemplo simples de 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>

Por padrão, o TwoPaneView tentará sempre renderizar os dois painéis, o que significa que, quando o aplicativo estiver em execução em uma única tela, a exibição será dividida entre os dois painéis. As propriedades a seguir podem ser usadas para afetar o layout quando ele está sendo renderizados apenas em uma tela:

  • MinTallModeHeight: indica a altura mínima em que o controle precisa ter para entrar no modo vertical.
  • MinWideModeWidth: indica a largura mínima que o controle precisa ter para entrar no modo largo.
  • Pane1Length – define a largura de Pane1 no modo Wide, a altura de Pane1 no modo Alto e não tem efeito no modo SinglePane.
  • Pane2Length – define a largura de Pane2 no modo Wide, a altura de Pane2 no modo Alto e não tem efeito no modo SinglePane.

No Surface Duo, os aplicativos podem ser estendidos em duas telas. O controle TwoPaneView tem propriedades adicionais que determinam o local em que os dois painéis são renderizados em relação um ao outro (em tela única ou dupla):

  • TallModeConfiguration – quando no modo alto, os painéis podem ser Superior/Inferior, Inferior/Superior ou um único painel só pode ser mostrado.
  • WideModeConfiguration – quando no modo largo, os painéis podem ser Left/Right, Right/Left ou apenas um único painel.
  • PanePriority – se deve mostrar Pane1 ou Pane2 se no modo SinglePane for escolhido para o modo alto ou largo.

Há três modos de exibição:

  • SinglePane: somente um painel está visível no momento.
  • Wide: os dois painéis são dispostos horizontalmente. Um painel fica à esquerda, e o outro, à direita. No Surface Duo, as duas telas estão no modo retrato.
  • Tall: os dois painéis são dispostos verticalmente. Um painel fica na parte superior, e o outro, na parte inferior. No Surface Duo, as duas telas estão no modo paisagem.

Leia mais na documentação do Xamarin. Algumas das considerações de design na documentação do TwoPaneView da UWP também se aplicam ao controle Xamarin.

Solução de problemas

Se você observar um comportamento ou layout inesperado de , verifique as TwoPaneViewTwoPaneView, incluindo Init o método e o atributo ConfigurationChanges .