Lernprogramm: Erstellen einer WPF-App mit .NET

In diesem Lernprogramm erfahren Sie, wie Sie Visual Studio zum Erstellen einer Windows Presentation Foundation-App (WPF) verwenden. Mit Visual Studio fügen Sie Fenstern Steuerelemente hinzu und behandeln Ereignisse. 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:

Abgeschlossene Beispiel-App für WPF Lernprogramm

Voraussetzungen

Visual Studio 2026
- Wählen Sie die .NET Desktopentwicklungs-Workload aus
- Wählen Sie die .NET 10 einzelne Komponente aus

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 warten Sie, bis die Suchergebnisse angezeigt werden.
Wählen Sie im Dropdown-Menü für die ProgrammierspracheC# oder Visual Basic aus.
Wählen Sie in der Liste der Vorlagen WPF Application und dann Next aus.

Von Bedeutung

Wählen Sie nicht die Vorlage WPF Anwendung (.NET Framework) aus.

Die folgende Abbildung zeigt sowohl C# als auch Visual Basic .NET Projektvorlagen. Wenn Sie den Codesprachenfilter angewendet haben, wird die entsprechende Vorlage aufgelistet.
Legen Sie im Fenster " Neues Projekt konfigurieren " den Projektnamen auf "Namen " fest, und wählen Sie "Weiter" aus.

Sie können Ihr Projekt auch in einem anderen Ordner speichern, indem Sie den Speicherortpfad anpassen.
Schließlich im Fenster Weitere Informationen wählen Sie .NET 10.0 (Long Term Support) für die Einstellung Framework aus, und wählen Sie dann Create aus.

Nachdem Visual Studio die App generiert hat, wird das XAML-Designerfenster für das Standardfenster MainWindow geöffnet. Wenn der Designer nicht sichtbar ist, doppelklicken Sie auf die Datei MainWindow.xaml im Projektmappen-Explorer-Fenster, 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 während der Erstellung einer App interagieren:

Die wichtigen Komponenten von Visual Studio 2026, die Sie kennen sollten, wenn Sie ein WPF-Projekt für .NET erstellen.

Projektmappen-Explorer

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

In diesem Fenster werden Eigenschafteneinstellungen angezeigt, die Sie basierend auf dem Kontext des ausgewählten Elements konfigurieren können. Wenn Sie z. B. ein Element aus Projektmappen-Explorer auswählen, werden einstellungen für die Datei angezeigt. Wenn ein Objekt im Designer ausgewählt ist, werden die Eigenschaften des Steuerelements oder Fensters angezeigt.
Werkzeugkasten

Die Toolbox enthält alle Steuerelemente, die Sie einer Entwurfsoberfläche hinzufügen können. Wenn Sie der aktuellen Oberfläche ein Steuerelement hinzufügen möchten, doppelklicken Sie auf ein Steuerelement oder ziehen Sie es per Drag-and-Drop zum Designer. 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 Sie Ihr Projekt erstellt haben, wird der XAML-Code-Editor geöffnet. Es zeigt eine minimale Menge an XAML-Code zum Anzeigen des Fensters an. Wenn der Editor nicht geöffnet ist, doppelklicken Sie im Fenster Projektmappen-Explorer 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 der XAML-Code geringfügig, insbesondere das 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 stellt den Typ des Objekts dar, das von der XAML-Datei beschrieben wird. Die Datei deklariert acht Attribute, und sie gehören in der Regel zu drei Kategorien:

XML-Namespaces

Ein XML-Namespace stellt die Struktur für den XML-Code bereit. Er bestimmt, welche XML-Inhalte Sie in der Datei deklarieren können.

Das Hauptattribute importiert den XML-Namespace für die gesamte Datei. In diesem Fall entspricht es den von WPF deklarierten Typen. Die anderen XML-Namespaces deklarieren ein Präfix und importieren andere Typen und Objekte für die XAML-Datei. Beispielsweise deklariert der -Namespace das -Präfix und ordnet es den von Ihrem Projekt deklarierten Objekten zu, die im -Code-Namespace deklariert sind.
-Attribut

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

Jedes normale Attribut, das Sie für das XAML-Objekt deklarieren, legt eine Eigenschaft dieses Objekts fest. In diesem Fall legt das Attribut die 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 zuerst die App aus, indem Sie die F5-TASTE drücken oder im Menü " Debuggenstarten" auswählen.

Das von der Vorlage generierte Standardfenster wird ohne sichtbare Steuerelemente und mit dem Titel MainWindow angezeigt.
Ändern Sie den Titel des Fensters, indem Sie in setzen.

Ändern Sie die Größe des Fensters, indem Sie auf und auf 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 in diesem XAML bereitgestellte Standardlayoutsteuerelement ist das 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 dem Raster beliebig viele untergeordnete Steuerelemente oder andere Layoutsteuerelemente hinzufügen. Sie können z. B. ein anderes 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. Diese Standardeinstellung bietet Ihnen keine große 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 Element ein neues Attribut hinzu: .

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. Der XAML-Designer zeigt jede Zeile und Spalte an:

Hinzufügen des ersten Steuerelements

Nachdem das Raster konfiguriert ist, können Sie mit dem Hinzufügen von Steuerelementen beginnen. Fügen Sie zuerst das Bezeichnungssteuerelement hinzu.

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

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

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

    <Label>Names</Label>

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

Die Beschriftung nimmt die Hälfte des Fensters auf, da sie automatisch an die erste Zeile und Spalte des Rasters positioniert wurde. Für die erste Zeile benötigen Sie nicht so viel Platz, da Sie diese Zeile nur für die Beschriftung verwenden werden.
Ändern Sie das -Attribut des ersten von zu .

Der 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>
```
Der Designer zeigt nun die Beschriftung an, die einen kleinen Teil der verfügbaren Höhe einnimmt. Es gibt mehr Platz, den die nächste Zeile einnehmen kann.

Platzierung steuern

Lassen Sie uns über die Steuerungsplatzierung sprechen. Die beschriftung, die Sie im vorherigen Abschnitt erstellt haben, wird 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 Eigenschaftensystem, das von WPF zur Verfügung gestellt 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, aber sie sind für das Steuerelement verfügbar, sobald es dem Raster hinzugefügt wurde.

Das Raster definiert zwei Eigenschaften, um die Zeilen- und Spaltenplatzierung eines untergeordneten Steuerelements zu bestimmen: und . Wenn Sie diese Eigenschaften aus dem Steuerelement weglassen, sind die Standardwerte 0. Das Steuerelement wird also in Zeile und Spalte des Rasters platziert. Versuchen Sie, die Platzierung des Steuerelements zu ändern, indem, Sie das Attribut auf 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 und verwenden, um die nächsten Steuerelemente zu platzieren, die Sie 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 Steuerelement unter dem Steuerelement.
Legen Sie die -Eigenschaft auf fest.
Legen Sie die -Eigenschaft auf fest.

Sobald ein Steuerelement benannt wurde, können Sie darauf im CodeBehind verweisen. Weisen Sie dem Steuerelement den Namen mithilfe des Attributs zu.

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

Fügen Sie ein Textfeld und eine Schaltfläche hinzu. Der Benutzer verwendet diese Steuerelemente, um einen Namen einzugeben, der dem Listenfeld hinzugefügt werden soll. Anstatt mehr Zeilen und Spalten im Raster zu erstellen, um diese Steuerelemente anzuordnen, platzieren Sie diese Steuerelemente in das Layoutsteuerelement.

Das Stapelpanel unterscheidet sich vom Raster bei der Platzierung von Steuerelementen. Während Sie die und zugewiesenen Eigenschaften verwenden, um dem Grid zuzuordnen, wo die Steuerelemente angezeigt werden sollen, funktioniert das Stapelpanel automatisch. Sie legt jedes seiner untergeordneten Steuerelemente sequenziell fest. Es "stapelt" jedes Steuerelement nach dem anderen.

Deklarieren Sie das Steuerelement unter dem Steuerelement.
Legen Sie die -Eigenschaft auf fest.
Legen Sie die -Eigenschaft auf fest.
Legen Sie auf 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>
```
Sie haben das Attribut zuvor im Raster verwendet, aber nur einen einzelnen Wert eingefügt. Dieser Rand hat einen Wert von , der sich erheblich von unterscheidet. Die Margin-Eigenschaft ist ein 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 Steuerelements ein Steuerelement.
1. Legen Sie die -Eigenschaft auf fest.
Schließlich erstellen Sie nach dem , noch im Inneren des Steuerelements, ein -Steuerelement.
1. Legen Sie die -Eigenschaft auf fest.
2. Legen Sie auf fest.
3. Legen Sie den Inhalt auf .

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. Die App verfügt jedoch nicht über eine Logik, um tatsächlich funktionsfähig zu sein. Als Nächstes müssen Sie die Steuerelementereignisse mit Code verbinden und die App abrufen, um tatsächlich etwas zu erledigen.

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

Das von Ihnen erstellte hat ein -Ereignis, das von der App ausgelöst wird, wenn der Benutzer die Schaltfläche drückt. Abonnieren Sie das Ereignis und fügen Sie Code ein, um dem Listenfeld einen Namen hinzuzufügen. Verwenden Sie XAML-Attribute, um Ereignisse zu abonnieren, genau wie Sie sie zum Festlegen von Eigenschaften verwenden.

Suchen Sie das Steuerelement.

Legen Sie das Attribut auf .

<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, und wählen Sie "Gehe zu Definition" aus.

Diese Aktion generiert eine Methode im CodeBehind, die dem angegebenen 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

Führen Sie nach dem Bearbeiten des Ereignisses die App aus. Das Fenster wird angezeigt, und Sie können einen Namen in das Textfeld eingeben. Fügen Sie den Namen hinzu, indem Sie die Schaltfläche auswählen.

Ausführen einer WPF für .NET-App in Visual Studio 2026.

Erfahren Sie mehr über Windows Presentation Foundation
XAML-Übersicht

Feedback

War diese Seite hilfreich?

Last updated on 2026-03-06