Lernprogramm: Erstellen einer neuen WPF-App mit .NET

2025-05-07

In diesem Lernprogramm erfahren Sie, wie Sie visual Studio zum Erstellen einer neuen Windows Presentation Foundation (WPF)-App verwenden. Mit Visual Studio fügen Sie Fenstern Steuerelemente hinzu, um die Benutzeroberfläche der App zu entwerfen, und behandeln Eingabeereignisse von diesen Steuerelementen, um mit dem Benutzer zu interagieren. Am Ende dieses Lernprogramms haben Sie eine einfache App, die einem Listenfeld Namen hinzufügt.

In diesem Tutorial erfahren Sie:

Erstellen Sie eine neue WPF-App.
Hinzufügen von Steuerelementen zu einem Fenster
Verarbeitung von Steuerelementereignissen, um App-Funktionen bereitzustellen.
Führen Sie die App aus.

Im Folgenden finden Sie eine Vorschau der app, die beim Ausführen dieses Lernprogramms erstellt wurde:

Fertige Beispiel-App für das WPF-Lernprogramm

Voraussetzungen

Visual Studio 2022, Version 17.12 oder höher
- Wählen Sie den .NET-Desktopentwicklungs-Workload
- Auswählen der einzelnen .NET 9-Komponente

Erstellen einer WPF-App

Der erste Schritt zum Erstellen einer neuen App besteht darin, Visual Studio zu öffnen und die App aus einer Vorlage zu generieren.

Öffnen Sie Visual Studio.
Wählen Sie Neues Projekt erstellen aus.
Geben Sie im Feld "Nach Vorlagen suchen" wpf ein, und drücken Sie anschließend die EINGABETASTE.
Wählen Sie im Dropdownmenü "Codesprache " C# oder Visual Basic aus.
Wählen Sie in der Vorlagenliste WPF-Anwendung und dann "Weiter" aus.

Von Bedeutung

Wählen Sie nicht die WPF-Anwendungsvorlage (.NET Framework) aus.

Die folgende Abbildung zeigt sowohl C# als auch Visual Basic .NET-Projektvorlagen. Wenn Sie den Codesprachenfilter angewendet haben, wird nur die Vorlage für diese Sprache angezeigt.
Gehen Sie im Fenster " Neues Projekt konfigurieren " wie folgt vor:
1. Geben Sie im Projektname-Feld Namen ein.
2. Wählen Sie das Kontrollkästchen Lösung und Projekt im selben Verzeichnis aus.
3. Wählen Sie optional einen anderen Speicherort aus, um Ihren Code zu speichern.
4. Wählen Sie die Schaltfläche Weiter aus.
Wählen Sie im Fenster "Zusätzliche Informationen " .NET 9.0 (Standard Term Support) für Target Framework aus. Wählen Sie die Schaltfläche Erstellen.

Sobald die App generiert wurde, sollte Visual Studio das XAML-Designerfenster für das Standardfenster " MainWindow" öffnen. Wenn der Designer nicht sichtbar ist, doppelklicken Sie im Projektmappen-Explorer-Fenster auf die Datei "MainWindow.xaml", um den Designer zu öffnen.

Wichtige Teile von Visual Studio

Die Unterstützung für WPF in Visual Studio verfügt über fünf wichtige Komponenten, mit denen Sie interagieren, während Sie eine App erstellen:

Die wichtigen Komponenten von Visual Studio sollten Sie beim Erstellen eines WPF-Projekts für .NET kennen.

Lösungs-Explorer

Alle Projektdateien, Code, Fenster, Ressourcen werden in diesem Fenster angezeigt.
Eigenschaften

In diesem Fenster werden Eigenschafteneinstellungen angezeigt, die Sie basierend auf dem ausgewählten Element konfigurieren können. Wenn Sie beispielsweise ein Element aus dem Projektmappen-Explorer auswählen, werden Eigenschafteneinstellungen für die Datei angezeigt. Wenn Sie ein Objekt im Designer auswählen, werden Einstellungen für das Element angezeigt. In Bezug auf das vorherige Bild wurde die Titelleiste des Fensters im Designer ausgewählt.
Werkzeugkasten

