Skapa din första .NET MAUI-app för Windows

Få praktisk erfarenhet med .NET MAUI genom att bygga din första plattformsoberoende app på Windows.

Introduktion

I den här självstudien får du lära dig hur du skapar och kör din första .NET MAUI-app för Windows i Visual Studio 2022 (17.3 eller senare). Vi lägger till några MVVM Toolkit funktioner från .NET Community Toolkit för att förbättra designen av standardprojektet.

Konfigurera miljön

Om du inte redan har konfigurerat din miljö för .NET MAUI-utveckling följer du stegen för att Kom igång med .NET MAUI i Windows.

Skapa .NET MAUI-projektet

1. Starta Visual Studio och klicka på Skapa ett nytt projekt i startfönstret för att skapa ett nytt projekt:

   

2. I fönstret Skapa ett nytt projekt väljer du MAUI- i listrutan Alla projekttyper, väljer mallen .NET MAUI App och klickar på knappen Nästa:

   

3. I fönstret Konfigurera det nya projektet ger du projektet ett namn, väljer en plats för det och klickar på knappen Nästa:

   

4. I fönstret Ytterligare information klickar du på knappen Skapa:

   

5. Vänta tills projektet har skapats och för att dess beroenden ska återställas:

   

6. I Visual Studio-verktygsfältet trycker du på knappen Windows-dator för att skapa och köra appen.

7. I appen som körs trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar:

   

Du har precis kört din första .NET MAUI-app i Windows. I nästa avsnitt får du lära dig hur du lägger till databindnings- och meddelandefunktioner från MVVM Toolkit till din app.

Felsökning

Om det inte går att kompilera appen kan du läsa Felsöka kända problem, som kan ha en lösning på problemet.

Lägga till MVVM Toolkit

Nu när du har din första .NET MAUI-app som körs i Windows ska vi lägga till några MVVM Toolkit-funktioner i projektet för att förbättra appens design.

1. Högerklicka på projektet i Solution Explorer och välj Hantera NuGet-paket... från snabbmenyn.

2. I fönstret NuGet Package Manager väljer du Bläddra-fliken och söker efter CommunityToolkit.MVVM:

   

3. Lägg till den senaste stabila versionen av paketet CommunityToolkit.MVVM (version 8.0.0 eller senare) i projektet genom att klicka på Installera.

4. Stäng fönstret NuGet Package Manager när det nya paketet har installerats.

5. Högerklicka på projektet igen och välj Lägg till | Klassificera från snabbmenyn.

6. I fönstret Lägg till nytt objekt som visas namnger du klassen MainViewModel och klickar på Lägg till:

   

7. Klassen MainViewModel är databindningsmålet för MainPage. Uppdatera den så att den ärver från ObservableObject i CommunityToolkit.Mvvm.ComponentModel namnområdet. Det kräver också att klassen uppdateras till public och partial.

8. Klassen MainViewModel innehåller följande kod. Posten CountChangedMessage definierar ett meddelande som skickas varje gång knappen Klicka på mig klickas, vilket meddelar vyn om ändringen. Attributen ObservableProperty och RelayCommand som läggs till i message- och IncrementCounter-medlemmarna är källgeneratorer som tillhandahålls av MVVM Toolkit för att skapa MVVM-exempelkoden för INotifyPropertyChanged och IRelayCommand implementeringar. Implementeringen av IncrementCounter-metoden innehåller logiken från OnCounterClicked i MainPage.xaml.cs, med en ändring för att skicka ett meddelande med det nya räknarmeddelandet. Vi kommer att ta bort bakkoden senare.

   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++;
   
               // Pluralize the message if the count is greater than 1
               message = count == 1 ? $"Clicked {count} time" : $"Clicked {count} times";
   
               WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
           }
       }
   }
   

   Anteckning

   Du måste uppdatera namnområdet i föregående kod för att matcha namnområdet i projektet.

9. Öppna filen MainPage.xaml.cs för redigering och ta bort metoden OnCounterClicked och fältet count.

10. Lägg till följande kod i MainPage konstruktorn efter anropet till InitializeComponent(). Den här koden tar emot meddelandet som skickas av IncrementCounter() i MainViewModel och uppdaterar egenskapen CounterBtn.Text med det nya meddelandet och meddelar den nya texten med SemanticScreenReader:

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

11. Du måste också lägga till en using-instruktion i en klass:

    using CommunityToolkit.Mvvm.Messaging;
    

12. I MainPage.xamllägger du till en namnområdesdeklaration i ContentPage så att klassen MainViewModel kan hittas:

    xmlns:local="clr-namespace:MauiOnWindows"
    

13. Lägg till MainViewModel som BindingContext för ContentPage:

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

14. Uppdatera Button på MainPage för att använda en Command i stället för att hantera händelsen Clicked. Kommandot kommer att binda till den offentliga egenskapen IncrementCounterCommand som genereras av MVVM Toolkit:s källkodsgeneratorer.

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

15. Kör projektet igen och observera att räknaren fortfarande ökar när du klickar på knappen:

    

16. När projektet körs kan du prova att uppdatera meddelandet "Hello, World!" i den första etiketten för att läsa "Hello, Windows!" i MainPage.xaml. Spara filen och observera att XAML Hot Reload uppdaterar användargränssnittet medan appen fortfarande körs:

    

Nästa steg

Lär dig hur du skapar en app som visar Microsoft Graph data för en användare genom att använda Graph SDK- i en .NET MAUI för Windows-självstudie.

Relaterat innehåll

Resurser för att lära .NET MAUI

Använda Microsoft Graph API med .NET MAUI i Windows