Aprende .NET MAUI creando proyectos
Aprende cómo crear aplicaciones multiplataforma, gracias al poder de .NET MAUI y una serie de proyectos reales.
En esta lección, vas a conocer las bases para trabajar con el lenguaje de marcado XAML.
Bases del lenguaje XAML
Este lenguaje de marcado sirve para crear interfaces gráficas en tecnologías como .NET MAUI y WPF, y puede parecerte familiar si has trabajado con código HTML o archivos XML, ya que la sintaxis es muy parecida.
Si se dese declarar un elemento en un archivo XAML, se debe escribir el nombre del elemento entre un símbolo menor que y un símbolo mayor que:
<element...> En segundo lugar, cada que definamos una etiqueta de apertura debemos especificar una forma de cierre del elemento. Existen dos formas de hacer esto, primero, declarando una etiqueta de cierre:
<element...></element> También es posible, agregar una diagonal al final de la etiqueta para lograr el mismo objetivo:
<element.../> Puedes practicar revisando las etiquetas del proyecto creado por default. A continuación, te muestro la sintaxis del botón, que sigue la misma estructura que te he indicado anteriormente:
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" /> Propiedades de los elementos en un archivo XAML
Atributos de Propiedad
Otra cosa que también es importante que conozcas son las propiedades. Las propiedades son los atributos o características de cada elemento gráfico que vas a poder manipular para que se vea y comporte como necesites.
Por ejemplo, si quisiéras modificar el texto que aparece en la interfaz gráfica del botón anterior, deberías modificar la propiedad text:
<Button Text="Don't click me!"... /> A esta forma de asignar el valor de las propiedades dentro de la misma definición del elemento, es conocida como atributos de propiedad.
Elementos de Propiedad
La segunda forma de asignar valores a las propiedades es a través de los elementos de propiedad.
Para asignar un valor de esta forma, debemos trabajar con una etiqueta de apertura y una de cierre en el elemento que queramos modificar, y acceder a la propiedad de la siguiente forma:
<Button>
<Button.Text>
Devs School
</Button.Text>
</Button> Diferencia entre Atributos de Propiedad y Elementos de Propiedad en archivos XAML
Podríamos pensar que es más sencillo asignar valores a un control a través de los atributos de propiedad, en lugar de crear el par de etiquetas para cada propiedad que quisiéramos modificar, lo cual es verdad.
Sin embargo, van a haber ocasiones en las cuales el valor que tengamos que especificar para una propiedad sea un valor complejo, como en el siguiente ejemplo:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid...>
...
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate> En el código anterior, podemos apreciar una propiedad llamada ItemTemplate de un control llamado CollectionView, al cual debemos asignar un elemento tipo DataTemplate, el cual a su vez contiene un Layout tipo Grid. Esto no es posible hacerlo con Atributos de Propiedad de forma directa.
Jerarquía en un archivo XAML
Por último, vamos a hablar un poco acerca de la jerarquía de los elementos en un archivo XAML. Visual Studio hace un gran trabajo formateando los elementos que forman parte de un archivo XAML, inclusive nos muestra líneas para que identifiquemos rápidamente las etiquetas de apertura y de cierre, permitiéndonos ver la jerarquía en los elementos:
Esto nos habla de una jerarquía entre los elementos en el documento XAML. Una vez que conocemos acerca de la sintaxis básica de los archivos XAML, estamos preparados para conocer acerca de las páginas en .NET MAUI.