Crear una Aplicacion con C# .NET MAUI

Las aplicaciones C# .NET MAUI o Multi-platform App UI son multi plataforma y se pueden compilar Android, Windows, iOs , MacOs entre otros.

Para el diseño de las aplicaciones .NET MAUI se usa XAML que tambien se usa en aplicaciones WPF.

Vamos acrear una aplicacion sencilla.

Crear app en el Visual Studio Community

Y le vamos aponer un nombre a nuestro proyecto y vamos a seleccionar la version de .NET mas reciente o que tenga mejor soporte.

El visual estudio nos va a brindar 3 opciones muy importantes.

Editor de Codigo

El editor de codigo nos permite ver el codigo XAML y C# de nuestra aplicacion, en este caso los mas importantes son MainProgram.css, MainPage.xaml y MainPage.cs

Editor de Interfaz

El editor de interfaces nos permite ver visualmente lo que estamos haciendo y agregar, modicar y eliminar componentes.

Explorador de Archivos

Aqui podemos ver todos los archivos de nuestro proyecto, agregar, editar y eliminar, tambien podemos organizar por carpetas.

Aplicaciones de Ejemplo

Ahora la aplicacion de ejemplo es la que se genera al crear el proyecto por defecto.

Veamos un poco el codigo para que entendamos lo que se esta haciendo y si quieren pueden modificar el Text de las etiquetas.

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a hovercraft number nine" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

En el codigo XAML se crean los siguientes componentes:

• ContentPage como contenedor principal
• ScrollView para permitir hacer scroll
• VerticalStackLayout que nos permite que los componentes que estan dentro se apilen de forma vertical
• Image, componente para imagenes
• Label, etiquetas de texto
• Button, un boton y como podemos el evento Clicked hace referencia al evento OnCounterClicked que esta definido en el archivo MainApp.cs

El codigo de la funcion lo que hace aumentar un contador y cambiar el texto del componente Button.

        private void OnCounterClicked(object? sender, EventArgs e)
        {
            count++;

            if (count == 1)
                CounterBtn.Text = $"Clicked {count} time";
            else
                CounterBtn.Text = $"Clicked {count} times";

            SemanticScreenReader.Announce(CounterBtn.Text);
        }

Y ahora vamos al al Boton Play o Ejecutar del Visual Studio Community para ejecutar el ejemplo.

Y nos va a lanzar la aplicacion.y queda como la siguiente imagen: