Personalización de la apariencia de la interfaz de usuario en función de la plataforma y la expresión del dispositivo

Examinar el ejemplo

Las aplicaciones de .NET Multi-Platform App UI (.NET MAUI) pueden tener su interfaz de usuario personalizada para plataformas y dispositivos específicos. Esta aplicación web te permite:

• Aprovechar el espacio de la forma más eficaz. Si diseñas una aplicación para que se vea bien en un dispositivo móvil, la aplicación seguirá siendo utilizable en un dispositivo de escritorio, pero probablemente se desperdiciará algo de espacio. Puedes personalizar la aplicación para mostrar más contenido cuando la pantalla esté por encima de un determinado tamaño. Por ejemplo, una aplicación de compras podría mostrar un elemento a la vez en un dispositivo móvil, pero podría mostrar varios elementos en un dispositivo de escritorio. Al colocar más contenido en la pantalla, se reduce la cantidad de navegación que el usuario necesita realizar.
• Aprovechar las funciones de los dispositivos. Determinados dispositivos tienen más probabilidad de contar con ciertas funciones. Por ejemplo, los portátiles suelen tener un sensor de ubicación y una cámara, mientras que un televisor puede que no tenga ninguna de las dos funciones. La aplicación puede detectar qué funciones están disponibles y habilitar las funciones que las usan.
• Optimizar la entrada. Puedes reorganizar los elementos de la interfaz de usuario para optimizarlos para tipos de entrada específicos. Por ejemplo, si colocas elementos de navegación en la parte inferior de la aplicación, serán más fáciles de acceder a los usuarios móviles. Pero los usuarios de escritorio suelen esperar ver elementos de navegación hacia la parte superior de la aplicación.

Cuando optimizas la interfaz de usuario de la aplicación para plataformas y lenguajes de dispositivo específicos, estás creando una interfaz de usuario con capacidad de respuesta. Los enfoques principales para crear una interfaz de usuario con capacidad de respuesta en .NET MAUI implican usar la extensión de marcado OnPlatform y la extensión de marcado OnIdiom.

Nota:

Hay una categoría de desencadenadores, conocidos como desencadenadores de estado, que se pueden usar para personalizar la apariencia de la interfaz de usuario en escenarios específicos, como cuando cambia la orientación de un dispositivo. Para obtener más información, consulta Desencadenador de estado.

Personalización de la apariencia de la interfaz de usuario en función de la plataforma

La extensión de marcado OnPlatform le permite personalizar el aspecto de la interfaz de usuario para cada plataforma. Ofrece la misma función que las clases OnPlatform<T> y On, pero con una representación más concisa.

La clase OnPlatform admite la extensión de marcado OnPlatformExtension, que define las siguientes propiedades:

• Default, de tipo object, que se establece en un valor predeterminado que se aplicará a las propiedades que representan las plataformas.
• Android, de tipo object, que se establece en un valor que se aplicará en Android.
• iOS, de tipo object, que se establece en un valor que se aplicará en iOS.
• MacCatalyst, de tipo object, que se establece en un valor que se aplicará en Mac Catalyst.
• Tizen, de tipo object, que se establece en un valor que se aplicará en la plataforma Tizen.
• WinUI, de tipo object, que se establece en un valor que se aplicará en WinUI.
• Converter, de tipo IValueConverter, que se puede establecer en una implementación IValueConverter.
• ConverterParameter, de tipo object, que se puede establecer en un valor para pasar a la implementación IValueConverter.

Nota:

El analizador de XAML permite abreviar la clase OnPlatformExtension como OnPlatform.

La propiedad Default es la propiedad de contenido de OnPlatformExtension. Por lo tanto, para las expresiones de marcado XAML expresadas con llaves, puedes eliminar la parte Default= de la expresión si es el primer argumento. Si la propiedad Default no está establecida, el valor predeterminado es el valor de la propiedad BindableProperty.DefaultValue, siempre que la extensión de marcado tenga como destino BindableProperty.

Importante

El analizador XAML espera que los valores del tipo correcto se proporcionen a las propiedades que consumen la extensión de marcado OnPlatform. Si es necesaria la conversión de tipos, la extensión de marcado OnPlatform intentará realizarla mediante los convertidores predeterminados proporcionados por .NET MAUI. Pero, hay algunas conversiones de tipo que no se pueden realizar en los convertidores predeterminados y, en estos casos, la propiedad Converter debe establecerse en una implementación IValueConverter.

En la página Demostración de OnPlatform se muestra cómo usar la extensión de marcado OnPlatform:

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

En este ejemplo, las tres expresiones OnPlatform usan la versión abreviada del nombre de clase OnPlatformExtension. Las tres extensiones de marcado OnPlatform establecen las propiedades xref:Microsoft.Maui.Graphics.Color, WidthRequest y HeightRequest de BoxView en valores diferentes en iOS y Android. Las extensiones de marcado también proporcionan valores predeterminados para estas propiedades en las plataformas que no se especifican, al tiempo que se elimina la parte de la expresión Default=.

Personalización de la apariencia de la interfaz de usuario en función de la expresión del dispositivo

La extensión de marcado OnIdiom te permite personalizar la apariencia de la interfaz de usuario en función de la expresión del dispositivo en el que se ejecuta la aplicación. Es compatible con la clase OnIdiomExtension, que define las siguientes propiedades:

• Default, de tipo object, que estableces en un valor predeterminado que se aplicará a las propiedades que representan expresiones del dispositivo.
• Phone, de tipo object, que estableces en un valor que se aplicará en teléfonos.
• Tablet, de tipo object, que estableces en un valor que se aplicará en tabletas. Esta propiedad no es exclusiva de plataformas Android e iOS.
• Desktop, de tipo object, que estableces en un valor que se aplicará en plataformas de escritorio. Tenga en cuenta que algunos portátiles pueden clasificarse mediante la propiedad Tablet.
• TV, de tipo object, que estableces en un valor que se aplicará en las plataformas de TV.
• Watch, de tipo object, que estableces en un valor que se aplicará en plataformas de reloj.
• Converter, de tipo IValueConverter, que se puede establecer en una implementación IValueConverter.
• ConverterParameter, de tipo object, que se puede establecer en un valor para pasar a la implementación IValueConverter.

Nota:

El analizador de XAML permite abreviar la clase OnIdiomExtension como OnIdiom.

La propiedad Default es la propiedad de contenido de OnIdiomExtension. Por lo tanto, para las expresiones de marcado XAML expresadas con llaves, puedes eliminar la parte Default= de la expresión si es el primer argumento.

Importante

El analizador XAML espera que los valores del tipo correcto se proporcionen a las propiedades que consumen la extensión de marcado OnIdiom. Si es necesaria la conversión de tipos, la extensión de marcado OnIdiom intentará realizarla mediante los convertidores predeterminados proporcionados por .NET MAUI. Pero, hay algunas conversiones de tipo que no se pueden realizar en los convertidores predeterminados y, en estos casos, la propiedad Converter debe establecerse en una implementación IValueConverter.

En el ejemplo siguiente de XAML se muestra cómo usar la extensión de marcado OnIdiom:

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

En este ejemplo, las tres expresiones OnIdiom usan la versión abreviada del nombre de clase OnIdiomExtension. Las tres extensiones de marcadoOnIdiom establecen las propiedades Color, WidthRequest y HeightRequest de BoxView en valores diferentes en las expresiones de teléfono, tableta y escritorio. Las extensiones de marcado también proporcionan valores predeterminados para estas propiedades en las expresiones que no se especifican, al tiempo que se elimina la parte Default= de la expresión.