Die Toolbox enthält alle Steuerelemente, die Sie einer Entwurfsoberfläche hinzufügen können. Um ein Steuerelement zur aktuellen Oberfläche hinzuzufügen, doppelklicken Sie auf das Steuerelement oder ziehen Sie es per Drag-and-Drop auf die Oberfläche. Es ist üblich, stattdessen das XAML-Code-Editor-Fenster zum Entwerfen einer Benutzeroberfläche (UI) zu verwenden, während sie das XAML-Designerfenster verwenden, um eine Vorschau der Ergebnisse anzuzeigen.
XAML-Designer

Dies ist der Designer für ein XAML-Dokument. Es ist interaktiv, und Sie können Objekte aus der Toolbox ziehen und ablegen. Indem Sie Elemente im Designer auswählen und verschieben, können Sie die Benutzeroberfläche für Ihre App visuell erstellen.

Wenn sowohl der Designer als auch der Editor sichtbar sind, werden Änderungen an einem in der anderen angezeigt.

Wenn Sie Elemente im Designer auswählen, werden im Eigenschaftenfenster die Eigenschaften und Attribute zu diesem Objekt angezeigt.
XAML-Code-Editor

Dies ist der XAML-Code-Editor für ein XAML-Dokument. Der XAML-Code-Editor ist eine Möglichkeit, Ihre UI manuell ohne Designer zu erstellen. Der Designer legt möglicherweise automatisch Eigenschaften für ein Steuerelement fest, wenn das Steuerelement im Designer hinzugefügt wird. Der XAML-Code-Editor bietet Ihnen viel mehr Kontrolle.

Wenn sowohl der Designer als auch der Editor sichtbar sind, werden Änderungen an einem in der anderen angezeigt. Während Sie mit dem Textcursor im Code-Editor navigieren, werden im Eigenschaftenfenster die Eigenschaften und Attribute dieses Objekts angezeigt.

Untersuchen des XAML-Codes

Nachdem Ihr Projekt erstellt wurde, ist der XAML-Code-Editor mit einer minimalen Menge an XAML-Code sichtbar, um das Fenster anzuzeigen. Wenn der Editor nicht geöffnet ist, doppelklicken Sie im Projektmappen-Explorer-Fenster auf das Element "MainWindow.xaml". Sie sollten XAML sehen, das dem folgenden Beispiel ähnelt:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Von Bedeutung

Wenn Sie in Visual Basic programmieren, unterscheidet sich das XAML geringfügig, insbesondere bei dem x:Class=".."-Attribut. XAML in Visual Basic verwendet den Klassennamen des Objekts und lässt den Namespace der Klasse weg.

Um den XAML-Code besser zu verstehen, lassen Sie uns es aufschlüsseln. XAML ist einfach XML, das von WPF verarbeitet wird, um eine Benutzeroberfläche zu erstellen. Um XAML zu verstehen, sollten Sie mindestens mit den Grundlagen von XML vertraut sein.

Der Dokumentstamm <Window> stellt den Typ des Objekts dar, das von der XAML-Datei beschrieben wird. Es gibt acht deklarierte Attribute, und sie gehören in der Regel zu drei Kategorien:

XML-Namespaces

Ein XML-Namespace bietet Struktur für das XML und bestimmt, welche XML-Inhalte in der Datei deklariert werden können.

Das Hauptmerkmal xmlns importiert den XML-Namespace der gesamten Datei und ordnet in diesem Fall den von WPF deklarierten Typen zu. Die anderen XML-Namespaces deklarieren ein Präfix und importieren andere Typen und Objekte für die XAML-Datei. Beispielsweise deklariert der xmlns:local-Namespace das local-Präfix und ordnet es den von Ihrem Projekt deklarierten Objekten zu, die im Names-Code-Namespace deklariert sind.
x:Class-Attribut

