Tutorial: Erstellen einer einfachen Anwendung mit C#Tutorial: Create a simple application with 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.By completing this tutorial, you'll become familiar with many of the tools, dialog boxes, and designers that you can use when you develop applications with Visual Studio. 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).You'll create a "Hello, World" application, design the UI, add code, and debug errors, while you learn about working in the integrated development environment (IDE).

VoraussetzungenPrerequisites

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

  • Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.
  • Sie können entweder .NET Framework oder .NET Core für dieses Tutorial verwenden.You can use either .NET Framework or .NET Core for this tutorial. .NET Core ist das neuere, modernere Framework..NET Core is the newer, more modern framework. Für .NET Core ist mindestens Visual Studio 2019 Version 16.3 erforderlich..NET Core requires Visual Studio 2019 version 16.3 or later.

Konfigurieren der IDEConfigure the IDE

Wenn Sie Visual Studio zum ersten Mal öffnen, werden Sie zur Anmeldung aufgefordert.When you open Visual Studio for the first time, you'll be prompted to sign in. Dieser Schritt ist für dieses Tutorial nicht unbedingt notwendig.This step is optional for this tutorial. Als Nächstes wird Ihnen möglicherweise ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, Ihre Entwicklungseinstellungen und Farbdesigns festzulegen.Next you may be shown a dialog box that asks you to choose your development settings and color theme. Behalten Sie die Standardeinstellungen bei, und klicken Sie auf Visual Studio starten.Keep the defaults and choose Start Visual Studio.

Dialogfeld „Einstellungen auswählen“

Wenn sich Visual Studio öffnet, werden Toolfenster, die Menüs, Symbolleisten und der Hauptfensterbereich angezeigt.After Visual Studio launches, you'll see tool windows, the menus and toolbars, and the main window space. Mit Schnellstartwerden Toolfenster auf der linken und rechten Seite des Anwendungsfensters und die Menüleiste und die Standardsymbolleiste oben angedockt.Tool windows are docked on the left and right sides of the application window, with Quick Launch, the menu bar, and the standard toolbar at the top. In der Mitte des Anwendungsfensters befindet sich die Startseite.In the center of the application window is the Start Page. Wenn Sie eine Projektmappe oder ein Projekt laden, werden Editoren und Designer dort angezeigt, wo sich die Startseite befindet.When you load a solution or project, editors and designers appear in the space where the Start Page is. Wenn Sie eine Anwendung entwickeln, verbringen Sie die meiste Zeit in diesem zentralen Bereich.When you develop an application, you'll spend most of your time in this central area.

Visual Studio 2017-IDE mit übernommenen allgemeinen EinstellungenVisual Studio 2017 IDE with General Settings applied

Wenn Sie Visual Studio starten, wird zunächst das Startfenster geöffnet.When you launch Visual Studio, the start window opens first. Klicken Sie auf Ohne Code fortfahren, um die Entwicklungsumgebung zu öffnen.Select Continue without code to open the development environment. Ihnen werden Toolfenster, Menüs und Symbolleisten sowie das Hauptfenster angezeigt.You'll see tool windows, the menus and toolbars, and the main window space. Toolfenster werden auf der linken und rechten Seite des Anwendungsfensters angedockt und enthalten oben ein Suchfeld, die Menüleiste und die Standardsymbolleiste.Tool windows are docked on the left and right sides of the application window, with a search box, the menu bar, and the standard toolbar at the top. Wenn Sie eine Projektmappe oder ein Projekt laden, werden Editoren und Designer im zentralen Bereich des Anwendungsfensters angezeigt.When you load a solution or project, editors and designers appear in the central space of the application window. Wenn Sie eine Anwendung entwickeln, verbringen Sie die meiste Zeit in diesem zentralen Bereich.When you develop an application, you'll spend most of your time in this central area.

Erstellen eines ProjektsCreate the project

