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.
Vamos a analizar el tipo de página ContentPage. Este es el tipo de página más utilizado a la hora de crear aplicaciones .NET MAUI, ya que permiten añadir Layouts y controles para crear páginas.
Incluso si revisamos el archivo por default llamado MainPage.XAML, podemos ver que se trata de una ContentPage:
<ContentPage
x:Class="MauiApp4.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ScrollView>
...
</ScrollView>
</ContentPage> Cuando ves este tipo de página ContentPage, es indicativo de que va a tener Layouts y Controles. En el código de ejemplo anterior, la ContentPage tiene una jerarquía de Layouts y Controles. El primer control es un control llamado ScrollView.
Un punto importante a tener en cuenta con este tipo de página es que sólo puede contener un elemento a nivel raíz en su jerarquía.
Por ejemplo, si quisiéramos añadir un Layout llamado Grid, que veremos en otra lección, veremos que Visual Studio marca un error indicando que la propiedad Content está siendo establecida más de una vez:
Una pregunta que tal vez te hagas es, ¿Cómo podemos añadir una nueva ContentPage al proyecto?
Para hacer esto, tenemos que hacer clic con el botón derecho del ratón sobre el proyecto, e indicar que queremos crear un nuevo elemento:
Esto desplegará una nueva ventana, en la que veremos diferentes tipos de páginas que podemos añadir.
Vamos a seleccionar la plantilla .NET MAUI ContentPage con una sintaxis XAML. Tenemos la opción de cambiar el nombre de la página, a la cual nombraré para este ejercicio ContentPageDemo. Al dar clic sobre el botón Add, se creará el nuevo archivo llamado ContentPageDemo.xaml, con su respectivo archivo C# asociado.
A diferencia del proyecto inicial, esta página de contenido tiene menos contenido, ya que la jerarquía sólo tiene un StackLayout, y dentro del StackLayout un control Label:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp4.ContentPageDemo"
Title="ContentPageDemo">
<VerticalStackLayout>
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentPage> Una vez que hemos creado la nueva ContentPage, practiquemos los conocimientos de lecciones previos y asignemos esta nueva página como la página inicial del proyecto. Para ello, abrimos el archivo App.xaml.cs, y creemos una nueva instancia de la página ContentPageDemo asignándola a MainPage:
public App()
{
InitializeComponent();
MainPage = new ContentPageDemo();
} Una vez que realizamos este cambio, si lanzamos la aplicación, veremos el contenido de la nueva página siendo mostrado:
Como parte de la ContentPage, tenemos una propiedad que podemos modificar llamada BackgroundColor, a la que podemos asignar un color para cambiar el color de fondo. Asignemos un color predeterminado llamado DarkBlue para la página, con lo que podremos ver el cambio en el emulador:
Por el momento, esto es todo lo que vamos a ver respecto a una ContentPage, más adelante trabajaremos intensamente con este tipo de páginas en ejemplos y aplicaciones.
Si quieres ver este tutorial en acción, puedes reproducirlo a continuación:
