Tutorial: Erstellen einer neuen WPF-App mit .NET

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:

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

Voraussetzungen

Erstellen einer WPF-App

Für die Erstellung einer neuen App müssen Sie erst Visual Studio öffnen und die App dann aus einer Vorlage 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 fenster Projektmappen-Explorer auf die Datei "MainWindow.xaml", um den Designer zu öffnen.

Wichtige Visual Studio-Komponenten

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:

1. Projektmappen-Explorer

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

2. Eigenschaften

   In diesem Fenster werden Eigenschafteneinstellungen angezeigt, die Sie basierend auf dem ausgewählten Element konfigurieren können. Wenn Sie z. B. ein Element im Projektmappen-Explorer auswählen, werden die Eigenschafteneinstellungen für diese 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.

3. 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 das Steuerelement, oder legen Sie das Steuerelement auf der Oberfläche ab. 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.

4. XAML-Designer

   Dieser Designer wird für XAML-Dokumente verwendet. Hierbei handelt es sich um eine interaktive Oberfläche, in die Sie Objekte per Drag & Drop aus der Toolbox verschieben können. Indem Sie Elemente im Designer auswählen und verschieben, können Sie die Benutzeroberfläche für Ihre App visuell erstellen.

   Wenn der Designer und der Editor geöffnet sind, werden Änderungen in einem Bereich auch im anderen übernommen.

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

5. XAML-Code-Editor

   Dieser XAML-Code-Editor wird für XAML-Dokumente verwendet. Mit dem XAML-Code-Editor können Sie die Benutzeroberfläche selbst erstellen – ganz ohne Designer. 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 der Designer und der Editor geöffnet sind, werden Änderungen in einem Bereich auch im anderen übernommen. Während Sie im Code-Editor im Text caret navigieren, werden im Eigenschaftenfenster die Eigenschaften und Attribute zu diesem Objekt angezeigt.

Erläuterungen zum XAML-Code

Nach der Projekterstellung wird der XAML-Code-Editor geöffnet. Er enthält nur den XAML-Code, der zum Anzeigen des Fensters benötigt wird. Wenn der Editor nicht geöffnet ist, doppelklicken Sie im fenster Projektmappen-Explorer auf das Element "MainWindow.xaml". Der XAML-Code sollte folgendem Beispiel entsprechen:

<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>

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. Sie sollten mindestens mit den Grundlagen zu XML vertraut sein, um den XAML-Code zu verstehen.

Der Dokumentstamm <Window> stellt den Typ des Objekts dar, das von der XAML-Datei beschrieben wird. In diesem Fall sind acht Attribute deklariert, die in der Regel in eine der folgenden drei Kategorien fallen:

• XML-Namespaces

  Ein XML-Namespace stellt die Struktur für die XML-Datei bereit, indem er festlegt, welche XML-Inhalte in der Datei deklariert werden können.

  Das Hauptattribut xmlns importiert den XML-Namespace für die gesamte Datei. In diesem Fall ordnet sie diesen zudem den Typen zu, die von WPF deklariert wurden. Die anderen XML-Namespaces deklarieren ein Präfix und importieren andere Typen und Objekte für die XAML-Datei. Der Namespace xmlns:local deklariert beispielsweise das Präfix local und ordnet die von Ihrem Projekt im Codenamespace Names deklarierten Objekte zu.

• x:Class-Attribut

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

• Title-Attribut

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

Ändern des Fensters

Für unsere Beispiel-App ist das Fenster zu groß, und die Titelleiste ist nicht aussagekräftig. Das ändern wir gleich.

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

   Das Standardfenster, das von der Vorlage generiert wird, wird ohne Steuerelemente und ein Titel von "MainWindow" angezeigt:

   

2. Ändern Sie den Titel des Fensters, indem Sie die Title Einstellung auf Names.

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

   <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 ausgereiftes Layoutsystem mit vielen unterschiedlichen Layoutsteuerelementen. Mit Layoutsteuerelementen können die Position und die Größe untergeordneter Steuerelemente geändert werden – und das sogar automatisch. In dieser XAML-Datei wird das Standard-Layoutsteuerelement <Grid> bereitgestellt.

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 untergeordnete Steuerelemente oder andere Layoutsteuerelemente 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 über eigene untergeordnete Elemente verfügen.

Das Rastersteuerelement platziert seine untergeordneten Steuerelemente in Zeilen und Spalten. Für ein Raster ist immer jeweils eine Zeile und eine Spalte deklariert. Das bedeutet, dass ein Raster standardmäßig eine Zelle ist. Das bietet Ihnen nicht viel Flexibilität beim Platzieren der Steuerelemente.

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

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

   Diese Einstellung bringt das Raster von den Fensterrändern ein und macht es etwas schöner.

2. 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>
   

3. Wählen Sie das Raster im XAML-Code-Editor oder im XAML-Designer aus. 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 mit dem Label-Steuerelement.

1. 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>
   

   Das Element <Label>Names</Label> definiert den Inhalt von Names. Manche Steuerelemente können Inhalt verarbeiten, andere nicht. Der Inhalt eines Steuerelements wird der Eigenschaft Content zugeordnet. Verwenden Sie das folgende Format, um den Inhalt über die XAML-Attributsyntax festzulegen: <Label Content="Names" />. Mit beiden Methoden wird der Inhalt der Bezeichnung so festgelegt, dass der Text Names angezeigt 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 die erste Zeile wird jedoch nicht so viel Platz benötigt, da diese nur für die Bezeichnung verwendet wird.

