Lernprogramm: Erstellen einer WPF Anwendung mit Visual Basic

In diesem Lernprogramm erstellen Sie eine Anwendung mit Visual Basic in der Visual Studio integrierten Entwicklungsumgebung (Integrated Development Environment, IDE). Ihr Programm verwendet das Windows Presentation Foundation -Ui-Framework (WPF). Verwenden Sie dieses Lernprogramm, um sich mit vielen Tools, Dialogfeldern und Designern vertraut zu machen, die Sie in Visual Studio verwenden können.

In diesem Tutorial lernen Sie Folgendes:

• Erstelle das Projekt
• Konfigurieren des Fensters und Hinzufügen von Text
• Hinzufügen von Schaltflächen und Code
• Debuggen und Testen der Anwendung
• Debuggen mit Haltepunkten
• Erstellen einer Releaseversion

Was ist WPF?

WPF oder Windows Presentation Foundation ist ein Benutzeroberflächenframework, das Desktopclientanwendungen erstellt. Die WPF-Entwicklungsplattform unterstützt eine breite Palette von Anwendungsentwicklungsfeatures, darunter:

• Ein Anwendungsmodell
• Ressourcen
• Bedienelemente
• Graphik
• Layout
• Datenbindung
• Dokumente
• Sicherheit

WPF ist Teil von .NET. Wenn Sie zuvor Anwendungen mit .NET mithilfe von ASP.NET oder Windows Forms entwickelt haben, sollte Ihnen die Programmiererfahrung vertraut vorkommen. WPF verwendet die Extensible Application Markup Language XAML, um ein deklaratives Modell für die Anwendungsprogrammierung bereitzustellen. Weitere Informationen finden Sie unter WPF .NET Overview.

Voraussetzungen

Sie benötigen Visual Studio, um dieses Lernprogramm abzuschließen. Eine kostenlose Version finden Sie unter Visual Studio Downloads.

Erstelle das Projekt

Wenn Sie eine Anwendung in Visual Studio erstellen, erstellen Sie zuerst ein Projekt. Erstellen Sie in diesem Lernprogramm ein Windows Presentation Foundation Projekt.

1. Öffnen Sie Visual Studio.

2. Wählen Sie im Startfenster Neues Projekt erstellen aus.

   

3. Suchen Sie im Fenster Ein neues Projekt erstellen nach WPF, und wählen Sie Visual Basic in der Liste All languages aus. Wählen Sie WPF App (.NET Framework) und dann Next aus.

   

4. Geben Sie dem Projekt einen Namen, HelloWPFApp, und wählen Sie "Erstellen" aus.

   Visual Studio erstellt das HelloWPFApp-Projekt und die Projektmappe. 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.

Hinweis

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

Konfigurieren des Fensters und Hinzufügen von Text

Mithilfe des Eigenschaftenfensters können Sie Optionen für Projektelemente, Steuerelemente und andere Elemente anzeigen und ändern.

1. Öffnen Sie in Projektmappen-Explorer den MainWindow.xaml.

2. Ändern Sie in der XAML-Ansicht den Wert der Window.Title-Eigenschaft von Title="MainWindow" in Title="Greetings".

3. Wählen Sie auf der linken Seite des Visual Studio-IDE die Registerkarte Toolbox aus. Wenn sie nicht angezeigt wird, wählen Sie View>Toolbox in der Menüleiste oder Ctrl+Alt+X.

4. Erweitern Sie entweder Common WPF Controls, oder geben Sie Text in der Suchleiste ein, um TextBlock zu finden.

   

5. Wählen Sie das TextBlock-Element aus, und ziehen Sie es in das Fenster auf der Entwurfsoberfläche. Sie können das TextBlock-Steuerelement verschieben, indem Sie es ziehen. Verwenden Sie die Richtlinien, um das Steuerelement zu platzieren.

   Screenshot des TextBlock-Steuerelements, das im Grußformular positioniert ist, mit den sichtbaren Richtlinien.

   Das XAML-Markup sollte wie im folgenden Beispiel aussehen:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. Suchen Sie in der XAML-Ansicht das Markup für den TextBlock, und ändern Sie das Text-Attribut :

   Text="Select a message option and then choose the Display button."
   

   Zentrieren Sie den TextBlock bei Bedarf erneut.

7. Speichern Sie Ihre App, indem Sie die Schaltfläche " Alle speichern " auswählen. Um Ihre Anwendung zu speichern, wählen Sie alternativ DateiAlles speichern in der Menüleiste, oder drücken Sie StrgVerschiebungS. Es ist eine bewährte Methode, früh und oft zu speichern.

Hinzufügen von Schaltflächen und Code

Ihre Anwendung verwendet zwei Optionsfelder und eine Schaltfläche. Führen Sie diese Schritte aus, um sie hinzuzufügen. Sie fügen der Schaltfläche auch Visual Basic Code hinzu. Dieser Code bezieht sich auf die Optionsfeldauswahl.

1. Suchen Sie in der Toolbox"RadioButton".

   

2. Fügen Sie der Entwurfsoberfläche zwei RadioButton-Steuerelemente hinzu, indem Sie das RadioButton-Element auswählen und auf die Entwurfsoberfläche ziehen. Verschieben Sie die Schaltflächen, indem Sie sie auswählen und die Pfeiltasten verwenden. Platzieren Sie die Schaltflächen nebeneinander unter dem TextBlock-Steuerelement.

   Screenshot: Formular „Greetings“ mit einem TextBlock-Steuerelement und zwei Optionsfeldern

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

   

4. Ändern Sie im Eigenschaftenfenster für das rechte RadioButton-Steuerelement die Eigenschaft "Name " in "GoodbyeButton".

