Erstellen Ihrer ersten .NET MAUI-App für Windows

Nutzen Sie .NET MAUI praktisch, indem Sie Ihre erste plattformübergreifende App unter Windows erstellen.

Einleitung

In diesem Lernprogramm erfahren Sie, wie Sie Ihre erste .NET MAUI-App für Windows in Visual Studio 2022 (17.3 oder höher) erstellen und ausführen. Wir fügen einige MVVM Toolkit Features aus dem .NET Community Toolkit hinzu, um das Design des Standardprojekts zu verbessern.

Einrichten der Umgebung

Wenn Sie Ihre Umgebung noch nicht für die Entwicklung von .NET MAUI eingerichtet haben, führen Sie die Schritte unter „Erste Schritte mit .NET MAUI“ auf Windowsaus.

Erstellen des .NET MAUI-Projekts

1. Starten Sie Visual Studio, und klicken Sie im Startfenster auf Erstellen eines neuen Projekts, um ein neues Projekt zu erstellen:

   

2. Wählen Sie im Fenster Erstellen eines neuen Projekts im Dropdownmenü "Alle Projekttypen" MAUI- aus, wählen Sie die Vorlage .NET MAUI App aus, und klicken Sie auf die Schaltfläche Weiter:

   

3. Geben Sie ihrem Projekt im Fenster Konfigurieren Des neuen Projekts einen Namen, wählen Sie einen Speicherort dafür aus, und klicken Sie auf die Schaltfläche Weiter:

   

4. Klicken Sie im Fenster Zusätzliche Informationen auf die Schaltfläche Erstellen:

   

5. Warten Sie, bis das Projekt erstellt wurde, und warten Sie, bis die Abhängigkeiten wiederhergestellt werden:

   

6. Drücken Sie auf der Visual Studio-Symbolleiste die Windows Machine-Schaltfläche, um die App zu erstellen und auszuführen.

7. Drücken Sie in der laufenden App mehrmals die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Schaltflächenklicks hochgezählt wird:

   

Sie haben gerade Ihre erste .NET MAUI-App unter Windows ausgeführt. Im nächsten Abschnitt erfahren Sie, wie Sie Ihrer App Datenbindungs- und Messagingfeatures aus dem MVVM Toolkit hinzufügen.

Fehlerbehebung

Wenn Ihre App nicht kompiliert werden kann, lesen Sie Fehlerbehebung bei bekannten Problemen, die möglicherweise eine Lösung für Ihr Problem enthält.

Hinzufügen des MVVM-Toolkits

Nachdem Sie nun Ihre erste .NET MAUI-App unter Windows ausgeführt haben, fügen wir dem Projekt einige MVVM-Toolkit-Features hinzu, um das Design der App zu verbessern.

1. Klicken Sie im Projektmappen- Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie NuGet-Pakete verwalten... aus dem Kontextmenü aus.

2. Wählen Sie im Fenster NuGet-Paket-Manager die Registerkarte Durchsuchen aus und suchen Sie nach CommunityToolkit.MVVM.

   

3. Fügen Sie dem Projekt die neueste stabile Version des CommunityToolkit.MVVM-Pakets (Version 8.0.0 oder höher) hinzu, indem Sie auf Installierenklicken.

4. Schließen Sie den NuGet-Paket-Manager Fenster, nachdem das neue Paket die Installation abgeschlossen hat.

5. Klicken Sie erneut mit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen | aus. Klasse aus dem Kontextmenü.

6. Geben Sie im angezeigten Fenster "Neues Element hinzufügen" die Klasse MainViewModel ein, und klicken Sie auf Hinzufügen:

   

7. Die Klasse MainViewModel wird das Datenbindungsziel für MainPagesein. Aktualisieren Sie es so, dass es von ObservableObject im CommunityToolkit.Mvvm.ComponentModel-Namespace erbt. Dies erfordert außerdem, dass die Klasse zu public und partialaktualisiert wird.

8. Die MainViewModel-Klasse enthält den folgenden Code. Der Datensatz CountChangedMessage definiert eine Nachricht, die jedes Mal gesendet wird, wenn auf die Schaltfläche Click me geklickt wird, um die Ansicht über die Änderung zu informieren. Die Attribute ObservableProperty- und RelayCommand-, die den Mitgliedern message und IncrementCounter hinzugefügt wurden, sind Quellgeneratoren, die vom MVVM-Toolkit bereitgestellt werden, um den MVVM-Boilerplate-Code für die Implementierungen von INotifyPropertyChanged und IRelayCommand zu erstellen. Die Implementierung der Methode IncrementCounter enthält die Logik aus OnCounterClicked in MainPage.xaml.cs, mit einer Änderung, um eine Nachricht mit der neuen Zählermeldung zu senden. Wir werden diesen Code-Behind-Code später entfernen.

   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));
           }
       }
   }
   

   Anmerkung

   Sie müssen den Namespace im vorherigen Code so aktualisieren, dass er mit dem Namespace in Ihrem Projekt übereinstimmt.

9. Öffnen Sie die MainPage.xaml.cs Datei zum Bearbeiten, und entfernen Sie die OnCounterClicked Methode und das feld count.

10. Fügen Sie den folgenden Code in den MainPage-Konstruktor nach dem Aufruf von InitializeComponent() ein. Dieser Code empfängt die von IncrementCounter() im MainViewModel gesendete Nachricht und aktualisiert die eigenschaft CounterBtn.Text mit der neuen Nachricht und gibt den neuen Text mit dem SemanticScreenReaderan:

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

11. Sie müssen außerdem eine using-Anweisung in die Klasse einfügen:

    using CommunityToolkit.Mvvm.Messaging;
    

12. Fügen Sie in MainPage.xaml eine Namespace-Deklaration zu ContentPage hinzu, damit die Klasse MainViewModel gefunden werden kann:

    xmlns:local="clr-namespace:MauiOnWindows"
    

13. Fügen Sie MainViewModel als BindingContext für die ContentPagehinzu:

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

14. Aktualisieren Sie das Button auf MainPage, um ein Command zu verwenden, anstatt das Clicked Ereignis zu behandeln. Der Befehl wird an die öffentliche IncrementCounterCommand-Eigenschaft gebunden, die von den Quellgeneratoren des MVVM-Toolkits generiert wird:

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

15. Führen Sie das Projekt erneut aus, und beobachten Sie, dass der Zähler beim Klicken auf die Schaltfläche noch inkrementiert wird:

    

16. Versuchen Sie, während das Projekt ausgeführt wird, die Nachricht „Hello, World!“ in der ersten Kennzeichnung zu aktualisieren, damit sie in MainPage.xaml „Hello, Windows!“ lautet. Speichern Sie die Datei, und beachten Sie, dass XAML Hot Reload die Benutzeroberfläche aktualisiert, während die App noch ausgeführt wird:

    

Nächste Schritte

Erfahren Sie, wie Sie eine App erstellen, die Microsoft Graph- Daten für einen Benutzer anzeigt, indem Sie das Graph SDK- in einem .NET MAUI für Windows-Lernprogrammnutzen.

Verwandte Inhalte

Ressourcen zum Lernen von .NET MAUI

Verwenden der Microsoft Graph-API mit .NET MAUI unter Windows