Diseño twoPaneView de Xamarin.Forms

  • Artículo

El control TwoPaneView está disponible en la versión preliminar de Xamarin.Forms.DualScreen NuGet vista previa. En el código siguiente se muestra un ejemplo xaml sencillo:

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

De forma predeterminada, TwoPaneView intentará representar siempre ambos paneles, lo que significa que cuando la aplicación se ejecuta en una sola pantalla, la vista se dividirá entre los dos paneles. Las siguientes propiedades se pueden usar para afectar al diseño cuando solo se representa en una pantalla:

  • MinTallModeHeight: indica el alto mínimo que debe tener el control para entrar en el modo alto.
  • MinWideModeWidth: indica el ancho mínimo que debe tener el control para entrar en el modo ancho.
  • Pane1Length : establece el ancho de Pane1 en modo Ancho, el alto de Pane1 en modo Tall y no tiene ningún efecto en el modo SinglePane.
  • Pane2Length : establece el ancho de Pane2 en modo Wide, el alto de Pane2 en modo Tall y no tiene ningún efecto en el modo SinglePane.

En el dispositivo Surface Duo, las aplicaciones se pueden distribuir en dos pantallas. El control TwoPaneView tiene propiedades adicionales que determinan dónde se representan los dos paneles uno con respecto al otro (en una sola pantalla o en dos):

  • TallModeConfiguration : cuando está en modo tall, los paneles pueden ser Superior/Inferior, Inferior/Superior, o solo se puede mostrar un único panel.
  • WideModeConfiguration : cuando está en modo ancho, los paneles pueden ser Izquierda/Derecha, Derecha/Izquierda o solo un único panel.
  • PanePriority: si se va a mostrar Pane1 o Pane2 si en el modo SinglePane se elige para el modo alto o ancho.

Hay tres modos de presentación:

  • SinglePane: solo hay un panel visible.
  • Wide: los dos paneles se colocan en horizontal. Un panel se sitúa a la izquierda y el otro a la derecha. En Surface Duo, las dos pantallas están en modo vertical.
  • Tall: los dos paneles se colocan en vertical. Un panel está en la parte superior y el otro en la parte inferior. En Surface Duo, las dos pantallas están en modo horizontal.

Obtenga más información en la documentación de Xamarin. Algunas de las consideraciones de diseño de la documentación de TwoPaneView de UWP también se aplican al control de Xamarin.

Solución de problemas

Si observa un comportamiento o un diseño inesperados de TwoPaneView, compruebe las instrucciones de configuración, incluidos el Init método y el ConfigurationChanges atributo .