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

Machen Sie sich mit .NET MAUI vertraut, indem Sie Ihre erste plattformübergreifende App unter Windows erstellen.

Einführung

In diesem Tutorial 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 den Entwurf 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 unter Erste Schritte mit .NET MAUI unter Windows aus.

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 in der Dropdownliste Alle Projekttypen die Option MAUI aus, wählen Sie die Vorlage .NET MAUI-App aus, und klicken Sie auf die Schaltfläche Weiter :

3. Geben Sie im Fenster Neues Projekt konfigurieren dem Projekt 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 die Abhängigkeiten wiederhergestellt werden:

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

7. Drücken Sie in der ausgeführten App mehrmals die Schaltfläche Klicken Sie mich , und stellen Sie fest, dass die Anzahl der Schaltflächenklicks erhöht 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 Problembehandlung bekannter Probleme, die möglicherweise eine Lösung für Ihr Problem haben.

Hinzufügen des MVVM-Toolkits

Nachdem Nun Ihre erste .NET MAUI-App unter Windows ausgeführt wird, fügen sie dem Projekt einige MVVM-Toolkit-Features hinzu, um den Entwurf der App zu verbessern.

1. Klicken Sie in 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 dem Projekt die neueste stabile Version des CommunityToolkit.MVVM-Pakets (Version 8.0.0 oder höher) hinzu, indem Sie auf Installieren klicken.

4. Schließen Sie das Fenster NuGet-Paket-Manager , nachdem die Installation des neuen Pakets abgeschlossen ist.

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

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

7. Die MainViewModel -Klasse ist das Datenbindungsziel für den MainPage. Aktualisieren Sie es, um von im CommunityToolkit.Mvvm.ComponentModel Namespace zu erbenObservableObject. Dies erfordert auch die Aktualisierung der Klasse, um und partialzu seinpublic.

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 Click me geklickt wird und die Ansicht über die Änderung benachrichtigt wird. Die Attribute ObservableProperty und RelayCommand , die den message Membern und IncrementCounter hinzugefügt werden, sind Quellgeneratoren, die vom MVVM-Toolkit bereitgestellt werden, um den MVVM-Boilerplate-Code 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 Leistungsindikatornachricht. 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 aktualisieren, um dem Namespace in Ihrem Projekt zu entsprechen.

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

10. Fügen Sie dem MainPage Konstruktor nach dem Aufruf von den folgenden Code hinzu InitializeComponenent(). Dieser Code empfängt die von gesendete IncrementCounter() Nachricht in und MainViewModel aktualisiert die CounterBtn.Text Eigenschaft mit der neuen Nachricht und kündigt den neuen Text mit dem SemanticScreenReaderan:

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. Fügen MainPage.xamlSie in eine Namespacedeklaration hinzu, ContentPage damit die MainViewModel Klasse gefunden werden kann:

xmlns:local="clr-namespace:MauiOnWindows"

13. Fügen Sie als für BindingContext folgendes ContentPagehinzuMainViewModel:

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

14. Aktualisieren Sie ein ButtonMainPage , um ein Command zu verwenden, anstatt das Clicked Ereignis zu behandeln. Der Befehl bindet an die IncrementCounterCommand öffentliche Eigenschaft, 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 stellen Sie fest, dass der Zähler weiterhin erhöht wird, wenn Sie auf die Schaltfläche klicken:

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

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-Tutorial nutzen.

Zugehörige Themen

Lernressourcen für .NET MAUI

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