Lernprogramm: Erstellen einer WPF-Anwendung mit C#

In diesem Lernprogramm werden Sie mit vielen Tools, Dialogfeldern und Designern vertraut, die Sie beim Entwickeln von Anwendungen mit Visual Studio verwenden können. Sie erstellen eine "Hello, World"-Anwendung, entwerfen die Benutzeroberfläche, fügen Code hinzu und debuggen Fehler. Erfahren Sie gleichzeitig mehr über die Arbeit in der integrierten Entwicklungsumgebung von Visual Studio (IDE).

• Konfigurieren der IDE
• Erstellen eines Projekts
• Entwerfen der Benutzeroberfläche
• Debuggen und Testen der Anwendung

Voraussetzungen

• Wenn Sie nicht über Visual Studio verfügen, wechseln Sie zu Visual Studio downloads, um es kostenlos zu installieren.
• Stellen Sie sicher, dass die .NET-Desktopentwicklung Workload installiert ist. Sie können diese Konfiguration in Visual Studio Installer überprüfen.
• Sie können .NET Framework oder .NET Core für dieses Lernprogramm verwenden. .NET Core ist das neuere, modernere Framework. .NET Core erfordert Visual Studio 2019, Version 16.3 oder höher.

Was ist Windows Presentation Foundation?

Windows Presentation Foundation (WPF) ist ein Benutzeroberflächenframework, das Desktopclientanwendungen erstellt. Die WPF-Entwicklungsplattform unterstützt eine breite Palette von Anwendungsentwicklungsfeatures, darunter ein Anwendungsmodell, Ressourcen, Steuerelemente, Grafiken, Layout, Datenbindung, Dokumente und Sicherheit.

WPF ist Teil von .NET. Wenn Sie zuvor Anwendungen mit .NET mithilfe von ASP.NET oder Windows Forms erstellt haben, sollten Sie mit der Programmierung vertraut sein. WPF verwendet die Extensible Application Markup Language (XAML) zum Bereitstellen eines deklarativen Modells für die Anwendungsprogrammierung. Weitere Informationen finden Sie im Desktophandbuch (WPF .NET).

Konfigurieren der IDE

Wenn Sie Visual Studio starten, wird das Startfenster geöffnet. Wählen Sie Weiter ohne Code aus, um die Entwicklungsumgebung zu öffnen. Sie sehen Toolfenster, Menüs und Symbolleisten sowie den Hauptfensterbereich. Toolfenster sind an den Seiten des Anwendungsfensters verankert. Das Suchfeld, die Menüleiste und die Standardsymbolleiste befinden sich oben. Wenn Sie eine Lösung oder ein Projekt laden, werden Editoren und Designer im zentralen Bereich des Anwendungsfensters angezeigt. Wenn Sie eine Anwendung entwickeln, verbringen Sie die meiste Zeit in diesem zentralen Bereich.

Erstellen des Projekts

Wenn Sie eine Anwendung in Visual Studio erstellen, erstellen Sie zunächst ein Projekt und eine Projektmappe. In diesem Beispiel erstellen Sie ein Windows Presentation Foundation (WPF)-Projekt.

1. Öffnen Sie Visual Studio.

2. Wählen Sie im Startfenster Neues Projekt erstellenaus.

   

3. Suchen Sie auf dem Bildschirm Neues Projekt erstellen nach WPF. Wählen Sie WPF-Anwendung und dann Weiter aus.

   

4. Geben Sie auf dem nächsten Bildschirm dem Projekt einen Namen, HelloWPFApp-, und wählen Sie Nextaus.

   

5. Überprüfen Sie im Fenster Zusätzliche Informationen, ob .NET 8.0- für Ihr Zielframework ausgewählt ist. Wählen Sie anschließend Erstellen aus.

   

Visual Studio erstellt das HelloWPFApp-Projekt und die Lösung. Projektmappen-Explorer zeigt die verschiedenen Dateien an. Der WPF-Designer zeigt eine Entwurfsansicht und eine XAML-Ansicht von MainWindow.xaml in einer geteilten Ansicht an. Ziehen Sie den Splitter, um mehr oder weniger der jeweiligen Ansichten anzuzeigen. Sie können auswählen, dass nur die visuelle Ansicht oder nur die XAML-Ansicht angezeigt wird.

Anmerkung

Weitere Informationen zur Extensible Application Markup Language (XAML) finden Sie in XAML-Übersicht für WPF.

Nachdem Sie das Projekt erstellt haben, können Sie es anpassen. Wählen Sie dazu Eigenschaftenfenster aus dem Menü Ansicht aus, oder drücken Sie F4. Anschließend können Sie Optionen für Projektelemente, Steuerelemente und andere Elemente in einer Anwendung anzeigen und ändern.

