Exemplarische Vorgehensweise: Untersuchen der Visual Studio-IDE mit C# oder Visual Basic

Wenn Sie diese exemplarische Vorgehensweise durcharbeiten, werden Sie mit vielen Tools, Dialogfeldern und Designern vertraut, die Sie für die Entwicklung von Anwendungen in Visual Studio verwenden können.Sie erstellen die einfache Anwendung "Hello, World", entwerfen die Benutzeroberfläche, fügen Code hinzu und debuggen Fehler und erfahren gleichzeitig mehr über das Arbeiten in der integrierten Entwicklungsumgebung (IDE).

Dieses Thema enthält folgende Abschnitte:

Konfigurieren der IDE

Erstellen einer einfachen Anwendung

Debuggen und Testen der Anwendung

Hinweis

Diese exemplarische Vorgehensweise basiert auf der Professional Edition von Visual Studio 2012.In Ihrer Ausgabe von Visual Studio werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten.Die von Ihnen verwendete Visual Studio-Edition und die Einstellungen legen diese Elemente fest.Weitere Informationen zu den Einstellungen finden Sie unter Visual Studio-Einstellungen.

Konfigurieren der IDE

Wenn Sie Visual Studio zum ersten Mal starten, müssen Sie eine Kombination von Einstellungen auswählen, die einen Satz vordefinierter Anpassungen auf die IDE anwenden.Jede Einstellungskombination wurde entwickelt, um Ihnen die Entwicklung von Anwendungen zu vereinfachen.

Abbildung 1: Das Dialogfeld "Standardumgebungseinstellungen auswählen"

Diese exemplarische Vorgehensweise wurde mit Allgemeinen Entwicklungseinstellungen geschrieben, in denen nur ein Mindestmaß an Anpassung an die IDE angewendet wird.Sie können die Einstellungskombination mithilfe des Assistenten Einstellungen importieren und exportieren ändern.Weitere Informationen finden Sie unter Gewusst wie: Ändern der Auswahleinstellungen.

Wenn Sie Visual Studio geöffnet haben, können Sie die Toolfenster, die Menüs und Symbolleisten und den Hauptfensterbereich erkennen.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 eine Projektmappe oder ein Projekt geladen wird, werden Editoren und Designer in diesem Bereich angezeigt.Wenn Sie eine Anwendung entwickeln, verbringen Sie die meiste Zeit in diesem zentralen Bereich.

Abbildung 2: Visual Studio-IDE

Sie können weitere Anpassungen an Visual Studio vornehmen. Sie können z. B. die Schriftart und Größe des Texts im Editor oder das Farbschema der IDE ändern, indem Sie das Dialogfeld Optionen verwenden.Je nach gültiger Einstellungskombination werden möglicherweise einige Elemente in diesem Dialogfeld nicht automatisch angezeigt.Sie können überprüfen, ob alle möglichen Optionen angezeigt werden, indem Sie das Kontrollkästchen Alle Einstellungen anzeigen aktivieren.

Abbildung3: Dialogfeld "Optionen"

In diesem Beispiel ändern Sie das Farbschema der IDE von hell zu dunkel.

Ändern des Farbschemas der IDE

1. Öffnen Sie das Dialogfeld Optionen.

   

2. Ändern Sie das Farbschema zu Dunkel, und klicken Sie anschließend auf OK.

   

Die Farben in Visual Studio sollten mit dem folgenden Bild übereinstimmen:

Im weiteren Verlauf dieser exemplarischen Vorgehensweise wird ein helles Design verwendet.Weitere Informationen zum Anpassen der IDE finden Sie unter Anpassen der Entwicklungsumgebung.

Erstellen einer einfachen Anwendung

Erstellen eines Projekts

Wenn Sie eine Anwendung in Visual Studio erstellen, erstellen Sie zunächst ein Projekt und eine Projektmappe.Für dieses Beispiel erstellen Sie eine Windows Presentation Foundations-Projektmappe.

So erstellen Sie das WPF-Projekt

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

   

   Sie können auch "Neues Projekt" im Feld Schnellstart eingeben, um ein neues Projekt zu erstellen.

   

2. Wählen Sie die Anwendungsvorlage Visual Basic oder Visual C# WPF aus, und nennen Sie das Projekt "HelloWPFApp".

   

   OR

   