Wenn Sie eine Anwendung in Visual Studio erstellen, erstellen Sie zunächst ein Projekt und eine Projektmappe.When you create an application in Visual Studio, you first create a project and a solution. In diesem Beispiel erstellen Sie eine Windows Presentation Foundations-Projektmappe (WPF).For this example, you'll create a Windows Presentation Foundation (WPF) project.

  1. Erstellen Sie ein neues Projekt.Create a new project. Wählen Sie in der Menüleiste Datei > Neu > Projekt aus.On the menu bar, select File > New > Project.

    Wählen Sie in der Menüleiste „Datei > Neu > Projekt“ aus.On the menu bar, choose File, New, Project

  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.In the New Project dialog, select the Installed > Visual C# > Windows Desktop category, and then select the WPF App (.NET Framework) template. Nennen Sie das Projekt HelloWPFApp, und wählen Sie OK aus.Name the project HelloWPFApp, and select OK.

    Vorlage für eine WPF-App im Visual Studio-Dialogfeld „Neues Projekt“WPF app template in Visual Studio New Project dialog

  1. Öffnen Sie Visual Studio 2019.Open Visual Studio 2019.

  2. Wählen Sie im Startfenster Neues Projekt erstellen aus.On the start window, choose Create new project.

    Fenster „Neues Projekt erstellen“ anzeigenView the 'Create a new project' window

  3. Suchen Sie in der Anzeige Neues Projekt erstellen nach „WPF“, und wählen Sie dann WPF-App (.NET Core) und anschließend Weiter aus.On the Create a new project screen, search for "WPF," choose WPF App (.NET Core), and then choose Next.

    Vorlage für eine WPF-App im Dialogfeld „Neues Projekt erstellen“WPF app template in 'Create a new project' dialog

    Hinweis

    Möglicherweise finden Sie zwei WPF-Desktopvorlagen, eine für .NET Framework und eine weitere für .NET Core.You might find two WPF desktop templates, one for .NET Framework and another for .NET Core. Die .NET Core ist ab Visual Studio 2019 Version 16.3 verfügbar.The .NET Core template is available in Visual Studio 2019 version 16.3 and later. Sie können eine beliebige Vorlage für dieses Tutorial verwenden, es wird jedoch empfohlen, .NET Core für neue Entwicklungen zu verwenden.You can use either one for this tutorial, but we recommend .NET Core for new development.

  4. Geben Sie dem Projekt auf dem nächsten Bildschirm den Namen HelloWPFApp, und wählen Sie Erstellen aus.At the next screen, give the project a name, HelloWPFApp, and choose Create.

    Projekt „HelloWPFApp“ nennenName your project 'HelloWPFApp'

Visual Studio erstellt das „HelloWPFApp“-Projekt und die Projektmappe, woraufhin im Projektmappen-Explorer verschiedene Dateien angezeigt werden.Visual Studio creates the HelloWPFApp project and solution, and Solution Explorer shows the various files. Der WPF-Designer zeigt eine Entwurfsansicht und eine XAML-Ansicht der Datei MainWindow.xaml in einer geteilten Ansicht an.The WPF Designer shows a design view and a XAML view of MainWindow.xaml in a split view. Ziehen Sie den Teiler, um mehr oder weniger der jeweiligen Ansichten anzuzeigen.You can slide the splitter to show more or less of either view. Sie können auch nur die visuelle Ansicht oder nur die XAML-Ansicht anzeigen.You can choose to see only the visual view or only the XAML view.

WPF-Projekt und -Projektmappe in der IDEWPF project and solution in the IDE

Hinweis

Weitere Informationen zu XAML (eXtensible Application Markup Language) finden Sie auf der Seite Übersicht über XAML für WPF.For more information about XAML (eXtensible Application Markup Language), see the XAML overview for WPF page.

Nachdem Sie das Projekt erstellt haben, können Sie es anpassen.After you create the project, you can customize it. Wählen Sie dazu im Menü Ansicht die Option Eigenschaftenfenster aus, oder drücken Sie auf F4.To do so, choose Properties Window from the View menu, or press F4. Sie können dann die Optionen für Projektelemente, Steuerelemente und andere Elemente in einer Anwendung anzeigen lassen und ändern.Then, you can display and change options for project items, controls, and other items in an application.