Dieses Attribut ordnet den <Window> dem vom Code definierten Typ zu: der Datei MainWindow.xaml.cs oder MainWindow.xaml.vb, die die Names.MainWindow Klasse in C# und die MainWindow Klasse in Visual Basic darstellt.
Title-Attribut

Jedes normale Attribut, das für das XAML-Objekt deklariert ist, legt eine Eigenschaft dieses Objekts fest. In diesem Fall legt das Title Attribut die Window.Title Eigenschaft fest.

Ändern des Fensters

Für unsere Beispiel-App ist dieses Fenster zu groß, und die Titelleiste ist nicht beschreibend. Lassen Sie uns dieses Problem beheben.

Führen Sie zunächst die App aus, indem Sie die F5-TASTE drücken oder im Menü " Debuggen>starten" auswählen.

Das von der Vorlage generierte Standardfenster wird ohne Steuerelemente angezeigt und trägt den Titel MainWindow.
Ändern Sie den Titel des Fensters, indem Sie Title in Names setzen.

Ändern Sie die Größe des Fensters, indem Sie Height auf 180 und Width auf 260 einstellen.

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Vorbereiten des Layouts

WPF bietet ein leistungsfähiges Layoutsystem mit vielen verschiedenen Layoutsteuerelementen. Layoutsteuerelemente helfen bei der Platzierung und Größe untergeordneter Steuerelemente und können dies sogar automatisch tun. Das standardmäßige Layoutsteuerelement, das Ihnen in diesem XAML-Code bereitgestellt wird, ist das <Grid> Steuerelement.

Mit dem Rastersteuerelement können Sie Zeilen und Spalten wie eine Tabelle definieren und Steuerelemente innerhalb der Grenzen einer bestimmten Zeilen- und Spaltenkombination platzieren. Sie können beliebig viele Kind-Steuerelemente oder andere Layout-Steuerelemente zum Raster hinzufügen. Sie können z. B. ein anderes <Grid> Steuerelement in einer bestimmten Zeilen- und Spaltenkombination platzieren, und das neue Raster kann dann weitere Zeilen und Spalten definieren und eigene untergeordnete Elemente haben.

Das Rastersteuerelement platziert seine untergeordneten Steuerelemente in Zeilen und Spalten. Ein Raster hat immer eine einzelne Zeile und Spalte deklariert, was bedeutet, dass das Raster standardmäßig eine einzelne Zelle ist. Das bietet Ihnen nicht wirklich viel Flexibilität beim Platzieren von Steuerelementen.

Passen Sie das Layout des Rasters für die steuerelemente an, die für diese App erforderlich sind.

Fügen Sie dem <Grid> Element ein neues Attribut hinzu: Margin="10".

Diese Einstellung zieht das Raster vom Rand des Fensters herein und macht das Erscheinungsbild etwas schöner.

Definieren Sie zwei Zeilen und zwei Spalten, und teilen Sie das Raster in vier Zellen auf:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

Wählen Sie das Raster im XAML-Code-Editor oder IM XAML-Designer aus, und sie sehen, dass der XAML-Designer jede Zeile und Spalte anzeigt:

Hinzufügen des ersten Steuerelements

Nachdem das Raster konfiguriert wurde, können wir mit dem Hinzufügen von Steuerelementen beginnen. Beginnen Sie zuerst mit der Beschriftungskontrolle.

Erstellen Sie nach den Zeilen- und Spaltendefinitionen ein neues <Label> Element innerhalb des <Grid> Elements. Legen Sie den Inhalt des Elements auf den Zeichenfolgenwert von Names:
```
<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>
```
Die <Label>Names</Label> definiert den Inhalt Names. Einige Steuerelemente verstehen, wie Inhalte behandelt werden, andere nicht. Der Inhalt eines Steuerelements ist der Content Eigenschaft zugeordnet. Wenn Sie den Inhalt über die XAML-Attributsyntax festlegen, verwenden Sie dieses Format: <Label Content="Names" />. Beide Möglichkeiten erreichen dasselbe, indem Sie den Inhalt der Beschriftung so festlegen, dass der Text Namesangezeigt wird.

