Tutorial: Erstellen einer einfachen Anwendung mit C#

Beim Durcharbeiten dieses Tutorial machen Sie sich mit vielen Tools, Dialogfeldern und Designern vertraut, die Sie für die Entwicklung von Anwendungen in Visual Studio verwenden können. Sie erstellen eine Anwendung „Hello, World“, entwerfen die Benutzeroberfläche, fügen Code hinzu und debuggen Fehler. Gleichzeitig erfahren Sie mehr über das Arbeiten in der integrierten Entwicklungsumgebung (IDE).

Voraussetzungen

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

  • Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.
  • Sie können entweder .NET Framework oder .NET Core für dieses Tutorial verwenden. .NET Core ist das neuere, modernere Framework. Für .NET Core ist mindestens Visual Studio 2019 Version 16.3 erforderlich.

Konfigurieren der IDE

Wenn Sie Visual Studio zum ersten Mal öffnen, werden Sie zur Anmeldung aufgefordert. Dieser Schritt ist für dieses Tutorial nicht unbedingt notwendig. Als Nächstes wird Ihnen möglicherweise ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, Ihre Entwicklungseinstellungen und Farbdesigns festzulegen. Behalten Sie die Standardeinstellungen bei, und klicken Sie auf Visual Studio starten.

Dialogfeld „Einstellungen auswählen“

Wenn sich Visual Studio öffnet, werden Toolfenster, die Menüs, Symbolleisten und der Hauptfensterbereich angezeigt. Mit Schnellstart werden Toolfenster auf der linken und rechten Seite des Anwendungsfensters und die Menüleiste und die Standardsymbolleiste oben angedockt. In der Mitte des Anwendungsfensters befindet sich die Startseite. Wenn Sie eine Projektmappe oder ein Projekt laden, werden Editoren und Designer dort angezeigt, wo sich die Startseite befindet. Wenn Sie eine Anwendung entwickeln, verbringen Sie die meiste Zeit in diesem zentralen Bereich.

Visual Studio 2017-IDE mit übernommenen allgemeinen Einstellungen

Wenn Sie Visual Studio starten, wird zunächst das Startfenster geöffnet. Klicken Sie auf Ohne Code fortfahren, um die Entwicklungsumgebung zu öffnen. Ihnen werden Toolfenster, Menüs und Symbolleisten sowie das Hauptfenster angezeigt. Toolfenster sind links und rechts neben dem Anwendungsfenster angedockt. Das Suchfeld, die Menüleiste und die Standardsymbolleiste befinden sich im oberen Bereich. Wenn Sie eine Projektmappe 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 eines Projekts

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

  1. Erstellen Sie ein neues Projekt. Wählen Sie in der Menüleiste Datei > Neu > Projekt aus.

    Wählen Sie in der Menüleiste „Datei > Neu > Projekt“ aus.

  2. Klicken Sie im Dialogfeld Neues Projekt auf Installiert > Visual C# > Windows-Desktop, und wählen Sie anschließend die Vorlage WPF-App (.NET Framework) aus. Nennen Sie das Projekt HelloWPFApp, und wählen Sie OK aus.

    Vorlage für eine WPF-App im Visual Studio-Dialogfeld „Neues Projekt“

  1. Öffnen Sie Visual Studio.

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

    Fenster „Neues Projekt erstellen“ anzeigen

  3. Suchen Sie im Bildschirm Neues Projekt erstellen nach „WPF“, und wählen Sie dann WPF-App und anschließend Weiter aus.

    Screenshot: Dialogfeld „Neues Projekt erstellen“, in dem „WPF“ im Suchfeld eingegeben und die Projektvorlage „WPF-Anwendung“ hervorgehoben ist

  4. Geben Sie dem Projekt im nächsten Bildschirm den Namen HelloWPFApp, und wählen Sie Erstellen aus.

    Screenshot: Dialogfeld „Neues Projekt konfigurieren“, bei dem im Textfeld „Projektname“ der Text „HelloWPFApp“ eingegeben ist

  5. Im Fenster Zusätzliche Informationen sollte .NET Core 3.1 bereits als Zielframework ausgewählt sein. Falls nicht, wählen Sie .NET Core 3.1 aus. Wählen Sie anschließend Erstellen aus.

    Sicherstellen, dass im Fenster „Zusätzliche Informationen“ .NET Core 3.1 ausgewählt ist

