Übung: Erstellen Ihrer ersten .NET MAUI-App

  • 5 Minuten

In dieser Übung beginnen Sie mit dem Erstellen der .NET MAUI-App für die Lebensmittelgeschäftskette. Sie verwenden die Vorlage, um die Standard-App zu generieren und sie unter Windows sowie im Android-Emulator auszuführen. Sie ändern diese App in einer späteren Übung, um die Benutzeroberfläche anzupassen und die für die Lebensmittelgeschäftsketten-App erforderlichen Funktionen hinzuzufügen.

Erstellen eines neuen Projekts

  1. Öffnen Sie Visual Studio, und erstellen Sie eine neue Projektmappe. Mit dieser Aktion wird der „Neues Projekt“-Assistent in Visual Studio geöffnet.

    Tipp

    Stellen Sie sicher, dass Sie die .NET MAUI-Workload mit Visual Studio 2022 v17.3 oder höher (v17.8 bevorzugt mit .NET 8) installiert haben. Weitere Informationen.

  2. Wählen Sie den App-Typ MAUI aus, wählen Sie die .NET MAUI-App-Vorlage aus und tippen Sie dann auf Weiter.

    A screenshot of the Create a new project dialog box. The user has selected the .NET MAUI App template.

  3. Benennen Sie auf der Seite Neues Projekt konfigurieren das Projekt mit Phoneword, und speichern Sie es an einem Speicherort Ihrer Wahl. Wählen Sie Weiter aus.

    A screenshot of the Configure your new project dialog box. The user has named the project Phoneword and selected a location on their hard drive to store it.

  4. Wählen Sie .NET 8.0 (Langfristige Unterstützung) in der Dropdown-Liste Framework und dann Erstellen aus, um die App zu erstellen.

Untersuchen der Projektmappenstruktur

  1. Erweitern Sie im Fenster „Projektmappen-Explorer“ den Ordner Phoneword. Erweitern Sie den Ordner Ressourcen mit seinen Unterordnern, erweitern Sie den Knoten App.xaml, den Knoten AppShell.xaml und den Knoten MainPage.xaml.

    A screenshot of the Phoneword project in the Visual Studio solution explorer window.

  2. Beachten Sie im Projekt die folgenden Elemente:

    • Der Ordner Ressourcen (Resources) enthält freigegebene Schriftarten, Bilder und Ressourcen, die von allen Plattformen verwendet werden.

    • Die Datei MauiProgram.cs enthält den Code, mit dem die App konfiguriert wird, und der angibt, dass die App-Klasse zum Ausführen der Anwendung verwendet werden soll.

    • Die Datei App.xaml.cs, der Konstruktor für die App-Klasse, erstellt eine neue Instanz der AppShell-Klasse, die dann im Anwendungsfenster angezeigt wird.

    • Die Datei AppShell.xaml enthält das Hauptlayout für die Anwendung und die Startseite von MainPage.

    • Die Datei MainPage.xaml enthält das Layout für die Seite. Dieses Layout umfasst den XAML-Code für eine Schaltfläche mit der Bezeichnung Hier klicken und ein Bild, das die Datei dotnet_bot.png anzeigt. Es gibt außerdem noch zwei weitere Bezeichnungen.

    • Die Datei MainPage.xaml.cs enthält die Anwendungslogik für die Seite. Insbesondere die MainPage-Klasse enthält eine Methode mit dem Namen OnCounterClicked, die ausgeführt wird, wenn ein*e Benutzer*in auf die Schaltfläche Hier klicken klickt oder tippt.

