Tutorial: Erstellen einer .NET MAUI-App mit C#-Markup und dem Community-Toolkit

Erstellen Sie eine .NET MAUI-App mit einer Benutzeroberfläche, die ohne XAML erstellt wurde, indem Sie C#-Markup aus dem .NET MAUI Community Toolkit verwenden.

Einführung

Das .NET MAUI Community Toolkit ist eine Reihe von Erweiterungen, Verhaltensweisen, Animationen und anderen Helfern. Eines der Features, C#-Markup, bietet die Möglichkeit, eine Benutzeroberfläche vollständig im C#-Code zu erstellen. In diesem Tutorial erfahren Sie, wie Sie eine .NET MAUI-App für Windows erstellen, die C#-Markup zum Erstellen der Benutzeroberfläche verwendet.

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

Hinweis

Wenn Sie bereits mit der Einrichtung eines .NET MAUI-Projekts vertraut sind, können Sie zum nächsten Abschnitt springen.

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

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:

Geben Sie als Nächstes auf dem Bildschirm Neues Projekt konfigurieren ihrem Projekt einen Namen, wählen Sie einen Speicherort dafür aus, und klicken Sie auf die Schaltfläche Weiter.

Klicken Sie auf dem letzten Bildschirm, Zusätzliche Informationen, auf die Schaltfläche Erstellen.

Warten Sie, bis das Projekt erstellt wurde und seine Abhängigkeiten wiederhergestellt wurden.

Drücken Sie auf der Visual Studio-Symbolleiste die Windows Machine-Schaltfläche, um die App zu erstellen und auszuführen. Klicken Sie auf die Schaltfläche Klick mich an und überprüfen Sie, ob der Inhalt der Schaltfläche mit der Anzahl der Klicks aktualisiert wird.

Nachdem Sie nun überprüft haben, ob die .NET MAUI-App unter Windows erwartungsgemäß funktioniert, können wir die MVVM-Toolkit- und C#-Markuppakete integrieren. Im nächsten Abschnitt fügen Sie diese Pakete zu Ihrem neuen Projekt hinzu.

Hinzufügen von C#-Markup aus dem .NET MAUI Community Toolkit

Nachdem Ihre .NET MAUI-App unter Windows ausgeführt wird, fügen wir nun ein paar NuGet-Pakete zum Projekt hinzu, um sie in das MVVM-Toolkit und das C#-Markup aus dem .NET MAUI Community Toolkit zu integrieren.

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

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

Fügen Sie dem Projekt die neueste stabile Version des CommunityToolkit.MVVM-Pakets hinzu, indem Sie auf Installieren klicken.

Suchen Sie als Nächstes nach CommunityToolkit.Maui:

Fügen Sie dem Projekt die neueste stabile Version des CommunityToolkit.Maui.Markup-Pakets hinzu, indem Sie auf Installieren klicken.

Schließen Sie das NuGet-Paket-Manager-Fenster, nachdem die neuen Pakete die Installation abgeschlossen haben.

Hinzufügen eines ViewModel zum Projekt

Wir werden eine einfache Model-View-ViewModel (MVVM)-Implementierung mit dem MVVM-Toolkit hinzufügen. Beginnen wir mit dem Erstellen eines Ansichtsmodells, das mit unserer Ansicht (MainPage) gekoppelt werden soll. Klicken Sie erneut mit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen | Klasse aus dem Kontextmenü.

Geben Sie im daraufhin angezeigten Fenster Neues Element hinzufügen die Klasse MainViewModel ein und klicken Sie auf Hinzufügen:

Wir werden die Leistungsfähigkeit des MVVM-Toolkit in MainViewModel nutzen. Ersetzen Sie den Inhalt der -Klasse durch folgenden Code:

using CommunityToolkit.Mvvm.ComponentModel;
using System.ComponentModel;
using System.Diagnostics;

namespace MauiMarkupSample
{
    [INotifyPropertyChanged]
    public partial class MainViewModel
    {
        [ObservableProperty]
        private string name;
        partial void OnNameChanging(string value)
        {
            Debug.WriteLine($"Name is about to change to {value}");
        }
        partial void OnNameChanged(string value)
        {
            Debug.WriteLine($"Name has changed to {value}");
        }
    }
}

Wenn Sie das Tutorial Erstellen Ihrer ersten . NET MAUI-App für Windows abgeschlossen haben, verstehen Sie, was der obige Code tut. Die MainViewModel-Klasse ist mit dem INotifyPropertyChanged-Attribut versehen, mit dem das MVVM-Toolkit die INotifyPropertyChanged-Implementierung für die Klasse generieren kann. Die Kennzeichnung von MainViewModel als partial class ist erforderlich, damit der .NET-Quellgenerator funktioniert. Das ObservableProperty-Attribut auf dem name privaten Feld wird eine Name-Eigenschaft für die Klasse mit der richtigen INotifyPropertyChanged-Implementierung in der generierten partiellen Klasse hinzufügen. Das Hinzufügen der partiellen Methoden OnNameChanging und OnNameChanged ist optional. Sie können jedoch benutzerdefinierte Logik hinzufügen, wenn sich die Name-Eigenschaft ändert oder sich geändert hat.

Erstellen einer Benutzeroberfläche mit C#-Markup

Beim Erstellen einer Benutzeroberfläche mit C#-Markup besteht der erste Schritt darin, die CreateMauiApp()-Methode in MauiProgram.cs zu aktualisieren. Ersetzen Sie die Inhalte der -Methode durch den folgenden Code:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkitMarkup();

    return builder.Build();
}