2. Ändern Sie das Attribut Height des ersten <RowDefinition>-Elements von * in Auto.

   Der Wert Auto passt die Größe der Rasterzeile automatisch an den Inhalt an – in diesem Fall an das Label-Steuerelement.

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

   Jetzt sehen Sie, dass die Bezeichnung im Designer nur noch einen geringen Anteil der verfügbaren Höhe einnimmt. So bleibt mehr Platz für die nächste Zeile.

   

Platzierung von Steuerelementen

Nun wird näher auf das Platzieren von Steuerelementen eingegangen. 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 kennt die Eigenschaften des Rasters nicht und definiert keine Eigenschaften, um seine Position im Raster zu steuern.

Doch wie weisen Sie ein Steuerelement an, eine andere Zeile und/oder Spalte zu verwenden, wenn es die Eigenschaften des Rasters nicht kennt? Die Antwort lautet: durch angefügte Eigenschaften. Das Raster nutzt das ausgereifte Eigenschaftensystem von WPF.

Das Rastersteuerelement definiert neue Eigenschaften, die die untergeordneten Steuerelemente an sich selbst anfügen 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 Spaltenposition eines untergeordneten Steuerelements zu bestimmen: Grid.Row und Grid.Column. Wenn diese Eigenschaften im Steuerelement ausgelassen werden, wird impliziert, dass diese den Standardwert 0 aufweisen. Das Steuerelement wird also in Zeile 0 und Spalte 0 des Rasters platziert. Ändern Sie die Position des Steuerelements <Label>, indem Sie das Attribut Grid.Column auf 1 festlegen:

<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 Steuerelemente zu platzieren, die Sie als Nächstes erstellen. Legen Sie vorerst jedoch wieder Spalte 0 für die Bezeichnung fest.

Erstellen eines Listenfelds für Namen

Da die Größe des Rasters jetzt passend eingestellt und die Bezeichnung erstellt wurde, können Sie ein Listenfeld-Steuerelement zur Zeile unter der Bezeichnung hinzufügen.

1. Deklarieren Sie das <ListBox /> Steuerelement unter dem <Label> Steuerelement.

2. Setzen Sie die Grid.Row-Eigenschaft auf 1.

3. Setzen Sie die x:Name-Eigenschaft auf lstNames.

   Sobald ein Name für ein Steuerelement festgelegt wurde, kann in der CodeBehind-Datei darauf verwiesen werden. Der Name wird dem Steuerelement mit dem Attribut x:Name 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 restlichen 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 StackPanel-Element unterscheidet sich vom Raster hinsichtlich der Platzierung der Steuerelemente. Während Sie das Raster anweisen, wo die Steuerelemente mit den Grid.Row und Grid.Column den angefügten Eigenschaften sein sollen, funktioniert das Stapelpanel automatisch, um jedes seiner untergeordneten Steuerelemente sequenziell zu gestalten. Es "stapelt" jedes Steuerelement nach dem anderen.

1. Deklarieren Sie das <StackPanel> Steuerelement unter dem <ListBox> Steuerelement.

2. Setzen Sie die Grid.Row-Eigenschaft auf 1.

3. Setzen Sie die Grid.Column-Eigenschaft auf 1.

4. Legen Sie den 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 Attribut Margin wurde zuvor im Raster verwendet. Sie haben jedoch nur den Wert 10 angegeben. Dieser Rand hat einen Wert von 5,0,0,0, der sich sehr von 10. Die Margin-Eigenschaft ist ein Thickness Typ und kann beide Werte interpretieren. Ein solcher Typ definiert den Leerraum um jede Seite eines rechteckigen Rahmens: links, oben, rechts, unten. Wenn nur ein Wert für den Rand vorhanden ist, wird dieser für alle vier Seiten verwendet.

5. Erstellen Sie innerhalb des <StackPanel> Steuerelements ein <TextBox /> Steuerelement.

   1. Setzen Sie die x:Name-Eigenschaft auf txtName.

6. Schließlich erstellen Sie nach dem <TextBox>, noch im Inneren des <StackPanel>Steuerelements, ein <Button> Steuerelement.

   1. Setzen Sie die x:Name-Eigenschaft auf btnAdd.
   2. Legen Sie den 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 damit fertig. Ihre App enthält jedoch noch keine Logik und ist damit nicht funktional. Als Nächstes müssen Sie die Steuerelementereignisse mit dem Code verbinden, damit die App eine Funktion erfüllt.

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

Das erstellte <Button>-Element enthält das Ereignis Click, das immer dann ausgelöst wird, wenn der Benutzer eine Schaltfläche auswählt. Sie können dieses Ereignis abonnieren und Code hinzufügen, um dem Listenfeld einen Namen hinzuzufügen. XAML-Attribute werden verwendet, um Ereignisse wie zum Festlegen von Eigenschaften zu abonnieren.

1. Suchen Sie das <Button> Steuerelement.

2. Legen Sie das Click-Attribut auf ButtonAddName_Click fest.

   <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>
   

3. Generieren Sie den Ereignishandlercode. Klicken Sie mit der rechten Maustaste auf 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
   

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

   1. Sicherstellen, dass das Textfeld einen Namen enthält
   2. Überprüfen, ob der in das Textfeld eingegebene Name bereits vorhanden ist
   3. Hinzufügen des Namens zum Listenfeld

   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
   

Ausführen der App

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

Zugehöriger Inhalt

• Weitere Informationen zu Windows Presentation Foundation
• Übersicht über XAML