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

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

Einführung

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 .NET MAUI-Entwicklung eingerichtet haben, führen Sie die Schritte aus, um mit .NET MAUI unter Windows zu beginnen.

Erstellen des .NET MAUI-Projekts

1. Starten Sie Visual Studio, und klicken Sie im Startfenster auf "Neues Projekt erstellen", um ein neues Projekt zu erstellen:

2. Wählen Sie im Fenster Neues Projekt erstellen im Dropdownmenü „Alle Projekttypen“ die Option MAUI aus, wählen Sie die .NET MAUI-App-Vorlage aus, und klicken Sie auf die Schaltfläche Weiter:

3. Geben Sie ihrem Projekt im Fenster "Neues Projekt konfigurieren" 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.

Problembehandlung

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 im Kontextmenü NuGet-Pakete verwalten ... aus.

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

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

4. Schließen Sie das 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 | Klasse aus dem Kontextmenü.

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

7. Die MainViewModel Klasse ist das Datenbindungsziel für die MainPage. Aktualisieren Sie sie, um von ObservableObject dem CommunityToolkit.Mvvm.ComponentModel Namespace zu erben. Dies erfordert auch, dass die Klasse aktualisiert werden public soll und partial.

8. Die MainViewModel Klasse enthält den folgenden Code. Der CountChangedMessage Datensatz definiert eine Nachricht, die jedes Mal gesendet wird, wenn auf die Schaltfläche "Klicken auf mich" geklickt wird, und benachrichtigt die Ansicht der Änderung. Die ObservableProperty - und RelayCommand-Attribute , die den message Und-Membern hinzugefügt wurden, IncrementCounter sind Quellgeneratoren, die vom MVVM-Toolkit bereitgestellt werden, um den MVVM-Textbausteincode für INotifyPropertyChanged und IRelayCommand Implementierungen zu erstellen. Die IncrementCounter Implementierung der Methode enthält die Logik aus OnCounterClicked MainPage.xaml.cs mit einer Änderung zum Senden einer Nachricht mit der neuen Zählernachricht. Wir werden diesen CodeBehind-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++;

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

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

Hinweis

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 count Feld.

10. Fügen Sie den folgenden Code nach dem MainPage Aufruf des InitializeComponenent()Konstruktors hinzu. Dieser Code empfängt die nachricht, die von in der MainViewModel und aktualisiert die Eigenschaft mit der CounterBtn.Text neuen Nachricht und gibt den neuen Text mit dem SemanticScreenReader:IncrementCounter()

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

11. Außerdem müssen Sie der Klasse eine using Anweisung hinzufügen:

using CommunityToolkit.Mvvm.Messaging;

12. MainPage.xamlFügen Sie in der Klasse eine Namespacedeklaration hinzuContentPage, damit die MainViewModel Klasse gefunden werden kann:

xmlns:local="clr-namespace:MauiOnWindows"

13. Add MainViewModel as the for the ContentPageBindingContext :

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

14. Aktualisieren Sie das Button Aktivieren MainPage , um ein Command Ereignis anstelle der Behandlung des Clicked Ereignisses zu verwenden. Der Befehl wird an die IncrementCounterCommand öffentliche 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 Meldung "Hello, World!" in der ersten Bezeichnung zu aktualisieren, um "Hello, Windows!" in "MainPage.xaml" zu lesen. 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

Hier 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-Lernprogramm nutzen.

Zugehörige Themen

Lernressourcen für .NET MAUI

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