5. Aktualisieren Sie das Content-Attribut für und auf und im XAML-Code.

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

6. Suchen Sie in der XAML-Ansicht das Markup für HelloButton, und fügen Sie ein IsChecked-Attribut hinzu:

   IsChecked="True"
   

   Das IsChecked-Attribut mit dem Wert "True " bedeutet, dass HelloButton standardmäßig aktiviert ist. Diese Einstellung bedeutet, dass das Optionsfeld immer aktiviert ist – selbst wenn das Programm gestartet wird.

7. Suchen Sie in der Toolbox nach dem Button-Steuerelement. Ziehen Sie dann eine Schaltfläche auf die Entwurfsoberfläche unter den RadioButton-Steuerelementen.

8. Ändern Sie in der XAML-Ansicht den Wert des Inhalts für das Steuerelement "Button" von zu .

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   Ihr Fenster sollte der folgenden Abbildung ähneln.

   Screenshot des Grußformulars mit TextBlock, RadioButtons mit der Bezeichnung "Hello" und "Goodbye" sowie dem Button-Steuerelement mit der Bezeichnung "Display", alle auf dem Formular angeordnet.

9. Doppelklicken Sie auf der Entwurfsoberfläche auf die Schaltfläche Anzeigen .

   MainWindow.xaml.vb wird mit dem Cursor im Ereignis geöffnet.

   Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

10. Fügen Sie den folgenden Code hinzu:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

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. Um zu sehen, wie dieser Prozess funktioniert, führt der erste Schritt absichtlich einen Fehler in das Programm ein.

1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf MainWindow.xaml, und wählen Sie Rename aus. Benennen Sie die Datei in Greetings.xaml-um.

2. Starten Sie den Debugger, indem Sie F5 drücken oder "Debuggen" auswählen, und starten Sie dann das Debuggen.

   Ein Fenster "Unterbrechungsmodus " wird angezeigt, und das Ausgabefenster gibt an, dass eine Ausnahme aufgetreten ist.

   Screenshot des Fensters "Ausnahme nicht behandelt" mit einer Fehlermeldung vom Typ "System.IO.Exception", die lautet: "Ressource 'mainwindow.xaml' konnte nicht gefunden werden".

3. Beenden Sie das Debuggen, indem Sie DebugDebugging beendenauswählen.

   Sie haben "MainWindow.xaml " am Anfang dieses Abschnitts in "Greetings.xaml " umbenannt. Der Code verweist weiterhin auf "MainWindow.xaml " als Start-URI für die Anwendung, sodass das Projekt nicht gestartet werden kann.

4. Öffnen Sie in Projektmappen-Explorer die Datei Application.xaml.

5. Ändern Sie in .

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

   Screenshot: Fensters „Greetings“ mit den Steuerelementen „TextBlock“, „RadioButtons“ und „Button“ und ausgewähltem Optionsfeld „Hello“

7. Wählen Sie "Hello" und die Schaltfläche " Anzeigen " und dann "Verabschieden" und dann die Schaltfläche " Anzeigen " aus. Verwenden Sie das Symbol "Schließen" in der oberen rechten Ecke, um das Debuggen zu beenden.

Weitere Informationen finden Sie unter Compile a WPF Application and Debug WPF.

Debuggen mit Haltepunkten

Sie können den Code beim Debuggen testen, indem Sie einige Haltepunkte hinzufügen.

1. Öffnen Sie Greetings.xaml.vb, und wählen Sie die folgende Zeile aus:

2. Fügen Sie einen Haltepunkt hinzu, indem Sie F9 drücken oder "Debuggen" auswählen und dann den Haltepunkt umschalten.

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

3. Wählen Sie die folgende Zeile aus: .

4. Drücken Sie F9 , um einen Haltepunkt hinzuzufügen, und drücken Sie dann F5 , um mit dem Debuggen zu beginnen.

5. Wählen Sie im Fenster "Begrüßungen " die Schaltfläche " Hello " und dann " Anzeigen" aus.

   Die Linie ist gelb hervorgehoben. Am unteren Rand der IDE werden die Fenster Automatisch, Lokale Variablen und Überwachung auf der linken Seite angedockt. Die Fenster Aufrufliste, Breakpoints, Ausnahmeeinstellungen, Befehl, Direkt und Ausgabe werden auf der rechten Seite angedockt.

   

6. Wählen Sie in der Menüleiste FehlersucheStep Out.

   Die Anwendung wird erneut gestartet. Ein Dialogfeld mit dem Wort "Hello" wird angezeigt.

7. Klicken Sie auf die Schaltfläche "OK ", um das Dialogfeld zu schließen.

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

   Die Linie ist gelb hervorgehoben.

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

10. Schließen Sie das Anwendungsfenster, um das Debuggen zu beenden.

11. Wählen Sie in der Menüleiste FehlersucheAlle Haltepunkte deaktivieren.

Erstellen einer Releaseversion

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

1. Wählen Sie ErstellenLösung bereinigen aus, um Zwischendateien und Ausgabedateien zu löschen, die in früheren Builds erstellt wurden.

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

3. Wählen Sie Bauen SieLösung erstellen.

Herzlichen Glückwunsch zum Abschluss dieses Lernprogramms! Sie finden die EXE-Datei, die Sie erstellt haben, in Ihrer Projektmappe und im Projektverzeichnis (...\HelloWPFApp\bin\Release).

Nächster Schritt

Wechseln Sie zum nächsten Artikel, um zu erfahren, wie Sie eine Windows Forms-App in Visual Studio mit Visual Basic erstellen.

Create a Windows Forms app

Weitere Informationen zu Visual Studio finden Sie unter:

• Tipps zur Produktivität