Entwerfen der Benutzeroberfläche

Wenn der Designer nicht geöffnet ist, wählen Sie MainWindow.xaml aus, und wählen Sie Umschalttaste+F7 aus, um den Designer zu öffnen.

In diesem Lernprogramm fügen Sie dieser Anwendung drei Arten von Steuerelementen hinzu: ein TextBlock-Steuerelement, zwei RadioButton-Steuerelemente und ein Button-Steuerelement.

Hinzufügen eines TextBlock-Steuerelements

Führen Sie die folgenden Schritte aus, um einen TextBlock hinzuzufügen.

1. Wählen Sie STRG-+Q- aus, um das Suchfeld zu aktivieren, und geben Sie Toolbox-ein. Wählen Sie in der Ergebnisliste Anzeigen > Toolbox aus.

2. Erweitern Sie in der Toolbox den Knoten Häufig verwendete WPF-Steuerelemente, damit das TextBlock-Steuerelement angezeigt wird.

   

3. Fügen Sie der Entwurfsoberfläche ein TextBlock-Steuerelement hinzu. Wählen Sie das TextBlock Element aus, und ziehen Sie es in das Fenster auf der Entwurfsoberfläche. Zentriere die Steuerung nahe dem oberen Rand des Fensters. Sie können die Richtlinien verwenden, um das Steuerelement zu zentrieren.

   Ihr Fenster sollte diesem Bild ähneln:

   

   Das XAML-Markup sollte wie in diesem Beispiel aussehen:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

Den Text im Textblock anpassen

Sie können ändern, welcher Text im TextBlock angezeigt wird.

1. Suchen Sie in der XAML-Ansicht das Markup für TextBlock-, und ändern Sie das Text--Attribut von TextBlock in Select a message option and then choose the Display button.

   Das XAML-Markup sollte wie in diesem Beispiel aussehen:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. Zentrieren Sie den TextBlock erneut, und speichern Sie die Änderungen, indem Sie STRG+S auswählen oder das Menüelement Datei verwenden.

Hinzufügen von Optionsfeldern

Fügen Sie als Nächstes zwei RadioButton--Steuerelemente zum Formular hinzu.

1. Suchen Sie in der Toolbox nach dem RadioButton-Steuerelement.

   

2. Fügen Sie der Entwurfsoberfläche zwei RadioButton-Steuerelemente hinzu. Wählen Sie das RadioButton Element aus, und ziehen Sie es in das Fenster auf der Entwurfsoberfläche. Verschieben Sie die Schaltflächen, indem Sie sie auswählen und die Pfeiltasten verwenden. Ordnen Sie sie so an, dass die Schaltflächen nebeneinander unter dem TextBlock-Steuerelement angezeigt werden. Sie können die Richtlinien verwenden, um die Steuerelemente auszurichten.

   Ihr Fenster sollte wie folgt aussehen:

   

3. Ändern Sie oben im Fenster Eigenschaften für das linke RadioButton-Steuerelement die Eigenschaft Name in HelloButton.

   

4. Ändern Sie im Fenster Eigenschaften für das richtige RadioButton-Steuerelement die eigenschaft Name in GoodbyeButton, und speichern Sie dann die Änderungen.

Hinzufügen von Anzeigetext für jedes Optionsfeld

Fügen Sie als Nächstes Anzeigetext für jedes RadioButton-Steuerelement hinzu. Die folgende Prozedur aktualisiert die Eigenschaft Inhalt für ein RadioButton-Steuerelement.

• Ändern Sie das Content-Attribut für die beiden Optionsfelder HelloButton und GoodbyeButton in "Hello" und "Goodbye" im XAML-Code. Das XAML-Markup sollte nun ähnlich wie in diesem Beispiel aussehen:

  <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
       <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
       <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
  </Grid>
  

Festlegen eines standardmäßig zu aktivierenden Optionsfelds

In diesem Schritt legen Sie fest, dass „HelloButton“ standardmäßig aktiviert wird, sodass eines der beiden Optionsfelder immer aktiviert ist.

1. Suchen Sie in der XAML-Ansicht das Markup für HelloButton.

2. Fügen Sie ein IsChecked-attribut hinzu, und legen Sie es auf Truefest. Fügen Sie insbesondere IsChecked="True" hinzu.

   Das XAML-Markup sollte nun ähnlich wie in diesem Beispiel aussehen:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

Hinzufügen des Schaltflächensteuerelements

Das endgültige UI-Element, das Sie hinzufügen, ist ein Button-Steuerelement.