Beachten Sie, dass die Beschriftung die Hälfte des Fensters einnimmt, da sie automatisch an die erste Zeile und Spalte des Rasters positioniert wurde. Für unsere erste Zeile benötigen wir nicht so viel Platz, da wir diese Zeile nur für die Bezeichnung verwenden werden.
Ändern Sie das Height-Attribut des ersten <RowDefinition> von * zu Auto.

Der Auto Wert passt die Zeilenhöhe der Tabelle automatisch an die Größe des Inhalts an, in diesem Fall die Beschriftung.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
Beachten Sie, dass das Gestaltungsprogramm die Beschriftung jetzt zeigt, die einen kleinen Teil der verfügbaren Höhe einnimmt. Jetzt gibt es mehr Platz für die nächste Reihe.

Platzierung steuern

Lassen Sie uns über die Steuerungsplatzierung sprechen. Die im vorherigen Abschnitt erstellte Beschriftung wurde automatisch in Zeile 0 und Spalte 0 des Rasters platziert. Die Nummerierung für Zeilen und Spalten beginnt bei 0 und erhöht um 1. Das Steuerelement weiß nichts über das Raster, und das Steuerelement definiert keine Eigenschaften, um die Platzierung innerhalb des Rasters zu steuern.

Wie teilen Sie einem Steuerelement die Verwendung einer anderen Zeile oder Spalte mit, wenn das Steuerelement kein Wissen über das Raster hat? Zugeordnete Eigenschaften Das Raster nutzt das leistungsstarke Eigenschaftensystem, das von WPF bereitgestellt wird.

Das Rastersteuerelement definiert neue Eigenschaften, die die untergeordneten Steuerelemente mit sich verknüpfen können. Die Eigenschaften sind für das Steuerelement selbst nicht vorhanden, sie stehen dem Steuerelement zur Verfügung, sobald es dem Raster hinzugefügt wurde.

Das Raster definiert zwei Eigenschaften, um die Zeilen- und Spaltenplatzierung eines untergeordneten Steuerelements zu bestimmen: Grid.Row und Grid.Column. Wenn diese Eigenschaften aus dem Steuerelement weggelassen werden, wird impliziert, dass sie die Standardwerte von 0 aufweisen. Das Steuerelement wird also in Zeile 0 und Spalte 0 des Rasters platziert. Versuchen Sie, die Platzierung des <Label> Steuerelements zu ändern, indem, Sie das Grid.Column Attribut auf 1 setzen.

<Label Grid.Column="1">Names</Label>

Beachten Sie, dass die Beschriftung in die zweite Spalte verschoben wurde. Sie können die angefügten Eigenschaften Grid.Row und Grid.Column verwenden, um die nächsten Steuerelemente zu platzieren, die wir erstellen werden. Stellen Sie die Beschriftung jetzt jedoch in Spalte 0 wieder her.

Erstellen Sie das Namenslistenfeld

Nachdem das Raster richtig angepasst und die Beschriftung erstellt wurde, fügen Sie in der Zeile unterhalb der Beschriftung ein Listenfeld-Steuerelement hinzu.

Deklarieren Sie das <ListBox /> Steuerelement unter dem <Label> Steuerelement.
Legen Sie die Grid.Row-Eigenschaft auf 1 fest.
Legen Sie die x:Name-Eigenschaft auf lstNames fest.

Sobald ein Steuerelement benannt wurde, kann es im Code-Behind referenziert werden. Der Name wird dem Steuerelement mit dem x:Name Attribut zugewiesen.

So sollte der XAML-Code aussehen:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Hinzufügen der verbleibenden Steuerelemente

Die letzten beiden Steuerelemente, die hinzugefügt werden, sind ein Textfeld und eine Schaltfläche, mit der der Benutzer einen Namen eingibt, der dem Listenfeld hinzugefügt werden soll. Anstatt jedoch zu versuchen, mehr Zeilen und Spalten im Raster zu erstellen, um diese Steuerelemente anzuordnen, fügen wir diese Steuerelemente in das <StackPanel> Layoutsteuerelement ein.