Außerdem müssen Sie oben in der Datei eine neue using-Anweisung hinzufügen: using CommunityToolkit.Maui.Markup;. Durch den Aufruf von UseMauiCommunityToolkitMarkup() wird der App die C#-Markupunterstützung hinzugefügt, sodass Sie Ihre UI mit C#-Code anstelle von XAML erstellen können.

Die Datei MainPage.xaml wird beim Rendern der Benutzeroberfläche nicht mehr verwendet, sodass Sie den Inhalt von ContentPage entfernen können.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiMarkupSample.MainPage">
</ContentPage>

Entfernen Sie in MainPage.xaml.cs den Klick-Ereignishandler, und fügen Sie der Klasse drei private Member hinzu:

private readonly MainViewModel ViewModel = new();
private enum Row { TextEntry }
private enum Column { Description, Input }

Die ViewModel-Eigenschaft erstellt eine Instanz der MainViewModel-Klasse, die bei der Datenbindung der Benutzeroberfläche verwendet werden soll. Die Enumerationen Row und Column werden verwendet, um das Layout der Benutzeroberfläche mit C#-Markup zu definieren. Es ist eine einfache Benutzeroberfläche mit einer einzelnen Zeile und zwei Spalten, die wir im nächsten Schritt definieren werden.

Da die UI-Elemente im C#-Code definiert werden, wird die InitializeComponent()-Methode nicht benötigt. Entfernen Sie den Aufruf, und ersetzen Sie ihn durch den folgenden Code, um die Benutzeroberfläche zu erstellen:

public MainPage()
{
    Content = new Grid
    {
        RowDefinitions = Rows.Define(
            (Row.TextEntry, 36)),

        ColumnDefinitions = Columns.Define(
            (Column.Description, Star),
            (Column.Input, Stars(2))),

        Children =
        {
            new Label()
                .Text("Customer name:")
                .Row(Row.TextEntry).Column(Column.Description),

            new Entry
            {
                Keyboard = Keyboard.Numeric,
                BackgroundColor = Colors.AliceBlue,
            }.Row(Row.TextEntry).Column(Column.Input)
                .FontSize(15)
                .Placeholder("Enter name")
                .TextColor(Colors.Black)
                .Height(44)
                .Margin(6, 6)
                .Bind(Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay)
        }
    };
}

Der neue Code im MainPage-Konstruktor nutzt C#-Markup, um die Benutzeroberfläche zu definieren. Eine Grid wird als Content der Seite festgelegt. Unser neues Raster definiert eine Zeile mit einer Höhe von 36 Pixeln und zwei Spalten, deren Breiten mithilfe von Star-Werten und nicht mit absoluten Pixelwerten definiert sind. Die Input-Spalte ist immer doppelt so breit wie die Description-Spalte. Der entsprechende XAML-Code für diese Definitionen wäre:

<Grid.RowDefinitions>
    <RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

Der Rest des Codes zum Erstellen des Rasters fügt zwei Children, ein Label und ein Entry hinzu. Die Eigenschaften Text, Row und Column werden für das Label-Element festgelegt, und das Entry werden mit den folgenden Eigenschaften erstellt:

Eigenschaft	Wert	Beschreibung
Row	Row.TextEntry	Definiert die Zeilennummer.
Column	Column.Input	Definiert die Spaltennummer.
FontSize	15	Legt den Schriftgrad fest.
Placeholder	"Enter name"	Legt den Platzhaltertext fest, der angezeigt werden soll, wenn das Element leer ist.
TextColor	Colors.Black	Legt die Textfarbe fest.
Height	44	Legt die Höhe des Elements fest.
Margin	6, 6	Definiert den Rand um das Element.
Bind	Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay	Bindet die Text-Eigenschaft des Elements mithilfe der bidirektionalen Datenbindung an die Name-Eigenschaft des Ansichtsmodells.

Das entsprechende XAML zum Definieren dieser untergeordneten Elemente wäre:

<Label Text="Customer name:"
       Grid.Row="0" Grid.Column="0" />
<Entry Grid.Row="1" Grid.Column="0"
       FontSize="15"
       Placeholder="Enter name"
       HeightRequest="44"
       Margin="6, 6"
       Text="{Binding Path=ViewModel.Name, Mode=TwoWay}" />

Möglicherweise haben Sie bemerkt, dass die TextColor-Eigenschaft im obigen Markup nicht festgelegt ist. Das Festlegen der TextColor eines Steuerelements erfordert das Festlegen eines benutzerdefinierten Stils. Weitere Informationen zum Verwenden von Stilen in .NET MAUI finden Sie unter Apps mit XAML gestalten. Dies ist ein Beispiel, in dem das Festlegen von Eigenschaften im C#-Markup stärker optimiert sein kann als das entsprechende XAML. Durch die Verwendung von Stilen wird jedoch die Wiederverwendung und Vererbung erleichtert.

Jetzt können Sie die Apps ausführen. Drücken Sie F5, um das Projekt zu erstellen und auszuführen. Die App sollte wie der folgende Screenshot aussehen:

Sie haben jetzt Ihre erste C#-Markup-App unter Windows mit .NET MAUI erstellt. Weitere Informationen dazu, was Sie mit C#-Markup tun können, finden Sie in der C#-Markupdokumentation.

Zugehörige Themen

Lernressourcen für .NET MAUI

Dokumentation zum .NET MAUI Community Toolkit

C#-Markupdokumentation