Visual Studio erstellt das „HelloWPFApp“-Projekt und die Projektmappe, woraufhin im Projektmappen-Explorer verschiedene Dateien angezeigt werden. Der WPF-Designer zeigt eine Entwurfsansicht und eine XAML-Ansicht der Datei MainWindow.xaml in einer geteilten Ansicht an. Ziehen Sie den Teiler, um mehr oder weniger der jeweiligen Ansichten anzuzeigen. Sie können auch nur die visuelle Ansicht oder nur die XAML-Ansicht anzeigen.

WPF-Projekt und -Projektmappe in der IDE

Hinweis

Weitere Informationen zu XAML (eXtensible Application Markup Language) finden Sie auf der Seite Übersicht über XAML für WPF.

Nachdem Sie das Projekt erstellt haben, können Sie es anpassen. Wählen Sie dazu im Menü Ansicht die Option Eigenschaftenfenster aus, oder drücken Sie auf F4. Sie können dann die Optionen für Projektelemente, Steuerelemente und andere Elemente in einer Anwendung anzeigen lassen und ändern.

Eigenschaftenfenster

  1. Öffnen Sie Visual Studio.

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

    Screenshot: Startfenster in Visual Studio 2022 mit hervorgehobener Option „Neues Projekt erstellen“

  3. Suchen Sie im Bildschirm Neues Projekt erstellen nach „WPF“, und wählen Sie dann WPF-App und anschließend Weiter aus.

    Screenshot: Dialogfeld „Neues Projekt erstellen“, in dem „WPF“ im Suchfeld eingegeben und die Projektvorlage „WPF-Anwendung“ hervorgehoben ist

  4. Geben Sie dem Projekt im nächsten Bildschirm den Namen HelloWPFApp, und wählen Sie Erstellen aus.

    Screenshot: Dialogfeld „Neues Projekt konfigurieren“, bei dem im Textfeld „Projektname“ der Text „HelloWPFApp“ eingegeben ist

  5. Im Fenster Zusätzliche Informationen sollte .NET 6.0 (LTS) bereits als Zielframework ausgewählt sein. Wählen Sie andernfalls .NET 6.0 (LTS) aus. Wählen Sie anschließend Erstellen aus.

    Screenshot: Fenster „Zusätzliche Informationen“ mit ausgewählter Option „.NET 6.0 (LTS)“ im Feld „Framework“

Visual Studio erstellt das „HelloWPFApp“-Projekt und die Projektmappe, woraufhin im Projektmappen-Explorer verschiedene Dateien angezeigt werden. Der WPF-Designer zeigt eine Entwurfsansicht und eine XAML-Ansicht der Datei MainWindow.xaml in einer geteilten Ansicht an. Ziehen Sie den Teiler, um mehr oder weniger der jeweiligen Ansichten anzuzeigen. Sie können auch nur die visuelle Ansicht oder nur die XAML-Ansicht anzeigen.

Screenshot: HelloWPFApp-Projekt und Projektmappe in der Visual Studio-IDE mit geöffnetem Projektmappen-Explorer und der XAML- und Designeransicht von „MainWindow.xaml“ im WPF-Designer

Hinweis

Weitere Informationen zu XAML (eXtensible Application Markup Language) finden Sie auf der Seite Übersicht über XAML für WPF.

Nachdem Sie das Projekt erstellt haben, können Sie es anpassen. Wählen Sie dazu im Menü Ansicht die Option Eigenschaftenfenster aus, oder drücken Sie auf F4. Sie können dann die Optionen für Projektelemente, Steuerelemente und andere Elemente in einer Anwendung anzeigen lassen und ändern.

Screenshot: Eigenschaftenfenster mit dem Abschnitt „Verschiedenes“ der Projektmappeneigenschaften für das HelloWPFApp-Projekt

Ändern des Namens der Datei „MainWindow.xaml“

Geben Sie „MainWindow“ einen genaueren Namen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf MainWindow.xaml, und wählen Sie dann Umbenennen aus. Benennen Sie die Datei in Greetings.xaml um.

Entwerfen der Benutzeroberfläche (UI)

Wenn der Designer nicht geöffnet ist, wählen Sie die Datei Greetings.xaml aus, und drücken Sie UMSCHALT+F7, um den Designer zu öffnen.

