Tipos y propiedades en XAML de .NET MAUI
XAML es un lenguaje declarativo de marcado. Se ha diseñado con la idea de simplificar el proceso de creación de la interfaz de usuario. Los elementos de XAML representan directamente la creación de instancias de objetos a las que se accede desde archivos de código subyacente.
En esta unidad aprenderá a usar los tipos disponibles en XAML y a establecer y leer las propiedades de estos tipos.
¿Dónde se definen los tipos?
.NET MAUI implementa un analizador XAML que analiza los elementos XAML declarados y crea una instancia de cada elemento como un tipo .NET. El dialecto XAML que el analizador de .NET MAUI entiende es específico de .NET MAUI, aunque es similar al XAML que usan otros marcos, como Windows Presentation Foundation.
Los tipos de .NET que implementan los elementos identificados por el código XAML se implementan mediante código en varios ensamblados .NET. Muchos de estos ensamblados se incluyen como parte de las plantillas de .NET MAUI. También puede usar otros tipos personalizados cargando los ensamblados apropiados como parte del proyecto. Muchos ensamblados están disponibles como paquetes de NuGet. La mayoría de los tipos comunes que usa una aplicación MAUI se encuentran en el Microsoft.Maui.Dependencies y paquetes de Microsoft.Maui.Extensions.
Cada tipo se define en un espacio de nombres. En el código XAML se deben especificar los espacios de nombres para los tipos a los que se hace referencia. La mayoría de los controles MAUI se encuentran en el espacio de nombres Microsoft.Maui.Controls, mientras que el espacio de nombres Microsoft.Maui define tipos de utilidades como Thickness, y el espacio de nombres Microsoft.Maui.Graphics incluye tipos generalizados, como Color. La opción de introducir tipos de este modo resalta la extensibilidad de XAML. XAML permite crear la interfaz de usuario de la aplicación con la libertad de incluir elementos XAML de .NET MAUI, tipos .NET y tipos personalizados. En la mayoría de los casos no es necesario preocuparse por estos espacios de nombres, ya que se incluyen mediante la característica usings de uso implícito de C#, que los agrega automáticamente a toda la aplicación.
Cómo crear instancias de tipos en XAML
El primer paso para usar XAML para crear una interfaz de usuario consiste en crear instancias de los tipos de control de la interfaz de usuario. En XAML puede crear un objeto de un tipo especificado mediante la sintaxis del elemento Objeto. La sintaxis de elemento Objeto es una sintaxis XML estándar y bien formada para declarar un elemento. Por ejemplo, si quiere crear una etiqueta con un color específico, el elemento XAML tendrá un aspecto similar al siguiente código:
<Label TextColor="AntiqueWhite"/>
El analizador XAML de .NET MAUI analiza este elemento XAML para crear instancias del objeto en memoria. De hecho, la etiqueta XAML analizada es la misma que el siguiente código C#:
var myLabel = new Label
{
TextColor = Color.FromRgb(255, 255, 100)
};
¿Qué es un espacio de nombres XAML?
Recuerde que para que el analizador XAML analice correctamente la definición XAML de un control en una página, debe tener acceso al código que implementa el control y define sus propiedades. Los controles disponibles para una página de .NET MAUI se implementan en una colección de ensamblados que se instalan como parte del paquete de NuGet Microsoft.Maui. Los controles se encuentran en un espacio de nombres .NET en estos ensamblados. En código C# se introduce un espacio de nombres en el ámbito con la directiva using. En una página XAML se hace referencia a un espacio de nombres con el atributo xmlns de la página. El código siguiente muestra los espacios de nombres que usa la página XAML creada en la unidad anterior:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...>
...
</ContentPage>
El primer espacio de nombres, http://schemas.microsoft.com/dotnet/2021/maui, es el espacio de nombres predeterminado de la página. Esta forma URI de espacio de nombres es típica de XML y tiene un aspecto ligeramente diferente a las formas con las que puede estar familiarizado en C#. Sin embargo, este URI es simplemente un alias para uno o varios de los espacios de nombres definidos por los ensamblados en el paquete de NuGet Microsoft.Maui, por lo que especificar este espacio de nombres al principio de la página pone todos los tipos y controles de .NET MAUI en el ámbito. Si omite este espacio de nombres, no podrá usar controles como Button, Label, Entry o StackLayout.
El segundo espacio de nombres, http://schemas.microsoft.com/winfx/2009/xaml, hace referencia a los ensamblados que contienen los distintos tipos intrínsecos de .NET como cadenas, números y propiedades. En el código XAML anterior, a este espacio de nombres se le asigna el alias x. En el código XAML de esta página se hace referencia a los tipos de este espacio de nombres al agregar el prefijo x:. Por ejemplo, cada página XAML se compila en una clase y se especifica el nombre de la clase que se genera con el atributo x:Class de la página:
<ContentPage ...
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
...>
...
</ContentPage>
Puede hacer referencia a tipos en sus propios ensamblados en código XAML a través de un espacio de nombres XAML. Por ejemplo, si tiene tipos y métodos que desea usar en el código XAML definido en un espacio de nombres denominado Utils en el proyecto, puede agregar el espacio de nombres Utils a la página como se muestra en el código siguiente. En este ejemplo puede acceder a los tipos de este espacio de nombres prefijados con el alias mycode.
<ContentPage ...
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mycode="clr-namespace:Utils"
...>
...
</ContentPage>
Nota:
Verá más ejemplos de esta técnica más adelante en este módulo.
Cómo especificar valores de propiedad en XAML
En XML se usan atributos para describir o proporcionar información sobre un elemento. En XAML se usan atributos para establecer propiedades en el tipo subyacente. Por ejemplo, considere el código de C# siguiente:
var label = new Label { Text = "Username", TextColor = Color.Black };
Esta instrucción crea un objeto Label nuevo y establece las propiedades Text y TextColor. Para establecer propiedades en XAML, se usan atributos. El código XAML correspondiente tiene este aspecto:
<Label Text="Username" TextColor="Black" />
Una cosa que puede observar que es diferente en el código XAML que el código de C# es los valores de propiedad. Por ejemplo, en el código de C#, use el tipo Color para la propiedad TextColor. Sin embargo, en la definición XAML, se establece TextColor con un valor de cadena. Esto se debe a que una cadena es el único elemento válido que puede usar para un valor de atributo XML. Por lo tanto, debe haber una forma de convertir cada valor de cadena a su tipo correcto. En XAML, puede realizar esta conversión mediante un Convertidor de tipos.
¿Qué es un convertidor de tipos?
Un convertidor de tipos convierte un atributo XML especificado como un valor de cadena a su tipo correcto. Para comprender mejor este concepto, considere el siguiente ejemplo:
<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic" />
Este código crea un Label y establece sus propiedades Text, TextColor, FontSize y FontAttributes.
Comience con la primera propiedad, Text. El texto ya es una cadena, lo que significa que la página XAML no necesita un convertidor de tipos. A continuación, TextColor usa el tipo Color, por lo que XAML requiere un convertidor de tipos para traducir la cadena en el valor correspondiente de Color. La propiedad FontSize es un entero, por lo que XAML requiere un convertidor de tipos para convertir la cadena en un entero. Por último, FontAttributes es un ejemplo de un objeto complejo. Puede combinar los valores como una cadena delimitada por comas: "Bold,Italic". La cadena delimitada por comas se trata como una enumeración basada en [Marcas] y el convertidor de tipos apropiado aplicará el OR bit a bit al valor de la propiedad.
.NET MAUI tiene convertidores de tipos para la mayoría de las clases integradas y usa estos convertidores de tipos automáticamente. Pero si no existe un convertidor de tipos específico, puede escribir uno propio y asociarlo al tipo para que se pueda usar en XAML.
Asignación de tipos complejos
Los convertidores de tipos son excelentes para la configuración de propiedades simples; pero en algunos casos, tendrá que crear un objeto completo con sus propios valores de propiedad. La solución a este problema consiste en cambiar la asignación de propiedad para usar una sintaxis basada en elementos. Esta sintaxis se denomina de elementos de propiedad. Esta sintaxis implica dividir el establecedor de propiedades en el formulario primario-secundario, donde la propiedad se expresa en una etiqueta de elemento del formulario Type.PropertyName. Suponga que desea asignar un reconocedor de gestos a una etiqueta para que el usuario de la aplicación pueda pulsar en la etiqueta. El reconocedor de gestos es un objeto complejo con sus propias propiedades. Normalmente, estas propiedades se deben asignar para garantizar el funcionamiento correcto:
<TapGestureRecognizer NumberOfTapsRequired="2" />
Si necesita asignar este valor a un Label, puede escribir el XAML de esta forma:
<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" />
</Label.GestureRecognizers>
</Label>
El tipo Label tiene una propiedad denominada GestureRecognizers. Mediante el formulario Elemento de propiedad, puede agregar una TapGestureRecognizer a la lista de gestos para el Label.
Propiedad de contenido predeterminada
Algunos controles de .NET MAUI tienen una propiedad de contenido predeterminada. La propiedad de contenido permite especificar el valor de una propiedad en un control sin especificarla de forma explícita en XAML. Eche un vistazo al siguiente fragmento de XAML:
<VerticalStackLayout>
<VerticalStackLayout.Children>
<Label Text="Please log in" />
</VerticalStackLayout.Children>
</VerticalStackLayout>
Este código crea un VerticalStackLayout y agrega un Label como elemento secundario. Dado que es habitual agregar elementos secundarios a un VerticalStackLayout, su propiedad Children es la propiedad de contenido predeterminada. Esto significa que puede agregar un elemento secundario sin especificar explícitamente el Children, como se indica a continuación:
<VerticalStackLayout>
<Label Text="Please log in" />
</VerticalStackLayout>