Das Stapelpanel unterscheidet sich vom Raster in der Platzierung der Steuerelemente. Während Sie das Raster mithilfe der angefügten Eigenschaften Grid.Row und Grid.Column anweisen, wo die Steuerelemente platziert werden sollen, ordnet das Stackpanel automatisch jedes seiner Kindsteuerelemente der Reihe nach an. Es "stapelt" jedes Steuerelement nach dem anderen.

Deklarieren Sie das <StackPanel> Steuerelement unter dem <ListBox> Steuerelement.
Legen Sie die Grid.Row-Eigenschaft auf 1 fest.
Legen Sie die Grid.Column-Eigenschaft auf 1 fest.
Legen Sie Margin auf 5,0,0,0 fest.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>
```
Das Margin Attribut wurde zuvor im Raster verwendet, aber wir setzen nur einen einzelnen Wert ein. 10 Dieser Rand hat einen Wert von 5,0,0,0, der sich erheblich von 10 unterscheidet. Die Margin-Eigenschaft ist ein Thickness Typ und kann beide Werte interpretieren. Eine Stärke definiert den Abstand um jede Seite eines rechteckigen Rahmens, links, oben, rechts, unten bzw. unten. Wenn der Wert für den Rand ein einzelner Wert ist, wird dieser Wert für alle vier Seiten verwendet.
Erstellen Sie innerhalb des <StackPanel> Steuerelements ein <TextBox /> Steuerelement.
1. Legen Sie die x:Name-Eigenschaft auf txtName fest.
Schließlich erstellen Sie nach dem <TextBox>, noch im Inneren des <StackPanel> Steuerelements, ein <Button>-Steuerelement.
1. Legen Sie die x:Name-Eigenschaft auf btnAdd fest.
2. Legen Sie Margin auf 0,5,0,0 fest.
3. Legen Sie den Inhalt auf Add Name.

So sollte der XAML-Code aussehen:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Das Layout für das Fenster ist abgeschlossen. Unsere App verfügt jedoch nicht über eine Logik, um tatsächlich funktionsfähig zu sein. Als Nächstes müssen wir die Ereignisse der Steuerelemente mit Code verknüpfen und die App dazu bringen, tatsächlich etwas zu tun.

Hinzufügen von Code für das Click-Ereignis

Das von uns erstellte <Button> hat ein Click-Ereignis, das ausgelöst wird, wenn der Benutzer die Schaltfläche drückt. Sie können dieses Ereignis abonnieren und Code hinzufügen, um dem Listenfeld einen Namen hinzuzufügen. XAML-Attribute werden verwendet, um Ereignisse zuzuordnen, genauso wie sie zum Festlegen von Eigenschaften verwendet werden.

Suchen Sie das <Button> Steuerelement.

Festlegen des Attributs Click auf ButtonAddName_Click

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

Generieren Sie den Ereignishandlercode. Klicken Sie mit der rechten Maustaste, ButtonAddName_Click und wählen Sie "Gehe zu Definition" aus.

Diese Aktion generiert eine Methode im CodeBehind, die dem bereitgestellten Handlernamen entspricht.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

Fügen Sie als Nächstes den folgenden Code hinzu, um die folgenden drei Schritte auszuführen:

Stellen Sie sicher, dass das Textfeld einen Namen enthält.
Überprüfen Sie, ob der im Textfeld eingegebene Name noch nicht vorhanden ist.
Fügen Sie den Namen zum Listenfeld hinzu.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

App starten

Nachdem das Ereignis behandelt wurde, führen Sie die App aus. Das Fenster wird angezeigt, und Sie können einen Namen in das Textfeld eingeben und dann durch Klicken auf die Schaltfläche hinzufügen.

Ausführen einer Windows Presentation Foundation (WPF) für .NET-App.

Freigeben über