Lernprogramm: Erstellen einer WPF-App mit .NET

In diesem Lernprogramm erfahren Sie, wie Sie Visual Studio zum Erstellen einer Windows Presentation Foundation (WPF)-App 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:

Fertige Beispiel-App für das WPF-Lernprogramm

Voraussetzungen

Visual Studio 2026
- Wählen Sie den .NET-Desktopentwicklungs-Workload
- Auswählen der einzelnen .NET 10-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 warten Sie, bis die Suchergebnisse angezeigt werden.
Wählen Sie im Dropdownmenü "Codesprache " C# oder Visual Basic aus.
Wählen Sie in der Liste der Vorlagen 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 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.
Wählen Sie abschließend im Fenster "Zusätzliche Informationen " .NET 10.0 (Long Term Support) für die Framework-Einstellung aus, und wählen Sie dann "Erstellen" 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 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 2026 sollten Sie beim Erstellen eines WPF-Projekts für .NET kennen.

Lösungs-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 beispielsweise ein Element aus dem 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 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 die XAML-Deklaration insbesondere durch das x:Class=".."-Attribut geringfügig. 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, die WPF verarbeitet, 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. 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 xmlns importiert den XML-Namespace für die gesamte Datei. In diesem Fall werden die von WPF deklarierten Typen zugeordnet. 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 Sie für das XAML-Objekt deklarieren, 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 zuerst 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 sichtbare Steuerelemente und mit dem Titel MainWindow angezeigt.
Ä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 in diesem XAML bereitgestellte Standardlayoutsteuerelement 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 dem Raster beliebig viele untergeordnete Steuerelemente oder andere Layoutsteuerelemente 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. 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 <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. 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 <Label> Element innerhalb des <Grid> Elements. Legen Sie den Inhalt des Elements auf den Zeichenfolgenwert Namesfest:
```
<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.

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 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>
```
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 von WPF bereitgestellte Eigenschaftensystem.

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: Grid.Row und Grid.Column. Wenn Sie diese Eigenschaften aus dem Steuerelement weglassen, sind die Standardwerte 0. 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 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 <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, können Sie darauf im CodeBehind verweisen. Weisen Sie dem Steuerelement den Namen mithilfe des x:Name 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 <StackPanel> Layoutsteuerelement.

Das Stapelpanel unterscheidet sich vom Raster bei der Platzierung von Steuerelementen. Während Sie die Grid.Row und Grid.Column 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 <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>
```
Sie haben das Margin Attribut zuvor im Raster verwendet, aber nur einen einzelnen Wert eingefügt. 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. 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 <Button> hat ein Click-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 <Button> Steuerelement.

Legen Sie das Click Attribut 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 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.

Feedback

War diese Seite hilfreich?

Last updated on 2025-12-28