EigenschaftenfensterProperties window

Ändern des Namens der Datei „MainWindow.xaml“Change the name of MainWindow.xaml

Geben Sie „MainWindow“ einen genaueren Namen.Let's give MainWindow a more specific name. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf MainWindow.xaml, und wählen Sie dann Umbenennen aus.In Solution Explorer, right-click on MainWindow.xaml and choose Rename. Benennen Sie die Datei in Greetings.xaml um.Rename the file to Greetings.xaml.

Entwerfen der Benutzeroberfläche (UI)Design the user interface (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.If the designer is not open, select Greetings.xaml and press Shift+F7 to open the designer.

Nun fügen wir der Anwendung drei Arten von Steuerelementen hinzu: ein TextBlock-Steuerelement, zwei RadioButton-Steuerelemente und ein Button-Steuerelement.We'll add three types of controls to this application: a TextBlock control, two RadioButton controls, and a Button control.

Hinzufügen eines TextBlock-SteuerelementsAdd a TextBlock control

  1. Drücken Sie STRG+Q, um das Suchfeld zu aktivieren, und geben Sie dort den Begriff Toolbox ein.Press Ctrl+Q to activate the search box and type Toolbox. Wählen Sie in der Ergebnisliste Ansicht > Toolbox aus.Choose View > Toolbox from the results list.

  2. Erweitern Sie in der Toolbox den Knoten Häufig verwendete WPF-Steuerelemente, damit das TextBlock-Steuerelement angezeigt wird.In the Toolbox, expand the Common WPF Controls node to see the TextBlock control.

    Toolbox mit hervorgehobenem TextBlock-SteuerelementToolbox with the TextBlock control highlighted

  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.Add a TextBlock control to the design surface by choosing the TextBlock item and dragging it to the window on the design surface. Zentrieren Sie das Steuerelement im oberen Bereich des Fensters.Center the control near the top of the window. Ab Visual Studio 2019 können Sie das Steuerelement an den roten Hilfslinien ausrichten.In Visual Studio 2019 and later, you can use the red guidelines to center the control.

    Das Fenster sollte der folgenden Abbildung entsprechen:Your window should resemble the following illustration:

    TextBlock-Steuerelement im Formular „Greetings“TextBlock control on the Greetings form

    Das XAML-Markup sollte in etwa dem folgenden Beispiel entsprechen:The XAML markup should look something like the following example:

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

Anpassen des Texts im TextblockCustomize the text in the text block

  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..In the XAML view, locate the markup for TextBlock and change the Text attribute from TextBox to Select a message option and then choose the Display button.

    Das XAML-Markup sollte in etwa dem folgenden Beispiel entsprechen:The XAML markup should look something like the following example:

    <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.Center the TextBlock again if you like, and then save your changes by pressing Ctrl+S or using the File menu item.

Anschließend fügen Sie dem Formular zwei RadioButton-Steuerelemente hinzu.Next, you'll add two RadioButton controls to the form.

Hinzufügen von OptionsfeldernAdd radio buttons

  1. Suchen Sie in der Toolbox nach dem Optionsfeld-Steuerelement.In the Toolbox, find the RadioButton control.

    Toolboxfenster mit aktiviertem RadioButton-SteuerelementToolbox window with RadioButton control selected

  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.Add two RadioButton controls to the design surface by choosing the RadioButton item and dragging it to the window on the design surface. Verschieben Sie die Schaltflächen (indem Sie darauf klicken und die Pfeiltasten drücken), sodass sie nebeneinander unter dem TextBlock-Steuerelement erscheinen.Move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control. Richten Sie die Steuerelemente an den roten Hilfslinien aus.Use the red guidelines to align the controls.

    Das Fenster sieht wie folgt aus:Your window should look like this:

    Formular „Greetings“ mit TextBlock und zwei OptionsfeldernGreetings form with TextBlock and two radio buttons

  3. Ändern Sie im Fenster Eigenschaften für das linke RadioButton-Steuerelement die Eigenschaft Name (die Eigenschaft oben im Fenster Eigenschaften ) in HelloButton.In the Properties window for the left RadioButton control, change the Name property (the property at the top of the Properties window) to HelloButton.

    Eigenschaftenfenster „RadioButton“RadioButton properties window

  4. Ändern Sie im Fenster Eigenschaften zum rechten RadioButton-Steuerelement die Eigenschaft Name in GoodbyeButton. Speichern Sie dann die Änderungen.In the Properties window for the right RadioButton control, change the Name property to GoodbyeButton, and then save your changes.

Als nächstes können Sie jetzt Anzeigetext für jedes RadioButton-Steuerelement hinzufügen.Next, you'll add display text for each RadioButton control. Die folgende Prozedur aktualisiert die Eigenschaft Inhalt für ein RadioButton-Steuerelement.The following procedure updates the Content property for a RadioButton control.

Hinzufügen von Anzeigetext für jedes OptionsfeldAdd display text for each radio button

  1. Ändern Sie das Content-Attribut im XAML-Code von HelloButton und GoodbyeButton in "Hello" und "Goodbye".Update the Content attribute for the HelloButton and GoodbyeButton to "Hello" and "Goodbye" in the XAML. Das XAML-Markup sollte in etwa wie im folgenden Beispiel aussehen:The XAML markup should now look similar to the following example:

    <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 OptionsfeldsSet a radio button to be checked by default

In diesem Schritt legen Sie fest, dass „HelloButton“ standardmäßig aktiviert wird, sodass eines der beiden Optionsfelder immer aktiviert ist.In this step, we'll set HelloButton to be checked by default so that one of the two radio buttons is always selected.

  1. Suchen Sie in der XAML-Ansicht das Markup für „HelloButton“.In the XAML view, locate the markup for HelloButton.

  2. Fügen Sie ein IsChecked-Attribut hinzu und setzen Sie es auf True.Add an IsChecked attribute and set it to True. Fügen Sie insbesondere IsChecked="True" hinzu.Specifically, add IsChecked="True".

    Das XAML-Markup sollte in etwa wie im folgenden Beispiel aussehen:The XAML markup should now look similar to the following example:

    <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.The final UI element that you'll add is a Button control.

Hinzufügen des Button-SteuerelementsAdd the button control

  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.In the Toolbox, find the Button control, and then add it to the design surface under the RadioButton controls by dragging it to the form in the design view. Wenn Sie Visual Studio 2019 oder höher verwenden, hilft Ihnen eine rote Linie beim Zentrieren des Steuerelements.If you're using Visual Studio 2019 or later, a red line helps you center the control.

  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.In the XAML view, change the value of Content for the Button control from Content="Button" to Content="Display", and then save the changes.

    Das Fenster sollte der folgenden Abbildung entsprechen.Your window should resemble the following illustration.

    Formular „Greetings“ mit SteuerelementbezeichnungenGreetings form with control labels

    Das XAML-Markup sollte in etwa wie im folgenden Beispiel aussehen:The XAML markup should now look similar to the following example:

    <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ächeAdd code to the display button

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.When this application runs, a message box appears after a user chooses a radio button and then chooses the Display button. Ein Meldungsfeld wird für die Begrüßung ("Hello") und ein anderes für die Verabschiedung ("Goodbye") angezeigt.One message box will appear for Hello, and another will appear for Goodbye. Um dieses Verhalten zu erstellen, fügen Sie Code zum Button_Click-Ereignis in Greetings.xaml.cs hinzu.To create this behavior, you'll add code to the Button_Click event in Greetings.xaml.cs.

  1. Doppelklicken Sie auf der Entwurfsoberfläche auf die Schaltfläche Anzeigen .On the design surface, double-click the Display button.

    Greetings.xaml.cs wird geöffnet, der Cursor steht im Button_Click-Ereignis.Greetings.xaml.cs opens, with the cursor in the Button_Click event.

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

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

Debuggen und Testen der AnwendungDebug and test the application

Als Nächstes debuggen Sie die Anwendung, um nach Fehlern zu suchen und zu testen, ob beide Meldungsfelder ordnungsgemäß angezeigt werden.Next, you'll debug the application to look for errors and test that both message boxes appear correctly. 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.The following instructions tell you how to build and launch the debugger, but later you might read Build a WPF application (WPF) and Debug WPF for more information.

Suchen und Beheben von FehlernFind and fix errors

In diesem Schritt suchen Sie den Fehler, den Sie zuvor verursacht haben, indem Sie den Namen der Datei MainWindow.xaml geändert haben.In this step, you'll find the error that we caused earlier by changing the name of the MainWindow.xaml file.

Starten des Debuggings und Suchen des FehlersStart debugging and find the error

  1. Starten Sie den Debugger, indem Sie F5 drücken oder Debuggen auswählen und anschließend Debugging starten auswählen.Start the debugger by pressing F5 or selecting Debug, then Start Debugging.

    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).A Break Mode window appears, and the Output window indicates that an IOException has occurred: Cannot locate resource 'mainwindow.xaml'.

    IOException-MeldungIOException message

  2. Beenden Sie den Debugger, indem Sie Debuggen > Debuggen beenden auswählen.Stop the debugger by choosing Debug > Stop Debugging.

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.We renamed MainWindow.xaml to Greetings.xaml at the start of this tutorial, but the code still refers to MainWindow.xaml as the startup URI for the application, so the project can't start.