Das Projekt und die Projektmappe "HelloWPFApp" werden erstellt, und die verschiedenen Dateien werden in Projektmappen-Explorer angezeigt.Der WPF-Designer zeigt eine Entwurfsansicht und eine XAML-Ansicht der Datei MainWindow.xaml in einer geteilten Ansicht an.(Weitere Informationen finden Sie unter Der WPF-Designer für Windows Forms-Entwickler.)Die folgenden Elemente werden in Projektmappen-Explorer angezeigt:

Abbildung 5: Projektelemente

Nachdem Sie das Projekt erstellt haben, können Sie es anpassen.Im Fenster Eigenschaften können Sie Optionen für Projektelemente, Steuerelemente und andere Elemente in einer Anwendung anzeigen und ändern.Auf den Projekteigenschafts- und die Eigenschaftsseiten können Sie Optionen für Projekte und Projektmappen anzeigen und ändern.

Ändern des Namens der Datei "MainWindow.xaml"

1. In der folgenden Prozedur geben Sie "MainWindow" einen genaueren Namen.Wählen Sie in Projektmappen-Explorer MainWindow.xaml aus.Das Fenster Eigenschaften für diese Datei sollte unter dem -Fenster angezeigt werden.Wenn Sie das Fenster Eigenschaften nicht finden, wählen Sie MainWindow.xaml in Projektmappen-Explorer aus, öffnen Sie das Kontextmenü (durch Klicken mit der rechten Maustaste), und wählen Sie Eigenschaften) aus.Ändern Sie die Eigenschaft Dateiname in Greetings.xaml

   

   Projektmappen-Explorer zeigt an, dass der Name der Datei nun Greetings.xaml lautet und dass der Name von MainWindow.xaml.cs bzw. MainWindow.xaml.vb jetzt Greetings.xaml.vb bzw. Greetings.xaml.cs lautet.

2. Öffnen Sie in Projektmappen-Explorer Greetings.xaml in der Designeransicht, und wählen Sie die Titelleiste des Fensters aus.

3. Ändern Sie im Fenster Eigenschaften den Wert der Titel-Eigenschaft in Greetings.

   Vorsicht
   Diese Änderung verursacht einen Fehler. In einem späteren Schritt werden Sie lernen, wie dieser Fehler erkannt und korrigiert wird.

Die Titelleiste für MainWindow.xaml lautet jetzt Greetings.

Entwerfen der Benutzeroberfläche (UI)

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. Öffnen Sie das Fenster Toolbox.Sie sollten das Steuerelement auf der linken Seite des Designerfensters finden.Sie können es auch aus dem Menü Ansicht heraus oder durch Drücken der STRG+ALT+X-TASTEN öffnen.

2. Suchen Sie im Werkzeugkasten nach dem TextBlock-Steuerelement.

   

3. Fügen Sie der Entwurfsoberfläche ein TextBlock-Steuerelement hinzu, und zentrieren Sie das Steuerelement im oberen Bereich des Fensters.

Das Fenster sollte der folgenden Abbildung entsprechen:

Abbildung 7: Greetings-Fenster mit TextBlock-Steuerelement

Das XAML-Markup sollte in etwa der folgenden Darstellung entsprechen:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Anpassen des Texts im Textblock

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

2. Wenn der Textblock nicht so erweitert wird, dass er in die Entwurfsansicht passt, vergrößern Sie das TextBlock-Steuerelement, sodass es den gesamten Text anzeigt.

3. Speichern Sie die Änderungen.

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

Hinzufügen von Optionsfeldern

1. Suchen Sie im Werkzeugkasten nach dem RadioButton-Steuerelement.

   

2. Fügen Sie der Entwurfsoberfläche zwei RadioButton-Steuerelemente hinzu, und verschieben Sie sie, sodass sie nebeneinander unter dem TextBlock-Steuerelement angezeigt werden.

   Das Fenster sieht wie folgt aus:

   Abbildung 8: RadioButtons im Greetings-Fenster.

   

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

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

Sie können 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. Öffnen Sie auf der Entwurfsoberfläche das Kontextmenü für RadioButton1, wählen Sie Text bearbeiten aus, und geben Sie Hello ein.

2. Öffnen Sie das Kontextmenü für RadioButton2, wählen Sie Text bearbeiten aus, und geben Sie Goodbye ein.

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

Hinzufügen eines Button-Steuerelements