1. Suchen Sie in der Toolbox nach dem Button-Steuerelement. Fügen Sie sie der Entwurfsoberfläche unter den RadioButton-Steuerelementen hinzu, indem Sie sie in der Entwurfsansicht auf das Formular ziehen. Die Führungslinien können Sie beim Zentrieren des Steuerelements unterstützen.

2. Ändern Sie in der XAML-Ansicht den Wert Inhalts- für das Schaltflächensteuerelement von Content="Button" in Content="Display", und speichern Sie dann die Änderungen.

   Ihr Fenster sollte diesem Screenshot ähneln:

   

   Das XAML-Markup sollte nun ähnlich wie in diesem Beispiel aussehen:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

Hinzufügen von Code zur Anzeigeschaltfläche

Wenn die Anwendung ausgeführt wird, wird ein Meldungsfeld angezeigt, nachdem ein Benutzender zunächst ein Optionsfeld aktiviert und anschließend die Schaltfläche Anzeigen ausgewählt hat. Ein Meldungsfeld wird für Hello angezeigt, und ein anderes wird für "Goodbye" angezeigt. Um dieses Verhalten zu erstellen, fügen Sie dem Button_Click-Ereignis in MainWindow.xaml.csCode hinzu.

1. Doppelklicken Sie auf der Designoberfläche auf die Schaltfläche Anzeigen.

   MainWindow.xaml.cs wird geöffnet, der Cursor zeigt auf das Button_Click-Ereignis.

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Wenn Sie auf die Schaltfläche Anzeigen doppelklicken, wird Click="Button_Click" zum XAML hinzugefügt.

   Das XAML-Markup sollte nun ähnlich wie in diesem Beispiel aussehen:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Fügen Sie den folgenden Code in die geschweiften Klammern von Button_Click hinzu.

   if (HelloButton.IsChecked == true)
   {
        MessageBox.Show("Hello.");
   }
   else if (GoodbyeButton.IsChecked == true)
   {
       MessageBox.Show("Goodbye.");
   }
   

3. Speichern Sie die Anwendung.

Debuggen und Testen der Anwendung

Debuggen Sie als Nächstes die Anwendung, um nach Fehlern zu suchen und zu testen, dass beide Meldungsfelder ordnungsgemäß angezeigt werden. In den folgenden Anweisungen erfahren Sie, wie Sie den Debugger erstellen und starten. Weitere Informationen finden Sie unter Erstellen einer WPF-Anwendung (WPF) und Debuggen von WPF-.

Ändern des Namens von "MainWindow.xaml"

Geben Sie "MainWindow" einen spezifischeren Namen. Klicken Sie im Solution Explorermit der rechten Maustaste auf MainWindow.xaml und wählen Sie Umbenennen. Benennen Sie die Datei in Greetings.xaml-um. In diesem Beispiel erstellt diese Änderung einen Fehler, der später verwendet wird, um das Debuggen zu veranschaulichen.

Suchen und Beheben von Fehlern

In diesem Schritt finden Sie den Fehler, der zuvor durch Ändern des Namens der MainWindow.xaml Datei verursacht wurde.

Starten des Debuggens und Suchen des Fehlers

1. Starten Sie den Debugger, indem Sie F5- auswählen oder Debug-auswählen und dann Debuggen starten.

   Ein Unterbrechungsmodus-Fenster erscheint, und das Ausgabe-Fenster deutet darauf hin, dass eine IOException aufgetreten ist: Cannot locate resource 'mainwindow.xaml‘ (Die Ressource „mainwindow.xaml“ kann nicht gefunden werden).

   

2. Beenden Sie den Debugger, indem Sie Debug>Debugging anhaltenauswählen.

Sie haben MainWindow.xaml in Greetings.xamlumbenannt, aber der Code verweist weiterhin auf MainWindow.xaml als Start-URI für die Anwendung, sodass das Projekt nicht gestartet werden kann.

Angeben von Greetings.xaml als Start-URI

1. Öffnen Sie im Projektmappen-Explorerdie datei App.xaml.

2. Ändern Sie StartupUri="MainWindow.xaml" in StartupUri="Greetings.xaml", und speichern Sie die Änderungen.

Als optionaler Schritt vermeiden Sie Verwirrung, um den Titel des Anwendungsfensters so zu ändern, dass er diesem neuen Namen entspricht.

1. Öffnen Sie im Projektmappen-Explorerdie Greetings.xaml Datei, die Sie soeben umbenannt haben.

2. Ändern Sie den Wert der eigenschaft Window.Title von Title="MainWindow" in Title="Greetings", und speichern Sie die Änderungen.

Starten Sie den Debugger erneut (drücken Sie F5). Jetzt sollte das Fenster Greetings der Anwendung angezeigt werden.

