Tutorial de .NET MAUI: Compilación de la primera aplicación multiplataforma en C#

Windows macOS

Editar el código

Al desarrollar aplicaciones con .NET MAUI, Recarga activa de XAML está disponible al depurar la aplicación. Esto significa que puede cambiar la interfaz de usuario (UI) XAML mientras se ejecuta la aplicación y la interfaz de usuario se actualizará automáticamente.

Vuelva a Visual Studio y deje la aplicación en ejecución. En el Explorador de soluciones, haga doble clic en el archivo MainPage.xaml del proyecto MyFirstMauiApp. Si no ve el panel de Explorador de soluciones, seleccione Ver > Explorador de soluciones en el menú principal (o presione CTRL+ALT+L).

Panel Explorador de soluciones con el archivo MainPage.xaml resaltado.

Vuelva al archivo MainPage.xaml en VS Code y deje la aplicación en ejecución.

Panel Explorador de soluciones con el archivo MainPage.xaml resaltado.

Actualmente, el Text de la segunda Label de la línea 17 está establecido para que diga Hello, World! como se muestra en el siguiente código:

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

Actualice el texto para leer Hello, .NET MAUI!:

MainPage.xaml
<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

La interfaz de usuario de la aplicación se actualiza automáticamente a medida que se realizan cambios.

Windows ejecuta la aplicación .NET MAUI. Se muestra el mensaje

Un Mac que ejecute la aplicación .NET MAUI. Se muestra el mensaje Hello, .NET MAUI!

Al desarrollar aplicaciones con .NET MAUI, también puede usar la Recarga activa de .NET para volver a cargar el código de C#. Vamos a modificar la lógica de la aplicación para incrementar el recuento en 10 en lugar de en 1 al hacer clic en el botón.

Abra MainPage.xaml.cs (este archivo está anidado en MainPage.xaml o puede hacer clic con el botón derecho y seleccionar Ver código en el menú).

Selección desplegable para mostrar el código subyacente de MainPage.xaml

El método OnCounterClicked de ese archivo tiene actualmente el siguiente código:

MainPage.xaml.cs
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);
}

Actualizar el count++; para incrementar en 10 cambiándolo a count += 10;.

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Para aplicar los cambios de código, guarde el archivo y seleccione el botón Recarga activa en Visual Studio o seleccione ALT+F10.

Selección desplegable para mostrar el código subyacente de MainPage.xaml

Seleccione el botón Haga clic aquí y vea cómo se incrementa por 10. ¡Bien hecho! Ahora puede cerrar la aplicación en ejecución.

Contador actualizado a incrementos de 10

Continuar