Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

Exemplarische Vorgehensweise: Erstellen einer einfachen Anwendung mit Visual 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 Hinweis

Diese exemplarische Vorgehensweise basiert auf Visual Studio Professional, da diese Version die WPF-Anwendungsvorlage enthält, mit deren Hilfe Sie das Projekt für diese exemplarische Vorgehensweise erstellen. Visual Studio Express für Windows Desktop enthält diese Vorlage ebenfalls, nicht aber Visual Studio Express für Windows und Visual Studio Express für das Web. Einführende Informationen zur Verwendung von Visual Studio Express für Windows finden Sie unter Entwickeln von Windows Store-Apps. Einführende Informationen zur Verwendung von Visual Studio Express für das Web finden Sie unter Get Started with ASP.NET. Außerdem bestimmen die Edition von Visual Studio und Einstellungen, die Sie verwenden, die Namen und Positionen einiger Elemente der Benutzeroberfläche. Siehe Anpassen der Entwicklungseinstellungen in Visual Studio.

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"

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. Siehe Anpassen der Entwicklungseinstellungen in Visual Studio.

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

IDE mit "Allgemeine Einstellungen" übernommen

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"

Dialogfeld "Optionen" mit Option "Alle Einstellungen anzeigen"

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

Ändern des Farbschemas der IDE

  1. Öffnen Sie das Dialogfeld Optionen.

    Befehl "Optionen" im Menü "Tools"
  2. Ändern Sie das Farbschema zu Dunkel, und klicken Sie anschließend auf OK.

    Dunkles Farbschema ausgewählt

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

IDE mit "Dunkles Design" übernommen

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

JJ153219.collapse_all(de-de,VS.120).gifErstellen 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.

    Wählen Sie auf der Menüleiste "Datei", "Neu", "Projekt" aus.

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

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

    "Visual Basic WPF Project, HelloWPFApp" erstellen

    Oder

    "Visual C# WPF Project, HelloWPFApp" erstellen

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

Projektmappen-Explorer mit geladenen HelloWPFApp-Dateien

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

    Eigenschaftenfenster mit hervorgehobenem Dateinamen

    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.

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

JJ153219.collapse_all(de-de,VS.120).gifEntwerfen 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.

    Toolbox mit hervorgehobenem 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

TextBlock-Steuerelement im Formular "Greetings"

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.

    Toolboxfenster mit aktiviertem 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.

    Formular "Greetings" mit TextBlock und zwei RadioButtons
  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

Formular "Greetings" mit Steuerelementbezeichnungen

JJ153219.collapse_all(de-de,VS.120).gifHinzufü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.

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.

JJ153219.collapse_all(de-de,VS.120).gifSuchen 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.

    Befehl "Debugging starten" im Menü "Debuggen"

    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.

    Befehl "Debugging beenden" im Menü "Debuggen"

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.

JJ153219.collapse_all(de-de,VS.120).gifDebuggen 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.

    Befehl "Haltepunkt umschalten" im Menü "Debuggen"

    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.

JJ153219.collapse_all(de-de,VS.120).gifErstellen 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.

    Befehl "Projektmappe bereinigen" im Menü "Erstellen"
  2. Ändern Sie die Buildkonfiguration für HelloWPFApp von Debuggen zu Version.

    Standardsymbolleiste mit ausgewählter Release
  3. Erstellen Sie die Projektmappe.

    Befehl "Projektmappe erstellen" im Menü "Erstellen"

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

Fanden Sie dies hilfreich?
(1500 verbleibende Zeichen)
Vielen Dank für Ihr Feedback.

Community-Beiträge

Anzeigen:
© 2014 Microsoft