Um das Debuggen zu beenden, schließen Sie das Anwendungsfenster.

Debuggen mit Haltepunkten

Sie können den Code beim Debuggen testen, indem Sie einige Haltepunkte hinzufügen. Sie können Haltepunkte durch Auswählen von Debuggen>Haltepunkt umschalten hinzufügen, indem Sie am linken Rand des Editors neben die Codezeile klicken, in der die Unterbrechung stattfinden soll, oder indem Sie F9 drücken.

Hinzufügen von Haltepunkten

1. Öffnen Sie Greetings.xaml.cs, und wählen Sie diese Zeile aus: MessageBox.Show("Hello.")

2. Fügen Sie einen Haltepunkt hinzu, indem Sie im Menü Debuggen und dann Haltepunkt umschalten auswählen.

   Ein roter Kreis wird neben der Codezeile am linken Rand des Editorfensters angezeigt.

3. Wählen Sie diese Zeile aus: MessageBox.Show("Goodbye.").

4. Drücken Sie die F9 Taste, um einen Haltepunkt hinzuzufügen, und wählen Sie dann F5- aus, um mit dem Debuggen zu beginnen.

5. Aktivieren Sie im Fenster Greetings das Optionsfeld Hello, und wählen Sie dann die Schaltfläche Anzeigen aus.

   Die Linie MessageBox.Show("Hello.") ist gelb hervorgehoben. Am unteren Rand der IDE werden die Fenster „Automatisch“, „Lokale Variablen“ und „Überwachung“ auf der linken Seite angedockt. Die Fenster Aufrufliste, Haltepunkte, Ausnahmeeinstellungen, Befehl, Direkt und Ausgabe werden auf der rechten Seite angedockt.

   

6. Wählen Sie in der Menüleiste Debuggen>Rücksprung aus.

   Die Anwendung setzt die Ausführung fort, und ein Meldungsfeld mit dem Wort "Hello" wird angezeigt.

7. Wählen Sie OK im Meldungsfeld aus, um es zu schließen.

8. Aktivieren Sie im Fenster Greetings das Optionsfeld Goodbye, und wählen Sie dann die Schaltfläche Anzeigen aus.

   Die Linie MessageBox.Show("Goodbye.") ist gelb hervorgehoben.

9. Wählen Sie die taste F5 aus, um mit dem Debuggen fortzufahren. Wenn das Meldungsfeld angezeigt wird, wählen Sie OK im Meldungsfeld aus, um es zu schließen.

10. Um das Debuggen zu beenden, schließen Sie das Anwendungsfenster.

11. Wählen Sie in der Menüleiste Debuggen>Alle Haltepunkte deaktivieren aus.

Anzeigen einer Darstellung der UI-Elemente

In der ausgeführten App sollte ein Widget angezeigt werden, das am oberen Rand des Fensters angezeigt wird. Das Widget ist ein Laufzeithilfsprogramm, das schnellen Zugriff auf einige hilfreiche Debugfeatures bietet. Klicken Sie auf die erste Schaltfläche, Zur visuellen Echtzeitstruktur wechseln. Sie sollten ein Fenster mit einer Baumstruktur sehen, die alle grafischen Elemente Ihrer Seite enthält. Erweitern Sie die Knoten, um die hinzugefügten Schaltflächen zu finden.

Erstellen einer Releaseversion der Anwendung

Nachdem Sie überprüft haben, ob alles funktioniert, können Sie einen Releasebuild der Anwendung vorbereiten.

1. Wählen Sie im Hauptmenü Build>Clean solution aus, um Zwischendateien und Ausgabedateien zu löschen, die in früheren Builds erstellt wurden. Dieser Schritt ist nicht erforderlich, bereinigt jedoch die Ausgaben des Builddebugvorgangs.

2. Ändern Sie die Buildkonfiguration für HelloWPFApp von Debug- in Release- mithilfe des Dropdownsteuerelements auf der Symbolleiste. Aktuell wird Debuggen angezeigt.

3. Erstellen Sie die Lösung, indem Sie Build>Build Solutionauswählen.

Herzlichen Glückwunsch zum Abschluss dieses Lernprogramms! Sie finden .exe – von Ihnen erstellt – in Ihrer Projektmappe und im Projektverzeichnis (...\HelloWPFApp\HelloWPFApp\bin\Release).

Verwandte Inhalte

• Tipps zur Produktivität

Nächster Schritt

Herzlichen Glückwunsch zum Abschluss dieses Lernprogramms! Um noch mehr zu erfahren, fahren Sie mit den folgenden Lernprogrammen fort.

Fortfahren mit weiteren WPF-Lernprogrammen