Nun fügen wir der Anwendung drei Arten von Steuerelementen hinzu: ein TextBlock-Steuerelement, zwei RadioButton-Steuerelemente und ein Button-Steuerelement.

Hinzufügen eines TextBlock-Steuerelements

  1. Drücken Sie STRG+Q, um das Suchfeld zu aktivieren, und geben Sie dort den Begriff Toolbox ein. Wählen Sie in der Ergebnisliste Ansicht > Toolbox aus.

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

    Toolbox mit hervorgehobenem TextBlock-Steuerelement

  3. Fügen Sie auf der Entwurfsoberfläche ein TextBlock-Steuerelement hinzu, indem Sie das TextBlock-Element auswählen und in das Fenster auf der Entwurfsoberfläche ziehen. Zentrieren Sie das Steuerelement im oberen Bereich des Fensters. Ab Visual Studio 2019 können Sie das Steuerelement an den roten Hilfslinien ausrichten.

    Das Fenster sollte der folgenden Abbildung entsprechen:

    TextBlock-Steuerelement im Formular „Greetings“

    Das XAML-Markup sollte in etwa dem folgenden Beispiel entsprechen:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    
  1. Drücken Sie STRG+Q, um das Suchfeld zu aktivieren, und geben Sie dort den Begriff Toolbox ein. Wählen Sie in der Ergebnisliste Ansicht > Toolbox aus.

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

    Screenshot: Fenster „Toolbox“ mit Auswahl des TextBlock-Steuerelements in der Liste häufig verwendeter WPF-Steuerelemente

  3. Fügen Sie auf der Entwurfsoberfläche ein TextBlock-Steuerelement hinzu, indem Sie das TextBlock-Element auswählen und in das Fenster auf der Entwurfsoberfläche ziehen. Zentrieren Sie das Steuerelement im oberen Bereich des Fensters. Sie können das Steuerelement anhand der Führungslinien zentrieren.

    Das Fenster sollte der folgenden Abbildung entsprechen:

    Screenshot: TextBlock-Steuerelement auf der Entwurfsoberfläche. Es werden Führungslinien für die Positionierung und Größenänderung des Steuerelements angezeigt.

    Das XAML-Markup sollte in etwa dem folgenden Beispiel entsprechen:

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

Anpassen des Texts im Textblock

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

    Das XAML-Markup sollte in etwa dem folgenden Beispiel entsprechen:

    <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 TextBlock ggf. erneut, und speichern Sie Ihre Änderungen mit STRG+S oder mit dem Menüelement Datei.

Anschließend fügen Sie dem Formular zwei RadioButton-Steuerelemente hinzu.

Hinzufügen von Optionsfeldern

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

    Toolboxfenster mit aktiviertem RadioButton-Steuerelement

  2. Fügen Sie auf der Entwurfsoberfläche zwei Optionsfeld-Steuerelemente hinzu, indem Sie auf das Optionsfeld-Element klicken und in das Fenster auf der Entwurfsoberfläche ziehen. Verschieben Sie die Schaltflächen (indem Sie darauf klicken und die Pfeiltasten drücken), sodass sie nebeneinander unter dem TextBlock-Steuerelement erscheinen. Richten Sie die Steuerelemente an den roten Hilfslinien aus.

    Das Fenster sieht wie folgt aus:

    Formular „Greetings“ mit TextBlock und zwei Optionsfeldern

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

    Eigenschaftenfenster „RadioButton“

  4. Ändern Sie im Fenster Eigenschaften zum rechten RadioButton-Steuerelement die Eigenschaft Name in GoodbyeButton. Speichern Sie dann die Änderungen.

