Compartir a través de

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

  • Artículo

Examinar ejemplo. Examinar el ejemplo de

Las aplicaciones de interfaz de usuario de aplicaciones multiplataforma de .NET (.NET MAUI) pueden tener su interfaz de usuario personalizada para plataformas y dispositivos específicos. Esto permite que la aplicación:

  • Haga el uso más eficaz del espacio. Si diseña 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 habrá algo de espacio desperdiciado. Puedes personalizar la aplicación para mostrar más contenido cuando la pantalla esté por encima de un tamaño determinado. 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. Además, al colocar más contenido en pantalla, puede reducir la cantidad de navegación que los usuarios necesitan realizar.
  • Aproveche las funcionalidades del dispositivo. Es más probable que determinados dispositivos tengan ciertas funcionalidades. Por ejemplo, es más probable que los dispositivos móviles tengan un sensor de ubicación y una cámara, mientras que es posible que los dispositivos de escritorio no tengan ninguno de ellos. La aplicación puede detectar qué funcionalidades están disponibles y habilitar los controles que los usan.
  • Optimice para la entrada. Puede reorganizar los elementos de la interfaz de usuario para optimizarlos para tipos de entrada específicos. Por ejemplo, si coloca 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.

Al optimizar la interfaz de usuario de la aplicación para plataformas específicas y expresiones de dispositivo, está creando una interfaz de usuario con capacidad de respuesta. El enfoque principal para crear una interfaz de usuario con capacidad de respuesta en .NET MAUI implica el uso de las clases OnPlatform<T> y OnIdiom<T>. Un enfoque alternativo consiste en usar las extensiones de marcado XAML OnPlatform y OnIdiom. Sin embargo, estas extensiones de marcado no son seguras. Para obtener más información sobre las extensiones de marcado, consulte Personalizar la apariencia de la interfaz de usuario con extensiones de marcado.

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, consulte activador de estado.

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

Las clases OnPlatform<T> y On permiten personalizar la apariencia de la interfaz de usuario por plataforma:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform<T> es una clase genérica y, por tanto, debe especificar el argumento de tipo genérico, en este caso, Thickness, que es el tipo de propiedad Padding. Esto se logra con el atributo XAML de x:TypeArguments. La clase OnPlatform<T> define una propiedad Default que se puede establecer en un valor que se aplicará a todas las plataformas:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

En este ejemplo, la propiedad Padding se establece en valores diferentes en iOS y Android, mientras que en las otras plataformas se utiliza el valor predeterminado.

La clase OnPlatform<T> también define una propiedad Platforms, que es un IList de objetos On. Cada objeto On puede establecer la propiedad Platform y Value para definir el valor de Thickness para una plataforma específica. Además, la propiedad On.Platform es de tipo IList<string>, por lo que puede incluir varias plataformas delimitadas por comas si los valores son los mismos:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Si se proporciona un valor de Platform incorrecto, no se producirá un error. En su lugar, el XAML se ejecutará sin que se aplique el valor específico de la plataforma.

Nota

Si la propiedad Value de un objeto On no se puede representar mediante una sola cadena, puede definir elementos de propiedad para él.

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

La clase OnIdiom<T> 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:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> es una clase genérica y, por tanto, debe especificar el argumento de tipo genérico, en este caso, Thickness, que es el tipo de propiedad Margin. Esto se logra con el atributo XAML de x:TypeArguments. La clase OnIdiom<T> define una propiedad Default que se puede establecer en un valor que se aplicará a todas las plataformas:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness" Default="20">
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

En este ejemplo, la propiedad Margin se establece en un valor específico en las expresiones de escritorio, con las otras expresiones que se establecen en el valor predeterminado.

Personalizar la apariencia de la interfaz de usuario con extensiones de marcado

La apariencia de la interfaz de usuario también se puede personalizar con las extensiones de marcado OnPlatform y OnIdiom. Sin embargo, estas extensiones de marcado no son seguras.