1. Suchen Sie im Werkzeugkasten nach dem Button-Steuerelement, und fügen Sie es dann der Entwurfsoberfläche unter den RadioButton-Steuerelementen hinzu.

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

   Das Markup sollte in etwa dem folgenden Beispiel entsprechen: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

Das Fenster sollte der folgenden Abbildung entsprechen.

Abbildung 9: Abschließende Benutzeroberfläche von Greetings

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 auswä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.vb oder in Greetings.xaml.cs hinzu.

Hinzufügen von Code zu Anzeigenmeldungsfeldern

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

   Greetings.xaml.vb oder Greetings.xaml.cs wird geöffnet, der Cursor steht im Button_Click-Ereignis.Sie können einen Ereignishandler für das Click-Ereignis auch wie folgt hinzufügen.

   Für Visual Basic sollte der Ereignishandler wie folgt aussehen:

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

   Für Visual C# sollte der Ereignishandler wie folgt aussehen:

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

2. Geben Sie für Visual Basic den folgenden Code ein:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   Geben Sie für Visual C# den folgenden Code ein:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.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.Weitere Informationen finden Sie unter Erstellen einer WPF-Anwendung (WPF) und Debuggen von WPF.

Suchen und Beheben von Fehlern

In diesem Schritt suchen Sie den Fehler, den wir zuvor verursacht haben, indem wir den Namen der Hauptfensters der XAML-Datei geändert haben.

Starten des Debugging und Suchen des Fehlers

1. Starten Sie den Debugger, indem Sie Debuggen, dann Debugging starten auswählen.

   

   Ein Dialogfeld wird angezeigt, das angibt, dass ein IOException aufgetreten ist: Ressource "mainwindow.xaml" kann nicht gefunden werden.

2. Wählen Sie die Schaltfläche OK aus, und beenden Sie anschließend den Debugger.

   

Zu Beginn dieser exemplarischen Vorgehensweise haben wir Mainwindow.xaml zu Greetings.xaml umbenannt. Da die Projektmappe 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 in Projektmappen-Explorer Datei App.xaml (im C#-Projekt) oder die Datei "Application.xaml" (in Visual Basic-Projekten) in der XAML-Ansicht (sie kann nicht in der Entwurfsansicht geöffnet werden).

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

Starten Sie den Debugger erneut.Sie sollten das Greetings-Fenster der Anwendung sehen.

Debuggen mit Haltepunkten

Wenn Sie einige Haltepunkte hinzufügen, können Sie den Code während des Debuggens testen.Sie können Haltepunkte hinzufügen, indem Sie in der Menüleiste Debuggen, Haltepunkt umschalten auswählen oder indem Sie am linken Rand des Editors neben der Codezeile klicken, in der die Unterbrechung stattfinden soll.

Hinzufügen von Haltepunkten

1. Öffnen Sie Greetings.xaml.vb oder 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. Wählen Sie die F9-TASTE, um einen Haltepunkt hinzuzufügen, und wählen Sie dann die F5-TASTE, 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 "Autom.", "Lokal" und "Überwachen" auf der linken Seite zusammengedockt, und die Fenster "Aufrufliste", "Haltepunkte", "Befehl", "Direkt" und "Ausgabe" werden auf der rechten Seite zusammengedockt.

6. Wählen Sie in der Menüleiste Debuggen die Option 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 F5-TASTE, um das Debuggen fortzusetzen.Wenn das Meldungsfeld angezeigt wird, wählen Sie die Schaltfläche OK im Meldungsfeld, um es zu schließen.

10. Wählen Sie die Tasten UMSCHALT+F5, um das Debugging zu beenden.

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

Erstellen einer Releaseversion der Anwendung

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

Bereinigen der Projektmappendateien und Erstellen einer Releaseversion

1. Wählen Sie Build, dann Projektmappe bereinigen aus, um Zwischendateien und Ausgabedateien, die bei vorherigen Builds erstellt wurden, zu löschen.

   

2. Ändern Sie die Buildkonfiguration für HelloWPFApp von Debuggen zu Version.

   

3. Erstellen Sie die Projektmappe.

   

Herzlichen Glückwunsch, Sie haben diese exemplarischen Vorgehensweise abgeschlossen!Weitere Beispiele zum Durcharbeiten finden Sie unter Visual Studio-Beispiele.

Siehe auch

Konzepte

Neues in Visual Studio 2012

Erste Schritte mit Visual Studio

Produktivitätstipps für Visual Studio