Als nächstes können Sie jetzt Anzeigetext für jedes RadioButton-Steuerelement hinzufügen. Die folgende Prozedur aktualisiert die Eigenschaft Inhalt für ein RadioButton-Steuerelement.

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

    Screenshot: Fenster „Toolbox“ mit Auswahl des RadioButton-Steuerelements in der Liste häufig verwendeter WPF-Steuerelemente

  2. Fügen Sie auf der Entwurfsoberfläche zwei Optionsfeld-Steuerelemente hinzu, indem Sie auf das Optionsfeld-Element klicken und in das Fenster auf der Entwurfsoberfläche ziehen. Verschieben Sie die Schaltflächen (indem Sie darauf klicken und die Pfeiltasten drücken), sodass sie nebeneinander unter dem TextBlock-Steuerelement erscheinen. Sie können die Steuerelemente anhand der Führungslinien ausrichten.

    Das Fenster sieht wie folgt aus:

    Screenshot: Entwurfsfenster für „Greetings.xaml“ mit einem TextBlock-Steuerelement und zwei RadioButton-Steuerelementen, die auf der Entwurfsoberfläche positioniert sind

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

    Screenshot: Eigenschaftenfenster für ein RadioButton-Steuerelement. Der Wert der Eigenschaft „Name“ wurde in „HelloButton“ geändert.

  4. Ändern Sie im Fenster Eigenschaften zum rechten RadioButton-Steuerelement die Eigenschaft Name in GoodbyeButton. Speichern Sie dann die Änderungen.

Als nächstes können Sie jetzt Anzeigetext für jedes RadioButton-Steuerelement hinzufügen. Die folgende Prozedur aktualisiert die Eigenschaft Inhalt für ein RadioButton-Steuerelement.

Hinzufügen von Anzeigetext für jedes Optionsfeld

  1. Ändern Sie das Content-Attribut im XAML-Code von HelloButton und GoodbyeButton in "Hello" und "Goodbye". Das XAML-Markup sollte in etwa wie im folgenden 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 setzen Sie es auf True. Fügen Sie insbesondere IsChecked="True" hinzu.

    Das XAML-Markup sollte in etwa wie im folgenden 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>
    

Das letzte Benutzeroberflächenelement, das Sie hinzufügen, ist ein Button-Steuerelement.

Hinzufügen des Button-Steuerelements

  1. Suchen Sie in der Toolbox nach dem Schaltflächen-Steuerelement, und fügen Sie es auf der Entwurfsoberfläche dem Optionsfeld-Steuerelement hinzu, indem Sie es in der Entwurfsansicht in das Formular ziehen. Wenn Sie Visual Studio 2019 oder höher verwenden, hilft Ihnen eine rote Linie beim Zentrieren des Steuerelements.

  2. Ändern Sie in der XAML-Ansicht den Wert von Inhalt für das Schaltflächen-Steuerelement von Content="Button" in Content="Display". Speichern Sie dann die Änderungen.

    Das Fenster sollte der folgenden Abbildung entsprechen.

    Formular „Greetings“ mit Steuerelementbezeichnungen

    Das XAML-Markup sollte in etwa wie im folgenden 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>
    
  1. Suchen Sie in der Toolbox nach dem Schaltflächen-Steuerelement, und fügen Sie es auf der Entwurfsoberfläche dem Optionsfeld-Steuerelement hinzu, indem Sie es in der Entwurfsansicht in das Formular ziehen. Die Führungslinien können Sie beim Zentrieren des Steuerelements unterstützen.

  2. Ändern Sie in der XAML-Ansicht den Wert von Inhalt für das Schaltflächen-Steuerelement von Content="Button" in Content="Display". Speichern Sie dann die Änderungen.

    Das Fenster sollte dem folgenden Screenshot entsprechen.

    Screenshot: Entwurfsfenster für „Greetings.xaml“ mit einem TextBlock-Steuerelement, zwei RadioButton-Steuerelementen mit den Bezeichnungen „Hello“ und „Goodbye“ sowie eine Schaltfläche mit der Bezeichnung „Display“

    Das XAML-Markup sollte in etwa wie im folgenden 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 Benutzer zunächst ein Optionsfeld aktiviert und anschließend die Schaltfläche Anzeigen ausgewählt hat. Ein Meldungsfeld wird für die Begrüßung ("Hello") und ein anderes für die Verabschiedung ("Goodbye") angezeigt. Um dieses Verhalten zu erstellen, fügen Sie Code zum Button_Click-Ereignis in Greetings.xaml.cs hinzu.

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

    Greetings.xaml.cs wird geöffnet, der Cursor steht im Button_Click-Ereignis.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    
    }
    
  2. Geben Sie den folgenden Code ein:

    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. Speichern Sie die Anwendung.

Wenn die Anwendung ausgeführt wird, wird ein Meldungsfeld angezeigt, nachdem ein Benutzer zunächst ein Optionsfeld aktiviert und anschließend die Schaltfläche Anzeigen ausgewählt hat. Ein Meldungsfeld wird für die Begrüßung ("Hello") und ein anderes für die Verabschiedung ("Goodbye") angezeigt. Um dieses Verhalten zu erstellen, fügen Sie Code zum Button_Click-Ereignis in Greetings.xaml.cs hinzu.

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

    Greetings.xaml.cs wird geöffnet, der Cursor steht im Button_Click-Ereignis.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    
    }
    
  2. Geben Sie den folgenden Code ein:

    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

Als Nächstes debuggen Sie die Anwendung, um nach Fehlern zu suchen und zu testen, ob beide Meldungsfelder ordnungsgemäß angezeigt werden. Die folgenden Anweisungen beschreiben, wie Sie den Debugger erstellen und starten. Lesen Sie jedoch später für weitere Informationen Erstellen einer WPF-Anwendung (WPF) und Debuggen von WPF.

Suchen und Beheben von Fehlern

In diesem Schritt suchen Sie den Fehler, den Sie zuvor verursacht haben, indem Sie den Namen der Datei MainWindow.xaml geändert haben.

Starten des Debuggings und Suchen des Fehlers

  1. Starten Sie den Debugger, indem Sie F5 drücken oder Debuggen auswählen und anschließend Debugging starten auswählen.

    Ein Haltemodus-Fenster wird angezeigt, und das Ausgabe-Fenster gibt an, dass eine IOException-Klasse aufgetreten ist: Cannot locate resource 'mainwindow.xaml' (Die Ressource „mainwindow.xaml“ kann nicht gefunden werden).

    IOException-Meldung

  2. Beenden Sie den Debugger, indem Sie auf Debuggen>Debuggen beenden klicken.

Zu Beginn dieses Tutorials wurde MainWindow.xaml in Greetings.xaml umbenannt. Da der Code jedoch weiterhin auf MainWindow.xaml als Start-URI für die Anwendung verweist, kann das Projekt nicht gestartet werden.

  1. Starten Sie den Debugger, indem Sie F5 drücken oder Debuggen auswählen und anschließend Debugging starten auswählen.

    Ein Haltemodus-Fenster wird angezeigt, und das Ausgabe-Fenster gibt an, dass eine IOException-Klasse aufgetreten ist: Cannot locate resource 'mainwindow.xaml' (Die Ressource „mainwindow.xaml“ kann nicht gefunden werden).

    Screenshot: Ausgabefenster mit einer System.IO.IOException mit der Meldung „Die Ressource ‘mainwindow.xaml’ wurde nicht gefunden“

  2. Beenden Sie den Debugger, indem Sie auf Debuggen>Debuggen beenden klicken.

Zu Beginn dieses Tutorials wurde MainWindow.xaml in Greetings.xaml umbenannt. Da der Code jedoch weiterhin auf MainWindow.xaml als Start-URI für die Anwendung verweist, kann das Projekt nicht gestartet werden.

Angeben von „Greetings.xaml“ als Start-URI

  1. Öffnen Sie im Projektmappen-Explorer die Datei App.xaml.

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

Durch einen optionalen Schritt vermeiden Sie Verwechslungen, indem Sie den Titel Ihres Anwendungsfensters in diesen neuen Namen ändern.

  1. Öffnen Sie im Projektmappen-Explorer die Datei Greetings.xaml, 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 auf F5). Jetzt sollte das Greetings-Fenster der Anwendung angezeigt werden.

Screenshot der ausgeführten App

Screenshot der ausgeführten App

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

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

Debuggen mit Haltepunkten

