Doble pantalla de Xamarin.Forms

Los dispositivos de doble pantalla como Microsoft Surface Duo ofrecen nuevas posibilidades de experiencia del usuario para las aplicaciones. Xamarin.Forms incluye las clases TwoPaneView y DualScreenInfo para que pueda desarrollar aplicaciones para dispositivos de doble pantalla.

Primeros pasos

Siga estos pasos para agregar funcionalidades de doble pantalla a una aplicación Xamarin.Forms:

  1. Abra el cuadro de diálogo Administrador de paquetes de NuGet para su solución.

  2. En la pestaña Examinar, busque .

  3. Instale el paquete de Xamarin.Forms.DualScreen en la solución.

  4. Agregue la siguiente llamada al método de inicialización a la clase MainActivity del proyecto de Android, en el evento OnCreate:

    Xamarin.Forms.DualScreen.DualScreenService.Init(this);
    

    Este método es necesario para que la aplicación pueda detectar cambios en el estado de la aplicación, como el hecho de abarcar un espacio de dos pantallas.

  5. Actualice el atributo en la clase del proyecto de Activity Android para que incluya MainActivityActivity estas ConfigurationChanges opciones:

    ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation
        | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
    

    Estos valores son necesarios para que los cambios de configuración y el espacio abarcado se puedan notificar de forma más confiable. De forma predeterminada, solo dos se agregan a los proyectos de Xamarin.Forms, por lo que no olvide agregar el resto para ofrecer compatibilidad de doble pantalla confiable.

Solución de problemas

Si la clase DualScreenInfo o el diseño TwoPaneView no funcionan del modo esperado, revise de nuevo las instrucciones de configuración de esta página. La omisión o la incorrecta configuración del método Init o de los valores de atributo de ConfigurationChanges son causas comunes de error.

Revise para Xamarin.Forms dual-screen samples obtener instrucciones adicionales e implementación de referencia.

Pasos siguientes

Una vez que haya agregado NuGet, agregue características de doble pantalla a la aplicación con las siguientes instrucciones:

  • Modelos de diseño de doble pantalla: al considerar el uso óptimo de varias pantallas en un dispositivo de doble pantalla, consulte estas instrucciones de patrones para encontrar la mejor opción para la interfaz de su aplicación.
  • Diseño twoPaneView: la clase, inspirada en el control de UWP del mismo nombre, es un diseño multiplataforma optimizado para dispositivos TwoPaneView de doble pantalla.
  • Clase auxiliar DualScreenInfo: la clase le permite determinar en qué panel se encuentra la vista, su tamaño, en qué posición se encuentra el dispositivo, el ángulo de la bisagra y mucho más.
  • Desencadenadores de pantalla doble: el espacio de nombres de incluye dos desencadenadores de estado que desencadenan un cambio de VisualState cuando varía el modo de visualización del diseño adjunto o de la ventana.

Para obtener más información, consulte la documentación sobre la doble pantalla para desarrolladores.