Máster en .NET MAUI
Conviértete en un experto en el uso de .NET MAUI para crear aplicaciones para Android, Windows y iOS, con nuestro máster desde cero.
En esta sección vamos a dar una breve introducción al lenguaje de marcado XAML, que es el tipo de formato de archivo que se utilizará para crear interfaces gráficas en las aplicaciones .NET MAUI.
En lecciones anteriores, hemos creado una aplicación .NET MAUI, lo que ha creado un conjunto de archivos que forman parte del proyecto:
En el listado de archivos, podemos ver archivos que terminan con la extensión .xaml, tales como App.xaml, AppShell.xaml y MainPage.xaml.
Una cosa que es importante saber es que cada uno de estos archivos XAML contiene un archivo C# asociado, al cual se le conoce como code behind. Por ejemplo, si expandimos el nodo de la página MainPage.xaml, veremos un archivo llamado MainPage.xaml.cs, que contiene código C# asociado al archivo XAML:
Esto mismo lo podemos ver con cada archivo xaml.
Ahora bien, hay una diferencia fundamental con el archivo llamado App.xaml respecto a los otros archivos. Si procedemos a abrirlo, podemos ver que la etiqueta principal del archivo es una etiqueta Application:
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"...>
</Application> Este archivo App es muy importante, porque en el code behind se especifica cuál es la página inicial de la aplicación:
A diferencia de la página App.xaml, la página MainPage.xaml tiene al inicio una etiqueta llamada ContentPage:
Mientras que el archivo AppShell.xaml, tiene la etiqueta Shell:
Por el momento, no te preocupes por esta terminología, en una lección posterior del curso conocerás más sobre cada uno de estos elementos.
Por el momento, centrémonos en el archivo MainPage.xaml para ver algunas características del lenguaje XAML. En primer lugar, en este archivo y prácticamente en todos los archivos XAML, vas a encontrar un par de líneas, que se ven de la siguiente forma:
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Estas líneas se llaman espacios de nombres. Cuando veas algo similar en un archivo xaml, recuerda que se trata de un espacio de nombres.
Aunque pueda parecer que se trata de una URL que apunta a un sitio en Internet, la verdad es que no son URLs por las que puedas navegar para encontrar información, sino que son identificadores de versiones que contienen información para utilizar en las páginas XAML.
La primera etiqueta, que contiene el nombre aislado xmlns, se refiere a las clases del framework .NET MAUI. Si procedemos, por ejemplo, a borrar la línea del archivo, mira lo que pasa:
Vemos diferentes errores marcados en los controles que forman parte del framework .NET MAUI, ya que se encuentra su definición. Por lo tanto, es muy importante que no borres este namespace.
El segundo namespace está definido por un prefijo. El prefijo tiene la siguiente forma:
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Un prefijo, que está compuesto por el término xmlns: seguido de un nombre que puede ser el término que más te guste, sirve para declarar espacios de nombres que no están definidos por defecto, en este caso concreto, se hace referencia a elementos XAML.
Si eliminamos esta línea, veremos otro tipo de errores:
Esto está sucediendo, debido a que no se encuentra la declaración del prefijo llamado x, por lo que debemos dejar nuevamente este prefijo creado por default.
Un prefijo sirve para poder acceder a un espacio de nombres, que contiene a su vez diferentes clases que podemos usar en el archivo xaml. Por ejemplo, el prefijo x nos permite especificar la clase code behind que será utilizada para que trabaje en conjunto con el archivo XAML.
En el caso del ejemplo, se especifica el nombre completo del archivo code behind, que contiene el espacio de nombres principal (que regularmente es el nombre del proyecto), más el nombre de la clase, aunque si el archivo estuviera dentro de otras carpetas, el espacio de nombres sería mucho más largo:
x:Class="MauiApp4.MainPage" Otro elemento que es muy utilizado de este prefijo es el elemento x:Name, que permite agregar un identificador a un control para que podamos utilizarlo desde el code behind:
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />