Ventajas del uso de XAML
- 5 minutos
XAML es un lenguaje de marcado que puede usar para crear la interfaz de usuario en lugar del código C#. Con XAML, puede dividir el código de la interfaz de usuario y del comportamiento para facilitar su administración.
En esta unidad, compararás el uso de XAML con la definición del diseño de la interfaz de usuario mediante código de C#. También obtendrá información sobre algunas de las ventajas de usar XAML como lenguaje de marcado para definir la interfaz de usuario.
¿Qué es un lenguaje de marcado?
Un lenguaje de marcado es un lenguaje informático que se puede usar para presentar varios elementos en un documento. Los elementos se describen mediante etiquetas predefinidas. Las etiquetas tienen significados específicos en el contexto del dominio donde se usa el documento.
Por ejemplo, puede usar el Lenguaje de marcado de hipertexto (HTML) para crear una página web que se pueda mostrar en un explorador web. No es necesario comprender todas las etiquetas que usamos en el ejemplo siguiente; lo que es importante ver es que este código describe un documento que tiene el texto "Hello World!" como su contenido.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
Es probable que ya haya trabajado con un lenguaje de marcado. Es posible que haya creado una página web mediante HTML o bien que haya modificado las definiciones del lenguaje de marcado extensible (XML) en un archivo project.csproj de Visual Studio. Las herramientas de compilación de Microsoft analizan y procesan este archivo.
Es habitual que los archivos que contienen lenguaje de marcado se procesen e interpreten por medio de otras herramientas de software. Esta naturaleza interpretativa del marcado es exactamente cómo se ha diseñado el funcionamiento de XAML. Sin embargo, las herramientas de software que lo interpretan ayudan a generar la interfaz de usuario de la aplicación.
¿Qué es XAML?
XAML es un lenguaje declarativo de marcado creado por Microsoft. XAML se ha diseñado para simplificar el proceso de creación de la interfaz de usuario de las aplicaciones.
Los documentos XAML que crea contienen elementos que describen de forma declarativa los elementos de la interfaz de usuario de la aplicación. Tenga en cuenta que estos elementos en XAML representan directamente la creación de instancias de objetos. Una vez que haya definido un elemento en XAML, podrá acceder a el en archivos de código subyacente y definir el comportamiento mediante código de C#.
Diferencia entre el XAML de .NET MAUI y el XAML de Microsoft
XAML se basa en la especificación de XAML de 2009 de Microsoft. Sin embargo, esa especificación solo define la sintaxis del lenguaje. Como sucede con Windows Presentation Foundation (WPF), Plataforma universal de Windows (UWP) y WinUI 3, que usan XAML, los elementos que se declaran en XAML cambiarán.
XAML apareció por primera vez en 2006 con WPF. Si ha trabajado con Microsoft XAML durante un tiempo, la sintaxis XAML debería resultar familiar.
Hay algunas diferencias clave entre el tipo de .NET MAUI de XAML y el XAML que usan otras herramientas de interfaz de usuario. La estructura y los conceptos son similares, pero algunos de los nombres de las clases y propiedades son diferentes.
Creación de una interfaz de usuario mediante el XAML de .NET MAUI
La mejor manera de ver XAML en acción es ver un ejemplo de un tipo de página de ContentPage C#codificado existente. Después, puede compararlo con otra página que tiene la misma interfaz de usuario definida con XAML.
Supongamos que tiene el objeto ContentPage siguiente codificado en la aplicación:
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
La página contiene un contenedor de diseño, dos etiquetas, dos entradas y un botón. El código también controla el evento Clicked para el botón. También hay varias propiedades de diseño establecidas en los elementos de la página. En tiempo de ejecución, en un dispositivo Android, el aspecto de la página es el siguiente:
Aunque la página tiene un diseño sencillo, es una combinación de comportamiento y diseño en el mismo archivo.
El aspecto del mismo diseño de página definido con XAML es el siguiente:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
El aspecto del código de C# que inicializa la página e implementa el controlador de eventos para el evento Clicked del control LoginButton en el archivo de código subyacente es el siguiente:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
Nota:
El método InitializeComponent del constructor de página lee la descripción XAML de la página, carga los distintos controles de esa página y establece sus propiedades. Solo se llama a este método si se define una página mediante marcado XAML. El ejemplo anterior que muestra cómo crear la interfaz de usuario con código C# no invoca InitializeComponent.
Esta estructura permite la separación del diseño y el comportamiento. La declaración completa de la interfaz de usuario está contenida en un único archivo de origen dedicado, que es independiente del comportamiento de la interfaz de usuario. Además, el marcado XAML proporciona mayor claridad para un desarrollador que intenta comprender la apariencia y la apariencia de la aplicación.
Ventajas del uso de XAML
El uso de XAML le permite separar la lógica de comportamiento del diseño de la interfaz de usuario. Esta separación ayuda a crear cada pieza por separado y facilita la administración de toda la aplicación a medida que crece.
Este enfoque también permite que un diseñador de interfaz de usuario especializado trabaje en la actualización de la apariencia de la interfaz de usuario utilizando herramientas de edición XAML de forma independiente a un desarrollador que actualiza la lógica de la interfaz de usuario.