Angeben von „Greetings.xaml“ als Start-URISpecify Greetings.xaml as the startup URI

  1. Öffnen Sie im Projektmappen-Explorerdie Datei App.xaml.In Solution Explorer, open the App.xaml file.

  2. Ändern Sie StartupUri="MainWindow.xaml" zu StartupUri="Greetings.xaml", und speichern Sie dann die Änderungen.Change StartupUri="MainWindow.xaml" to StartupUri="Greetings.xaml", and then save the changes.

Starten Sie den Debugger erneut (drücken Sie auf F5).Start the debugger again (press F5). Sie sollten das Greetings-Fenster der Anwendung sehen.You should see the Greetings window of the application.

Screenshot der ausgeführten App

Screenshot der ausgeführten App

Schließen Sie nun das Anwendungsfenster, um das Debuggen zu beenden.Now close the application window to stop debugging.

Debuggen mit HaltepunktenDebug with breakpoints

Wenn Sie einige Haltepunkte hinzufügen, können Sie den Code während des Debuggens testen.You can test the code during debugging by adding some breakpoints. 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.You can add breakpoints by choosing Debug > Toggle Breakpoint, by clicking in the left margin of the editor next to the line of code where you want the break to occur, or by pressing F9.

Hinzufügen von HaltepunktenAdd breakpoints

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

  2. Fügen Sie einen Haltepunkt hinzu, indem Sie im Menü Debuggenund dann Haltepunkt umschaltenauswählen.Add a breakpoint from the menu by selecting Debug, then Toggle Breakpoint.

    Am äußeren linken Rand des Editorfensters wird ein roter Kreis neben der Codezeile angezeigt.A red circle appears next to the line of code in the far left margin of the editor window.

  3. Wählen Sie folgende Zeile aus: MessageBox.Show("Goodbye.").Select the following line: 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.Press the F9 key to add a breakpoint, and then press F5 to start debugging.

  5. Aktivieren Sie im Fenster Greetings das Optionsfeld Hello , und wählen Sie dann die Schaltfläche Anzeigen aus.In the Greetings window, choose the Hello radio button, and then choose the Display button.

    Die Zeile wird MessageBox.Show("Hello.") gelb hervorgehoben.The line MessageBox.Show("Hello.") is highlighted in yellow. 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.At the bottom of the IDE, the Autos, Locals, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, Exception Settings, Command, Immediate, and Output windows are docked together on the right side.

    Erreichen eines Breakpoints im DebuggerBreakpoint in the debugger

  6. Wählen Sie in der Menüleiste Debuggen > Rücksprung aus.On the menu bar, choose Debug > Step Out.

    Die Anwendung wird weiter ausgeführt, und ein Meldungsfeld mit dem Wort „Hello“ wird angezeigt.The application resumes execution, and a message box with the word "Hello" appears.

  7. Wählen Sie die Schaltfläche OK im Meldungsfeld, um es zu schließen.Choose the OK button on the message box to close it.

  8. Aktivieren Sie im Fenster Greetings das Optionsfeld Goodbye , und wählen Sie dann die Schaltfläche Anzeigen aus.In the Greetings window, choose the Goodbye radio button, and then choose the Display button.

    Die Zeile wird MessageBox.Show("Goodbye.") gelb hervorgehoben.The line MessageBox.Show("Goodbye.") is highlighted in yellow.

  9. Drücken Sie die Taste F5, um das Debuggen fortzusetzen.Choose the F5 key to continue debugging. Wenn das Meldungsfeld angezeigt wird, wählen Sie die Schaltfläche OK im Meldungsfeld, um es zu schließen.When the message box appears, choose the OK button on the message box to close it.

  10. Schließen Sie das Anwendungsfenster, um das Debuggen zu beenden.Close the application window to stop debugging.

  11. Wählen Sie in der Menüleiste Debuggen > Alle Haltepunkte deaktivieren aus.On the menu bar, choose Debug > Disable All Breakpoints.

