Lernprogramm: Erstellen einer WPF-Anwendung mit Visual Basic

In diesem Lernprogramm erstellen Sie eine Anwendung mit Visual Basic in der integrierten Entwicklungsumgebung (IDE) von Visual Studio. Ihr Programm verwendet das Windows Presentation Foundation (WPF)-UI-Framework. 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 (User Interface), 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 also bereits Anwendungen mit .NET mithilfe von ASP.NET oder Windows Forms erstellt haben, sollten Sie sich mit der Programmierung vertraut machen. WPF verwendet die Extensible Application Markup Language XAML, um ein deklaratives Modell für die Anwendungsprogrammierung bereitzustellen. Weitere Informationen finden Sie in der Übersicht über WPF .NET.

Voraussetzungen

Sie benötigen Visual Studio, um dieses Lernprogramm abzuschließen. Besuchen Sie die Visual Studio-Downloadseite für eine kostenlose Version.

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 " Neues Projekt erstellen " nach "WPF", und wählen Sie visual Basic in der Dropdownliste "Alle Sprachen " aus. Wählen Sie WPF App (.NET Framework) und dann "Weiter" aus.

   

4. Geben Sie dem Projekt einen Namen, HelloWPFApp, und wählen Sie "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.

Hinweis

Weitere Informationen zu eXtensible Application Markup Language (XAML) finden Sie in der 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 im Projektmappen-Explorer die Datei "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 der Visual Studio-IDE die Registerkarte Toolbox aus. Wenn sie nicht angezeigt wird, wählen Sie Ansicht>Toolbox in der Menüleiste oder STRG+ALT-+X-aus.

4. Erweitern Sie entweder Allgemeine WPF-Steuerelemente, oder geben Sie Text in die 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.

   

   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 Datei>Alles speichern in der Menüleiste, oder drücken Sie Strg+Verschiebung+S. 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 Visual Basic-Code hinzu. Dieser Code bezieht sich auf die Optionsfeldauswahl.

1. Suchen Sie in der Toolbox"RadioButton".

   Screenshot des Toolbox-Fensters mit ausgewähltem RadioButton-Steuerelement in der Liste der allgemeinen WPF-Steuerelemente.

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.

   

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 HelloButton und GoodbyeButton auf "Hello" und "Goodbye" 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 das Schaltflächensteuerelement , und 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 Content="Button" zu Content="Display".

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

   Ihr Fenster sollte der folgenden Abbildung ähneln.

   

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

   MainWindow.xaml.vb wird mit dem Cursor im Button_Click 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

Als Nächstes debuggen Sie 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 im Projektmappen-Explorer mit der rechten Maustaste auf "MainWindow.xaml ", und wählen Sie "Umbenennen" 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.

   

3. Beenden Sie das Debuggen, indem Sie Debug>Debugging 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 im Projektmappen-Explorer die Datei "Application.xaml".

5. Ändern Sie StartupUri="MainWindow.xaml" in StartupUri="Greetings.xaml".

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

   

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 Erstellen einer WPF-Anwendung (WPF) und Debuggen von 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: MessageBox.Show("Hello.")

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: MessageBox.Show("Goodbye.").

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 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, Breakpoints, Ausnahmeeinstellungen, Befehl, Direkt und Ausgabe werden auf der rechten Seite angedockt.

   

6. Wählen Sie in der Menüleiste Fehlersuche>Step Out.

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

7. Wählen Sie die Schaltfläche OK aus, 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 MessageBox.Show("Goodbye.") 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 Fehlersuche>Alle Haltepunkte deaktivieren.

Erstellen einer Releaseversion

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

1. Wählen Sie Erstellen>Lö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 Sie>Lö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ächste Schritte

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

Erstellen einer Windows Forms-App

Verwandte Links

Weitere Informationen zu Visual Studio finden Sie in den folgenden Ressourcen:

• Tipps zur Produktivität