(En construcción) Introducción a XAML

[montyclt]

En el pasado desarrollé algunas aplicaciones de escritorio con .NET utilizando Windows Forms (cuando tenía catorce años escribí una serie de tutoriales de Visual Basic y Windows Forms, con muchos errores por mi desconocimiento en aquel momento) y más tarde con WPF con un proyecto para VADAVO.

En ambos casos, me limité a utilizar los editores visuales y nunca profundicé en el lenguaje XAML –en Windows Forms ni siquiera se usa XAML–, simplemente modificaba desde el código XAML alguna propiedad que no era capaz de ajustar desde el editor y poco más.

Ahora me ha surgido la necesidad de aprender tanto Avalonia como MAUI, pero esta vez he decidido que antes de empezar directamente con estos frameworks, quiero aprender XAML más a fondo dado que es algo fundamental tanto en MAUI como en Avalonia.

Por algún motivo, aprendo mejor cuando escribo sobre lo que he aprendido, por lo que me he tomado la libertad de iniciar una entrada para escribir aquello que vaya aprendiendo sobre XAML, y de paso pueda ser de ayuda a todo aquel que quiera iniciarse con XAML.

⚠️ Advertencia
Soy un absoluto novato en XAML, y que nunca he ido muy a fondo con él, por lo que esta entrada podría contener errores. Cualquier corrección en los comentarios es bienvenida.

El mayor problema que he encontrado para aprender XAML, es que no hay una documentación como tal de XAML, si no que está repartida y repetida por la documentación de WPF, Xamarin.Forms, MAUI, Avalonia, etc., por lo que es posible que algo que escriba aquí sólo se aplique a uno de estas tecnologías y no sea algo genérico de XAML. Si detectáis eso, avisadme en un comentario y lo corregiré.

XAML es XML

A pesar de que la extensión del fichero generalmente sea *.xaml o *.axaml, XAML implementa por completo el estándar XML, por lo que cualquier fichero XAML válido es a su vez un fichero XML válido.

Es por ello, que puedes encontrar la cabecera <?xml version="1.0" encoding="UTF-8" ?> en los ficheros XAML.

Las normas de sintaxis de XML se pueden encontrar en su especificación, pero para recordar lo más importante:

• Sólo puede haber un único elemento raíz. Esto es importante en el contexto de XAML porque el elemento raíz indica de que clase extiende.
• Todas las etiquetas deben de cerrarse.

XAML va más allá de WPF

XAML nació con WPF, pero es un estándar que se utiliza en otros frameworks de desarrollo que no son WPF. Algunos de ellos son MAUI, Xamarin.Forms, WinUI, Uno o Avalonia.

XAML es sensible a mayúsculas y minúsculas

La etiqueta <ContentPage> es diferente de <contentpage>.

AXAML vs XAML

Una de las primeras cosas que me ha llamado la atención cuando he hecho mis primeras pruebas con Avalonia, es que la extensión de los ficheros es *.axaml (Avalonia XAML) en vez de *.xaml. Al principio pensé que quizás Avalonia utiliza esta extensión porque extiende el estándar con algunas funcionalidades propias, pero según la documentación oficial de Avalonia, son archivos xaml estándar y se usa esta extensión para evitar que Visual Studio abra los archivos *.xaml. con el editor de WPF.

La propia documentación indica que puedes utilizar la extensión *.xaml en vez de *.axaml sin ningún problema. Yo, a título personal, utilizaré *.axaml en proyectos de Avalonia para que me coincida con lo que viene con las plantillas.

XAML es un lenguaje de creación de objetos

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication1.MainWindow"
        Title="Window with Button"
        Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

El anterior fragmento de código (extraído directamente de la documentación de Avalonia) instancia la clase Window con la propiedad Title establecida como "Window with Button" así como la clase Button con la propiedad Name establecida en "button" y la propiedad Click establecida a un método llamado button_Click.

Como se puede observar, hay contenido dentro de la etiqueta (dentro de Window, está la etiqueta Button, y dentro de Button, está el string "Click Me!". En realidad esto es el valor de la propiedad Content y podría escribirse así:

<Button Content="Click me!" Name="button" Click="button_Click" />

Aunque en ambos casos la propiedad se llama Content, para que esta actúe como contenido, el requisito es que esté decorada con el atributo [Content] y no el nombre. Intuyo que únicamente puede haber una propiedad con dicho atributo por cada control.

Esto podría ser escrito en C# de la siguiente forma:

new Window()
{
    Title = "Window with Button",
    Width = 250,
    Height = 100,
    Content = new Button()
    {
        Content = "Click me!",
        Name = "button",
        Click = button_Click
    }
}

Los ficheros XAML declaran clases

Cuando hay un fichero XAML, este declara una clase que extenderá del elemento raíz. Esto quiere decir que el anterior ejemplo declarará una clase que extiende de la clase Window.

El framework al que pertenece esta clase base está definido por la propiedad xmlns en el elemento raíz, por lo tanto si el valor de esta propiedad es https://github.com/avaloniaui, esta pertenece al set de controles de Avalonia. Si el valor es http://schemas.microsoft.com/winfx/2006/xaml/presentation, entonces estaríamos hablando de WPF. Cada framework tiene su propio xmlns.