Anzeigen einer Darstellung der BenutzeroberflächenelementeView a representation of the UI elements

In der ausgeführten App sollte ein Widget angezeigt werden, das am oberen Rand des Fensters angezeigt wird.In the running app, you should see a widget that appears at the top of your window. Dies ist eine Runtimehilfsfunktion, die Schnellzugriff auf einige hilfreiche Debugfeatures bereitstellt.This is a runtime helper that provides quick access to some helpful debugging features. Klicken Sie auf die erste Schaltfläche Zur visuellen Echtzeitstruktur wechseln.Click on the first button, Go to Live Visual Tree. Daraufhin sollte ein Fenster mit einer Struktur angezeigt werden, die alle visuelle Elemente Ihrer Seite enthält.You should see a window with a tree that contains all the visual elements of your page. Erweitern Sie die Knoten, um die hinzugefügten Schaltflächen zu finden.Expand the nodes to find the buttons you added.

Screenshot: Fenster mit visueller Echtzeitstruktur

Version der Anwendung erstellenBuild a release version of the application

Nachdem Sie überprüft haben, dass alles funktioniert, können Sie einen Releasebuild der Anwendung vorbereiten.Now that you've verified that everything works, you can prepare a release build of the application.

  1. Wählen Sie im Hauptmenü Erstellen > Projektmappe bereinigen aus, um Zwischendateien und Ausgabedateien zu löschen, die bei vorherigen Builds erstellt wurden.On the main menu, select Build > Clean solution to delete intermediate files and output files that were created during previous builds. Dies ist nicht erforderlich, bereinigt jedoch die Ausgaben des Builddebugvorgangs.This isn't necessary, but it cleans up the debug build outputs.

  2. Ändern Sie die Build-Konfiguration für HelloWPFApp über das Dropdown-Steuerelement in der Symbolleiste (derzeit „Debug“) von Debug in Release.Change the build configuration for HelloWPFApp from Debug to Release by using the dropdown control on the toolbar (it says "Debug" currently).

  3. Erstellen Sie die Projektmappe, indem Sie auf Erstellen > Projektmappe erstellen klicken.Build the solution by choosing Build > Build Solution.

Damit haben Sie das Tutorial erfolgreich abgeschlossen.Congratulations on completing this tutorial! Sie finden die EXE-Datei, die Sie erstellt haben, in Ihrer Projektmappe und im Projektverzeichnis ( ...\HelloWPFApp\HelloWPFApp\bin\Release).You can find the .exe you built under your solution and project directory (...\HelloWPFApp\HelloWPFApp\bin\Release).

Nächste SchritteNext steps

Damit haben Sie das Tutorial erfolgreich abgeschlossen.Congratulations on completing this tutorial! Wenn Sie weitere Informationen erhalten möchten, fahren Sie mit den folgenden Tutorials fort.To learn even more, continue with the following tutorials.

Siehe auchSee also