Erstellen und Ausführen der Anwendung unter Windows

  1. Wählen Sie auf der Visual Studio-Symbolleiste das Profil Windows-Computer aus. Wählen Sie das .net6.0-Windows-Framework aus der Liste im Dropdown-Listenfeld „Frameworks“ aus.

    A screenshot of the target runtime dropdown in Visual Studio. The user has set the Windows.Machine profile as the startup profile for the solution.

  2. Wählen Sie im Menü Debuggen die Option Debuggen starten aus. Mit dieser Aktion wird die App unter Windows erstellt, bereitgestellt und ausgeführt:

    A screenshot of the Visual Studio debug menu. The user has started debugging the app using the Windows Machine profile.

  3. Überprüfen Sie, ob die Windows-Version der App gestartet wird. Wählen Sie mehrmals die Schaltfläche Click me (Auf mich klicken) aus. Der Schaltflächentext sollte mit jedem Tippen/Klicken mit der hochgezählten Anzahl aktualisiert werden.

    A screenshot of the Windows UI app running. The user has tapped the 'Click me' button four times.

  4. Wählen Sie im Menü Ansicht die Option Projektmappen-Explorer aus. Erweitern Sie im Fenster „Projektmappen-Explorer“ den Knoten MainPage.xaml und öffnen Sie dann die CodeBehind-Datei MainPage.xaml.cs.

  5. Ändern Sie in der OnCounterClicked-Methode die Anweisung, die die count-Variable erhöht, so, dass dieser Variablen stattdessen 5 addiert wird:

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. Wählen Sie auf der Visual Studio-Symbolleiste die Schaltfläche Hot Reload aus:

    A screenshot of the Visual Studio toolbar. The Hot Reload button is highlighted.

  7. Wechseln Sie zurück zur App, und wählen Sie die Schaltfläche Click me (Auf mich klicken) aus. Überprüfen Sie, ob die Anzahl jetzt um 5 erhöht wird.

    Hinweis

    Mit dem Hot Reload-Feature von Visual Studio können Sie Ihren Code ändern, während die App im Debugmodus ausgeführt wird. Sie müssen die App nicht mehr beenden, um die Änderungen anzuzeigen. Ebenso, wie Sie Code ändern können, können Sie auch Änderungen am XAML-Markup für eine Seite vornehmen, und diese Änderungen werden in der ausgeführten App angezeigt.

  8. Schließen Sie die App, und kehren Sie zu Visual Studio zurück.

Erstellen und Ausführen der Anwendung unter Android

  1. Wählen Sie auf der Visual Studio Symbolleiste das Phoneword-Projekt aus.

  2. Wählen Sie im Menü Extras die Option Android und dann Android-Geräte-Manager aus. Wenn Sie aufgefordert werden, dem Android Geräte-Manager zu erlauben, Änderungen an Ihrem Computer vorzunehmen, wählen Sie Ja aus.

    A screenshot of the Visual Studio tools menu. The user has selected the Android Device Manager option.

  3. Wählen Sie im Fenster Android-Geräte-Manager die Option + Neu aus. Wählen Sie im Fenster Neues Gerät das Basisgerät Pixel 3a (+ Store) aus, wählen Sie das Betriebssystem API 30 aus und wählen Sie dann Erstellen aus. Warten Sie, während die verschiedenen Bibliotheken heruntergeladen und das Gerät konfiguriert wird.

    A screenshot of the New Device window from the Android SDK. The user is creating a new Pixel 3 device with API 30 selected.

  4. Nachdem das Gerät erstellt wurde, kehren Sie zu Visual Studio zurück.

  5. Wählen Sie auf der Visual Studio Symbolleiste im Dropdown-Listenfeld Debugkonfiguration das Profil Android-Emulatoren und dann das Gerät pixel_3a-api_30 aus. Dies ist das Gerät, das Sie gerade erstellt haben.

    A screenshot of the Visual Studio toolbar. The user has specified the Pixel 3 with the API 30 profile for the Android emulator to start debugging with.

  6. Starten Sie das Debuggen unter Verwendung des Profils pixel_3a-api_30. Mit dieser Aktion wird die App auf dem Android-Gerät erstellt, bereitgestellt und ausgeführt.

    A screenshot of the Visual Studio toolbar. It shows the pixel 3 a p i 30 profile has been selected and ready to start debugging with as soon as the user presses the play button.

  7. Wenn die App im Emulator ausgeführt wird (dies kann einige Minuten dauern), wählen Sie die Schaltfläche Hier klicken und überprüfen Sie, ob die App genau so läuft wie unter Windows.

    A screenshot of the Android version of the Phoneword application running in the selected emulator.

  8. Kehren Sie zu Visual Studio zurück, und beenden Sie das Debuggen.