Wenn Sie einige Haltepunkte hinzufügen, können Sie den Code während des Debuggens testen. 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 die folgende Zeile aus: MessageBox.Show("Hello.")

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

    Am äußeren linken Rand des Editorfensters wird ein roter Kreis neben der Codezeile angezeigt.

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

  4. Drücken Sie die Taste F9, um einen Haltepunkt hinzuzufügen, und drücken Sie anschließend F5, um das Debuggen zu starten.

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

    Die Zeile wird MessageBox.Show("Hello.") gelb hervorgehoben. Am unteren Rand der IDE werden die Fenster „Auto“, „Lokal“ und „Überwachen“ auf der linken Seite zusammen angedockt, und die Fenster „Aufrufliste“, „Haltepunkte", „Ausnahmeeinstellungen“, „Befehl“, „Direkt“ und „Ausgabe“ werden auf der rechten Seite zusammen angedockt.

    Erreichen eines Breakpoints im Debugger

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

    Die Anwendung wird weiter ausgeführt, und ein Meldungsfeld mit dem Wort „Hello“ wird angezeigt.

  7. Wählen Sie die Schaltfläche OK im Meldungsfeld, 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 Zeile wird MessageBox.Show("Goodbye.") gelb hervorgehoben.

  9. Drücken Sie die Taste F5, um das Debuggen fortzusetzen. Wenn das Meldungsfeld angezeigt wird, wählen Sie die Schaltfläche OK im Meldungsfeld, um es zu schließen.

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

  11. Klicken Sie in der Menüleiste auf Debuggen > Alle Haltepunkte deaktivieren.

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

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

    Am äußeren linken Rand des Editorfensters wird ein roter Kreis neben der Codezeile angezeigt.

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

  4. Drücken Sie die Taste F9, um einen Haltepunkt hinzuzufügen, und drücken Sie anschließend F5, um das Debuggen zu starten.

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

    Die Zeile wird MessageBox.Show("Hello.") gelb hervorgehoben. Am unteren Rand der IDE werden die Fenster „Auto“, „Lokal“ und „Überwachen“ auf der linken Seite zusammen angedockt, und die Fenster „Aufrufliste“, „Haltepunkte", „Ausnahmeeinstellungen“, „Befehl“, „Direkt“ und „Ausgabe“ werden auf der rechten Seite zusammen angedockt.

    Screenshot: Debugsitzung in Visual Studio. Das Codefenster für „Greetings.xaml.cs“ zeigt, dass die Ausführung an einem Haltepunkt beendet wurde. Eine Zeile ist gelb hervorgehoben.

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

    Die Anwendung wird weiter ausgeführt, und ein Meldungsfeld mit dem Wort „Hello“ wird angezeigt.

  7. Wählen Sie die Schaltfläche OK im Meldungsfeld, 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 Zeile wird MessageBox.Show("Goodbye.") gelb hervorgehoben.

  9. Drücken Sie die Taste F5, um das Debuggen fortzusetzen. Wenn das Meldungsfeld angezeigt wird, wählen Sie die Schaltfläche OK im Meldungsfeld, um es zu schließen.

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

  11. Klicken Sie in der Menüleiste Debuggen auf Alle Haltepunkte deaktivieren.

Anzeigen einer Darstellung der Benutzeroberflächenelemente

In der ausgeführten App sollte ein Widget angezeigt werden, das am oberen Rand des Fensters angezeigt wird. Dieses Widget ist eine Runtimehilfsfunktion, die schnellen Zugriff auf einige hilfreiche Debugfeatures bereitstellt. Klicken Sie auf die erste Schaltfläche, Zur visuellen Echtzeitstruktur wechseln. Daraufhin sollte ein Fenster mit einer Struktur angezeigt werden, die alle visuelle Elemente Ihrer Seite enthält. Erweitern Sie die Knoten, um die hinzugefügten Schaltflächen zu finden.

Screenshot: Fenster mit visueller Echtzeitstruktur

Screenshot: Fenster „Visuelle Livestruktur“ mit der Struktur visueller Elemente in „HelloWPFApp.exe“ während der Ausführung

Version der Anwendung erstellen

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

  1. Wählen Sie im Hauptmenü Erstellen > Projektmappe bereinigen aus, um Zwischendateien und Ausgabedateien zu löschen, die bei vorherigen Builds erstellt wurden. Dieser Schritt ist nicht erforderlich, bereinigt jedoch die Ausgaben des Builddebugvorgangs.

  2. Ändern Sie die Build-Konfiguration für HelloWPFApp über das Dropdown-Steuerelement in der Symbolleiste (derzeit „Debug“) von Debug in Release.

  3. Erstellen Sie die Projektmappe, indem Sie auf Erstellen > Projektmappe erstellen klicken.

Damit haben Sie das Tutorial erfolgreich abgeschlossen. Sie finden die EXE-Datei, die Sie erstellt haben, in Ihrer Projektmappe und im Projektverzeichnis ( ...\HelloWPFApp\HelloWPFApp\bin\Release).

Nächste Schritte

Damit haben Sie das Tutorial erfolgreich abgeschlossen. Wenn Sie weitere Informationen erhalten möchten, fahren Sie mit den folgenden Tutorials fort.

Siehe auch