Layout TwoPaneView do Xamarin. Forms

  • Artigo

o controle TwoPaneView está disponível no Xamarin. Forms. DualScreen NuGet preview. O código a seguir mostra um exemplo de XAML simples:

<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 ambos os painéis, o que significa que, quando o aplicativo estiver sendo executado 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 é renderizado 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 largo, a altura de Pane1 no modo alto e não tem efeito no modo de SinglePane.
  • Pane2Length – define a largura de Pane2 no modo largo, a altura de Pane2 no modo alto e não tem efeito no modo de 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 superiores/inferiores, inferior/superior ou um único painel pode ser mostrado apenas.
  • WideModeConfiguration – quando em modo largo, os painéis podem ser esquerda/direita, direita/esquerda 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. Na superfície 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. Na superfície 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 UWP TwoPaneView também se aplicam ao controle Xamarin.

Solução de problemas

Se você observar um comportamento ou layout inesperado de TwoPaneView , verifique as instruções de configuração, incluindo o método e ConfigurationChanges o Init atributo.