Personalización de la apariencia de la interfaz de usuario con una extensión de marcado basada en la plataforma

La extensión de marcado OnPlatform le permite personalizar la apariencia de la interfaz de usuario por plataforma. Proporciona la misma funcionalidad que las clases OnPlatform<T> y On, pero con una representación más concisa.

La extensión de marcado OnPlatform es compatible con la clase 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 configuras a un valor para aplicar en Android.
  • iOS, de tipo object, que configuras a un valor para aplicar en iOS.
  • MacCatalyst, de tipo object, que usted establece en un valor que se aplicará en Mac Catalyst.
  • Tizen, de tipo object, al que se le asigna un valor para 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 configurar como una implementación de IValueConverter.
  • ConverterParameter, de tipo object, que se puede establecer en un valor para pasar a la implementación de IValueConverter.

Nota

El analizador XAML permite que la clase OnPlatformExtension se abrevia 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 el segmento Default= de la expresión si es el primer argumento. Si no se establece la propiedad Default, el valor predeterminado es el valor de propiedad BindableProperty.DefaultValue, siempre que la extensión de marcado tenga como destino un 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. Sin embargo, hay algunas conversiones de tipos que no se pueden realizar en los convertidores predeterminados y, en estos casos, la propiedad Converter debe establecerse en una implementación de IValueConverter.

En el ejemplo XAML siguiente 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 Color, WidthRequesty HeightRequest del 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 eliminan la parte Default= de la expresión.

Advertencia

La extensión de marcado OnPlatform no es segura y no debe usarse con el trimming completo ni con NativeAOT. En su lugar, debe usar la clase OnPlatform<T> para personalizar la apariencia de la interfaz de usuario por plataforma. Para obtener más información, consulte Personalizar la apariencia de la interfaz de usuario en función de la plataforma, Recortar una aplicación .NET MAUI y implementación nativa de AOT.

Personalización de la apariencia de la interfaz de usuario con una extensión de marcado basada en la expresión del dispositivo

La extensión de marcado OnIdiom 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. Proporciona la misma funcionalidad que la clase OnIdiom<T>, pero con una representación más concisa.

La extensión de marcado OnIdiom es compatible con la clase OnIdiomExtension, que define las siguientes propiedades:

  • Default, de tipo object, que se establece en un valor predeterminado que se aplicará a las propiedades que representan expresiones del dispositivo.
  • Phone, de tipo object, que usted configura a un valor que se aplicará en teléfonos.
  • Tablet, de tipo object, que se establece 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 para aplicar en plataformas de escritorio. Tenga en cuenta que algunos portátiles pueden clasificarse mediante la propiedad Tablet.
  • TV, de tipo object, que configuras con un valor para ser aplicado en las plataformas de TV.
  • Watch, de tipo object, que se establece en un valor para aplicarse en plataformas Watch.
  • Converter, de tipo IValueConverter, puede configurarse como una implementación de IValueConverter.
  • ConverterParameter, de tipo object, que se puede establecer en un valor para pasar a la implementación de IValueConverter.

Nota

El analizador XAML permite que la clase OnIdiomExtension se abrevia 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. Sin embargo, hay algunas conversiones de tipos que no se pueden realizar en los convertidores predeterminados y, en estos casos, la propiedad Converter debe establecerse en una implementación de IValueConverter.

En el ejemplo XAML siguiente 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 marcado de OnIdiom establecen las propiedades Color, WidthRequesty HeightRequest de la 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 elimina la parte Default= de la expresión.

Advertencia

La extensión de marcado OnIdiom no es segura y no debe usarse con el recorte completo ni con NativeAOT. En su lugar, debe usar la clase OnIdiom<T> para 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. Para obtener más información, consulte Personalizar la apariencia de la interfaz de usuario en función del tipo de dispositivo, Optimizar una aplicación MAUI de .NET y AOT nativa.