Crea tu primera aplicación .NET MAUI para Windows

Para empezar a usar .NET MAUI, cree su primera aplicación multiplataforma en Windows.

Introducción

En este tutorial, aprenderá a crear y ejecutar su primera aplicación MAUI de .NET para Windows en Visual Studio 2022 (17.3 o posterior). Agregaremos algunas características del kit de herramientas de MVVM del kit de herramientas de la comunidad de .NET para mejorar el diseño del proyecto predeterminado.

Configuración del entorno

Si aún no ha configurado el entorno para el desarrollo de MAUI de .NET, siga los pasos para Empezar a trabajar con .NET MAUI en Windows.

Creación del proyecto MAUI de .NET

1. Inicie Visual Studio y, en la ventana de inicio, haga clic en Crear un nuevo proyecto para crear un nuevo proyecto:

2. En la ventana Crear un nuevo proyecto, seleccione MAUI en la lista desplegable Todos los tipos de proyecto, seleccione la plantilla Aplicación MAUI .NET, y haga clic en el botón Siguiente:

3. En la ventana Configurar el nuevo proyecto , asigne un nombre al proyecto, elija una ubicación para él y haga clic en el botón Siguiente :

4. En la ventana Información adicional, haga clic en el botón Crear :

5. Espere a que se cree el proyecto y para que se restauren sus dependencias:

6. En la barra de herramientas de Visual Studio, presione el botón Máquina de Windows para compilar y ejecutar la aplicación.

7. En la aplicación en ejecución, presiona el botón Hacer clic varias veces y observa que el recuento del número de clics de botón se incrementa:

Acaba de ejecutar la primera aplicación MAUI de .NET en Windows. En la sección siguiente, aprenderá a agregar características de enlace de datos y mensajería desde el kit de herramientas de MVVM a la aplicación.

Solución de problemas

Si la aplicación no se puede compilar, revisa Solución de problemas conocidos, que puede tener una solución a tu problema.

Adición del kit de herramientas de MVVM

Ahora que tiene su primera aplicación MAUI de .NET que se ejecuta en Windows, vamos a agregar algunas características del kit de herramientas de MVVM al proyecto para mejorar el diseño de la aplicación.

1. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Administrar paquetes NuGet... en el menú contextual.

2. En la ventana Administrador de paquetes NuGet, seleccione la pestaña Examinar y busque para CommunityToolkit.MVVM:

3. Agregue la versión estable más reciente del paquete CommunityToolkit.MVVM (versión 8.0.0 o posterior) al proyecto haciendo clic en Instalar.

4. Cierre la ventana de Administrador de paquetes nuGet una vez que el nuevo paquete haya terminado de instalarse.

5. Vuelva a hacer clic con el botón derecho en el proyecto y seleccione Agregar | Clase en el menú contextual.

6. En la ventana Agregar nuevo elemento que aparece, asigne un nombre a la clase MainViewModel y haga clic en Agregar:

7. La MainViewModel clase será el destino de enlace de datos para .MainPage Actualícelo para heredar de en el CommunityToolkit.Mvvm.ComponentModel espacio de ObservableObject nombres. Esto también requerirá actualizar la clase para que sea public y partial.

8. La MainViewModel clase contendrá el código siguiente. El CountChangedMessage registro define un mensaje que se envía cada vez que se hace clic en el botón Hacer clic en mí y se notifica la vista del cambio. Los atributos ObservableProperty y RelayCommand agregados a los message miembros y IncrementCounter son generadores de origen proporcionados por el kit de herramientas de MVVM para crear el código reutilizable de MVVM para INotifyPropertyChanged las implementaciones y IRelayCommand . La IncrementCounter implementación del método contiene la lógica de OnCounterClicked en MainPage.xaml.cs, con un cambio para enviar un mensaje con el nuevo mensaje de contador. Vamos a quitar ese código subyacente más adelante.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            if (count == 1)
                message = $"Clicked {count} time";
            else
                message = $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

Nota:

Tendrá que actualizar el espacio de nombres en el código anterior para que coincida con el espacio de nombres del proyecto.

9. Abra el archivo MainPage.xaml.cs para editar y quitar el OnCounterClicked método y el count campo.

10. Agregue el código siguiente al MainPage constructor después de la llamada a InitializeComponenent(). Este código recibirá el mensaje enviado por IncrementCounter() en MainViewModel y actualizará la CounterBtn.Text propiedad con el nuevo mensaje y anunciará el nuevo texto con :SemanticScreenReader

WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});

11. También deberá agregar una using instrucción a la clase :

using CommunityToolkit.Mvvm.Messaging;

12. En MainPage.xaml, agregue una declaración de espacio de nombres a ContentPage para que se pueda encontrar la MainViewModel clase :

xmlns:local="clr-namespace:MauiOnWindows"

13. Agregue MainViewModel como para BindingContext :ContentPage

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

14. Actualice el Button control MainPage de para usar en Command lugar de controlar el Clicked evento. El comando se enlazará a la IncrementCounterCommand propiedad pública generada por los generadores de origen del kit de herramientas de MVVM:

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />

15. Vuelva a ejecutar el proyecto y observe que el contador todavía se incrementa al hacer clic en el botón:

16. Mientras se ejecuta el proyecto, intente actualizar el mensaje "Hello, World!" en la primera etiqueta para leer "Hello, Windows!" en MainPage.xaml. Guarde el archivo y observe que XAML Recarga activa actualiza la interfaz de usuario mientras la aplicación sigue en ejecución:

Pasos siguientes

Aprenda a crear una aplicación que muestre los datos de Microsoft Graph para un usuario aprovechando el SDK de Graph en un tutorial de .NET MAUI para Windows.

Temas relacionados

Recursos para aprender .NET MAUI

Uso de Microsoft Graph API con .NET MAUI en Windows