Exemplarische Vorgehensweise: Erste Schritte mit dem Windows Forms-Designer

Aktualisiert: September 2010

Der Windows Forms-Designer stellt viele Tools zum Erstellen von Windows Forms-Anwendungen bereit. In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie eine Anwendung mit den verschiedenen Tools des Designers erstellt wird. Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

• Erstellen eines Windows Forms-Projekts

• Anordnen von Steuerelementen mithilfe von Ausrichtungslinien

• Ausführen von Designeraufgaben mithilfe von Smarttags

• Festlegen von Rändern und Abständen für die Steuerelemente

• Anordnen von Steuerelementen mit einem TableLayoutPanel-Steuerelement

• Partitionieren des Steuerelementlayouts mithilfe eines SplitContainer-Steuerelements

• Navigieren im Layout mithilfe des Fensters Dokumentgliederung

• Positionieren von Steuerelementen durch Anzeige der Größe und Position

• Festlegen von Eigenschaftswerten mithilfe des Eigenschaftenfensters

Anschließend verfügen Sie über ein benutzerdefiniertes Steuerelement, das unter Verwendung zahlreicher Layoutfeatures, die im Windows Forms-Designer verfügbar sind, erstellt wurde. Dieses Steuerelement implementiert die Benutzeroberfläche (UI) für einen einfachen Rechner. Die folgende Bildschirmabbildung zeigt das allgemeine Layout des Rechnersteuerelements.

Rechner-UI

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

• Ausreichende Berechtigungen zum Erstellen und Ausführen von Windows Forms-Anwendungsprojekten auf dem Computer, auf dem Visual Studio installiert ist.

Erstellen des benutzerdefinierten Steuerelementprojekts

Zunächst muss das DemoCalculator-Steuerelementprojekt erstellt werden.

So erstellen Sie das benutzerdefinierte Steuerelementprojekt

1. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt, um das Dialogfeld Neues Projekt zu öffnen.

2. Wählen Sie die Projektvorlage Windows Forms-Steuerelementbibliothek aus der Liste der Projekte von Visual Basic oder von Visual C# in der Kategorie Windows aus.

3. Geben Sie im Feld Name die Bezeichnung DemoCalculatorLib ein, und klicken Sie auf OK.

4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf UserControl1.vb oder auf UserControl1.cs, und klicken Sie dann auf Umbenennen.

5. Ändern Sie den Dateinamen in DemoCalculator.vb oder DemoCalculator.cs. Klicken Sie auf die Schaltfläche Ja, wenn Sie gefragt werden, ob Sie alle Verweise auf das Codeelement "UserControl1" umbenennen möchten.

   Der Windows Forms-Designer zeigt momentan die Designeroberfläche für das DemoCalculator-Steuerelement an. In dieser Ansicht können Sie die Darstellung des Steuerelements grafisch entwerfen, indem Sie Steuerelemente und Komponenten aus der Toolbox auswählen und sie auf der Designeroberfläche platzieren. Weitere Informationen zu benutzerdefinierten Steuerelementen finden Sie unter Arten von benutzerdefinierten Steuerelementen.

Entwerfen des Steuerelementlayouts

Das DemoCalculator-Steuerelement enthält mehrere Windows Forms-Steuerelemente. In dieser Prozedur ordnen Sie die Steuerelemente mithilfe von RAD-Features (Rapid Application Development, schnelle Anwendungsentwicklung) des Windows Forms-Designers an.

So entwerfen Sie das Steuerelementlayout

1. Vergrößern Sie das DemoCalculator-Steuerelement im Windows Forms-Designer, indem Sie auf den Ziehpunkt in der rechten unteren Ecke klicken und die Maus nach rechts unten ziehen. Suchen Sie in der rechten unteren Ecke von Visual Studio die Größen- und Positionsinformationen für Steuerelemente. Legen Sie die Breite des Steuerelements auf 500 und die Höhe auf 400 fest, indem Sie beim Ziehen die Größeninformationen im Auge behalten.

2. Klicken Sie in der Toolbox auf den Knoten Container, um ihn zu öffnen. Wählen Sie das SplitContainer-Steuerelement aus, und ziehen Sie es auf die Designeroberfläche.

   Der SplitContainer wird auf der Designeroberfläche des DemoCalculator-Steuerelements platziert.

   Tipp

   Das SplitContainer-Steuerelement passt sich an die Größe des DemoCalculator-Steuerelements an. Suchen Sie im Eigenschaftenfenster die Eigenschafteneinstellungen für das SplitContainer-Steuerelement. Suchen Sie die Dock-Eigenschaft. Der Wert dieser Eigenschaft ist auf Fill festgelegt, d. h. das SplitContainer-Steuerelement wird grundsätzlich an die Grenzen des DemoCalculator-Steuerelements angepasst. Ändern Sie die Größe des DemoCalculator-Steuerelements, um dieses Verhalten zu überprüfen.

3. Ändern Sie im Eigenschaftenfenster den Wert der Dock-Eigenschaft in None.

   Das SplitContainer-Steuerelement wird auf die Standardgröße verkleinert. Seine Größe entspricht nicht mehr der Größe des DemoCalculator-Steuerelements.

4. Klicken Sie auf das Smarttagsymbol () in der rechten oberen Ecke des SplitContainer-Steuerelements. Klicken Sie auf In übergeordnetem Container andocken, um die Dock-Eigenschaft auf Fill festzulegen.

   Das SplitContainer-Steuerelement dockt an die Grenzen des DemoCalculator-Steuerelements an.

   Tipp

   Mehrere Steuerelemente verfügen über Smarttags, die den Entwurf erleichtern. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Ausführen von häufigen Aufgaben mit Smarttags auf Windows Forms-Steuerelementen.

5. Klicken Sie auf die vertikale Grenze zwischen den Bereichen, und ziehen Sie sie nach rechts, sodass der linke Bereich den meisten Platz einnimmt.

   Der SplitContainer teilt das DemoCalculator-Steuerelement in zwei Bereiche, die durch eine bewegliche Grenze voneinander getrennt sind. Der Bereich auf der linken Seite enthält die Schaltflächen und Anzeige des Rechners, während im Bereich auf der rechten Seite die arithmetischen Operationen angezeigt werden, die der Benutzer ausgeführt hat.

6. Ändern Sie im Eigenschaftenfenster den Wert der BorderStyle-Eigenschaft in Fixed3D.

7. Klicken Sie in der Toolbox auf den Knoten Allgemeine Steuerelemente, um ihn zu öffnen. Wählen Sie das ListView-Steuerelement aus, und ziehen Sie es in den rechten Bereich des SplitContainer-Steuerelements.

8. Klicken Sie auf das Smarttagsymbol des ListView-Steuerelements. Ändern Sie im Smarttagbereich die View-Einstellung in Details.

9. Klicken Sie im Smarttagbereich auf Spalten bearbeiten.

   Das Dialogfeld ColumnHeader-Auflistungs-Editor wird geöffnet.

10. Klicken Sie im Dialogfeld ColumnHeader-Auflistungs-Editor auf die Schaltfläche Hinzufügen, um eine Spalte zum ListView-Steuerelement hinzuzufügen. Ändern Sie den Wert der Text-Eigenschaft der Spalte in "History". Klicken Sie auf OK, um die Spalte zu erstellen.

11. Klicken Sie im Smarttagbereich auf In übergeordnetem Container andocken, und klicken Sie anschließend auf das Smarttagsymbol, um den Smarttagbereich zu schließen.

12. Ziehen Sie aus dem Knoten Container in der Toolbox ein TableLayoutPanel-Steuerelement in den linken Bereich des SplitContainer-Steuerelements.

    Das TableLayoutPanel-Steuerelement wird auf der Designeroberfläche mit geöffnetem Smarttagbereich angezeigt. Das TableLayoutPanel-Steuerelement ordnet seine untergeordneten Steuerelemente in einem Raster an. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von TableLayoutPanel. Das TableLayoutPanel-Steuerelement enthält die Anzeige und die Schaltflächen des DemoCalculator-Steuerelements.

13. Klicken Sie im Smarttagbereich auf Zeilen und Spalten bearbeiten.

    Das Dialogfeld Spalten- und Zeilenstile wird geöffnet.

14. Klicken Sie auf die Schaltfläche Hinzufügen, bis fünf Spalten angezeigt werden. Wählen Sie alle fünf Spalten aus, und klicken Sie dann im Feld Größentyp auf das Optionsfeld Prozent. Legen Sie den Wert Prozent auf 20 fest. Dadurch wird jeder Spalte die gleiche Breite zugewiesen.

15. Klicken Sie im Dropdownfeld Anzeigen auf Zeilen.

16. Klicken Sie auf die Schaltfläche Hinzufügen, bis fünf Zeilen angezeigt werden. Wählen Sie alle fünf Zeilen aus, und klicken Sie dann im Feld Größentyp auf das Optionsfeld Prozent. Legen Sie den Wert Prozent auf 20 fest. Dadurch wird jeder Zeile die gleiche Höhe zugewiesen.

17. Klicken Sie auf OK, um die Änderungen zu übernehmen, und klicken Sie anschließend auf das Smarttagsymbol, um den Smarttagbereich zu schließen.

18. Ändern Sie im Eigenschaftenfenster den Wert der Dock-Eigenschaft in Fill.

Füllen des Steuerelements

Nachdem Sie das Layout des DemoCalculator-Steuerelements eingerichtet haben, können Sie es mit Schaltflächen und einer Anzeige füllen.

So füllen Sie das Steuerelement

1. Doppelklicken Sie in der Toolbox auf das Symbol für das TextBox-Steuerelement.

   Ein TextBox-Steuerelement wird in der ersten Zelle des TableLayoutPanel-Steuerelements eingefügt.

2. Ändern Sie im Eigenschaftenfenster den Wert der ColumnSpan-Eigenschaft des TextBox-Steuerelements in 5.

   Das TextBox-Steuerelement wird in der Zeile zentriert.

3. Ändern Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements in Left, Right.

   Das TextBox-Steuerelement wird horizontal erweitert, sodass es alle fünf Spalten überspannt.

4. Ändern Sie den Wert der TextAlign-Eigenschaft des TextBox-Steuerelements in Right.

5. Erweitern Sie im Eigenschaftenfenster den Eigenschaftenknoten Font. Legen Sie das TextBox-Steuerelement Size auf 14 und Bold auf true fest.

6. Wählen Sie das TableLayoutPanel-Steuerelement aus.

7. Doppelklicken Sie in der Toolbox auf das Button-Symbol.

   Ein Button-Steuerelement wird in der nächsten freien Zelle des TableLayoutPanel-Steuerelements eingefügt.

8. Doppelklicken Sie in der Toolbox noch viermal auf das Button-Symbol, um die zweite Zeile des TableLayoutPanel-Steuerelements zu füllen.

9. Wählen Sie alle fünf Button-Steuerelemente aus, indem Sie bei gedrückter UMSCHALTTASTE darauf klicken. Drücken Sie STRG+C, um die Button-Steuerelemente in die Zwischenablage zu kopieren.

10. Drücken Sie dreimal STRG+V, um Kopien des Button-Steuerelements in die übrigen Zeilen des TableLayoutPanel-Steuerelements einzufügen.

11. Wählen Sie alle 20 Button-Steuerelemente aus, indem Sie bei gedrückter UMSCHALTTASTE darauf klicken.

12. Ändern Sie im Eigenschaftenfenster den Wert der Dock-Eigenschaft in Fill.

    Alle Button-Steuerelemente werden angedockt, um die darin enthaltenen Zellen zu füllen.

13. Erweitern Sie im Eigenschaftenfenster den Eigenschaftenknoten Margin. Legen Sie den Wert von All auf 5 fest.

    Alle Button-Steuerelemente werden verkleinert, damit zwischen ihnen ein größerer Abstand entsteht.

14. Wählen Sie button10 und button20 aus, und drücken Sie dann ENTF, um sie aus dem Layout zu entfernen.

15. Wählen Sie button5 und button15 aus, und ändern Sie dann den Wert ihrer RowSpan-Eigenschaft in 2. Dies sind die Tasten Clear und = für das DemoCalculator-Steuerelement.

Navigieren im Steuerelement mithilfe des Fensters "Dokumentgliederung"

Wenn das Steuerelement oder Formular mehrere Steuerelemente enthält, wird die Navigation im Layout möglicherweise mit dem Fenster Dokumentgliederung vereinfacht.

So navigieren Sie mithilfe des Fensters "Dokumentgliederung"

1. Zeigen Sie im Menü Ansicht auf Weitere Fenster, und klicken Sie anschließend auf Dokumentgliederung.

   Das Fenster Dokumentgliederung enthält eine Strukturansicht des DemoCalculator-Steuerelements und dessen untergeordneter Steuerelemente. Die untergeordneten Steuerelemente von Containersteuerelementen wie der SplitContainer werden als untergeordnete Knoten in der Struktur angezeigt. Sie können Steuerelemente im Fenster Dokumentgliederung auch direkt umbenennen.

2. Klicken Sie im Fenster Dokumentgliederung mit der rechten Maustaste auf button1, und klicken Sie dann auf Umbenennen. Ändern Sie den Namen in sevenButton.

3. Ändern Sie mithilfe des Fensters Dokumentgliederung den vom Designer generierten Namen der Button-Steuerelemente in den Produktionsnamen. Gehen Sie hierbei wie in der folgenden Liste dargestellt vor:

   • button1 bis sevenButton

   • button2 bis eightButton

   • button3 bis nineButton

   • button4 bis divisionButton

   • button5 bis clearButton

   • button6 bis fourButton

   • button7 bis fiveButton

   • button8 bis sixButton

   • button9 bis multiplicationButton

   • button11 bis oneButton

   • button12 bis twoButton

   • button13 bis threeButton

   • button14 bis subtractionButton

   • button15 bis equalsButton

   • button16 bis zeroButton

   • button17 bis changeSignButton

   • button18 bis decimalButton

   • button19 bis additionButton

4. Ändern Sie über das Fenster Dokumentgliederung und das Eigenschaftenfenster den Wert der Text-Eigenschaft für jedes Button-Steuerelement gemäß der folgenden Liste:

   • Ändern Sie die Texteigenschaft für das sevenButton-Steuerelement in 7

   • Ändern Sie die Texteigenschaft für das eightButton-Steuerelement in 8

   • Ändern Sie die Texteigenschaft für das nineButton-Steuerelement in 9

   • Ändern Sie die Texteigenschaft für das divisionButton-Steuerelement in /

   • Ändern Sie die Texteigenschaft für das clearButton-Steuerelement in Löschen

   • Ändern Sie die Texteigenschaft für das fourButton-Steuerelement in 4

   • Ändern Sie die Texteigenschaft für das fiveButton-Steuerelement in 5

   • Ändern Sie die Texteigenschaft für das sixButton-Steuerelement in 6

   • Ändern Sie die Texteigenschaft für das multiplicationButton-Steuerelement in *

   • Ändern Sie die Texteigenschaft für das oneButton-Steuerelement in 1

   • Ändern Sie die Texteigenschaft für das twoButton-Steuerelement in 2

   • Ändern Sie die Texteigenschaft für das threeButton-Steuerelement in 3

   • Ändern Sie die Texteigenschaft für das subtractionButton-Steuerelement in -

   • Ändern Sie die Texteigenschaft für das equalsButton-Steuerelement in =

   • Ändern Sie die Texteigenschaft für das zeroButton-Steuerelement in 0

   • Ändern Sie die Texteigenschaft für das changeSignButton-Steuerelement in +/-

   • Ändern Sie die Texteigenschaft für das decimalButton-Steuerelement in .

   • Ändern Sie die Texteigenschaft für das additionButton-Steuerelement in +

5. Wählen Sie in der Designeroberfläche alle Button-Steuerelemente aus, indem Sie bei gedrückter UMSCHALTTASTE darauf klicken.

6. Erweitern Sie im Eigenschaftenfenster den Eigenschaftenknoten Font. Legen Sie alle Button-Steuerelemente Size auf 14 und Bold auf true fest.

   Der Entwurf des DemoCalculator-Steuerelements ist damit abgeschlossen. Nun müssen Sie nur noch die Rechnerlogik bereitstellen.

Implementieren von Ereignishandlern

Die Schaltflächen auf dem DemoCalculator-Steuerelement verfügen über Ereignishandler, die verwendet werden können, um einen Großteil der Rechnerlogik zu implementieren. Der Windows Forms-Designer ermöglicht es Ihnen, die Stubs aller Ereignishandler für alle Schaltflächen mit nur einem Doppelklick zu implementieren.

So implementieren Sie Ereignishandler

1. Wählen Sie in der Designeroberfläche alle Button-Steuerelemente aus, indem Sie bei gedrückter UMSCHALTTASTE darauf klicken.

2. Doppelklicken Sie auf eines der Button-Steuerelemente.

   Der Code-Editor wird mit dem vom Designer generierten Ereignishandler geöffnet.

Testen des Steuerelements

Da das DemoCalculator-Steuerelement von der UserControl-Klasse erbt, können Sie sein Verhalten mit dem UserControl-Testcontainer testen. Weitere Informationen finden Sie unter Gewusst wie: Testen des Laufzeitverhaltens eines UserControl.

So testen Sie das Steuerelement

1. Drücken Sie F5, um das DemoCalculator-Steuerelement im UserControl-Testcontainer zu erstellen und auszuführen.

2. Klicken Sie auf die Grenze zwischen den SplitContainer-Bereichen, und ziehen Sie sie nach links oder rechts. Der TableLayoutPanel und seine untergeordneten Steuerelemente werden an den verfügbaren Platz angepasst.

3. Klicken Sie auf Schließen, nachdem die Tests des Steuerelements abgeschlossen sind.

Verwenden des Steuerelements auf einem Formular

Das DemoCalculator-Steuerelement kann in anderen zusammengesetzten Steuerelementen oder auf einem Formular verwendet werden. In der folgenden Prozedur wird seine Verwendung beschrieben.

Erstellen des Projekts

Zunächst muss das Anwendungsprojekt erstellt werden. Mit diesem Projekt erstellen Sie die Anwendung, in der das benutzerdefinierte Steuerelement angezeigt wird.

So erstellen Sie das Projekt

1. Zeigen Sie im Menü Datei auf Hinzufügen, und klicken Sie auf Neues Projekt, um das Dialogfeld Neues Projekt zu öffnen.

2. Wählen Sie die Projekvorlage Windows Forms-Anwendung aus der Liste der Projekte von Visual Basic oder von Visual C# aus.

3. Geben Sie im Feld Name die Bezeichnung DemoCalculatorTest ein, und klicken Sie auf OK.

4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt DemoCalculatorTest, und klicken Sie dann auf Verweis hinzufügen, um das Dialogfeld Verweis hinzufügen zu öffnen.

5. Klicken Sie auf die Registerkarte Projekte, und doppelklicken Sie anschließend auf das DemoCalculatorLib-Projekt, um den Verweis zum Testprojekt hinzuzufügen.

6. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf DemoCalculatorTest, und wählen Sie Als Startprojekt festlegen.

7. Erhöhen Sie im Windows Forms-Designer die Größe des Formulars auf etwa 700 x 500.

Verwenden des Steuerelements im Layout des Formulars

Um das DemoCalculator-Steuerelement in einer Anwendung zu verwenden, müssen Sie es auf einem Formular platzieren.

So verwenden Sie das Steuerelement im Layout des Formulars

1. Erweitern Sie in der Toolbox den Knoten DemoCalculatorLib-Komponenten.

2. Ziehen Sie das DemoCalculator-Steuerelement aus der Toolbox auf das Formular. Verschieben Sie das Steuerelement in die linke obere Ecke des Formulars. Wenn sich das Steuerelement in der Nähe der Grenzen des Formulars befindet, werden Ausrichtungslinien angezeigt. Diese geben den Abstand der Padding-Eigenschaft des Formulars und der Margin-Eigenschaft des Steuerelements an. Positionieren Sie das Steuerelement an der Stelle ab, die von den Ausrichtungslinien angegeben wird.

   Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von Ausrichtungslinien.

3. Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular.

4. Bewegen Sie das Button-Steuerelement um das DemoCalculator-Steuerelement, und beachten Sie, wo die Ausrichtungslinien angezeigt werden. Mit diesem Feature können Sie die Steuerelemente präzise und leicht ausrichten. Löschen Sie zum Schluss das Button-Steuerelement.

5. Klicken Sie mit der rechten Maustaste auf das DemoCalculator-Steuerelement, und klicken Sie dann auf Eigenschaften.

6. Ändern Sie den Wert der Dock-Eigenschaft in Fill.

7. Wählen Sie das Formular aus, und erweitern Sie dann den Eigenschaftenknoten Padding. Ändern Sie den Wert von All in 20.

   Die Größe des DemoCalculator-Steuerelements wird gemäß dem neuen Padding-Wert des Formulars reduziert.

8. Ändern Sie die Größe des Formulars, indem Sie die verschiedenen Ziehpunkte an unterschiedliche Positionen ziehen. Beachten Sie, wie die Größe des DemoCalculator-Steuerelements angepasst wird.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurde beschrieben, wie die Benutzeroberfläche für einen einfachen Rechner erstellt wird. Gegebenenfalls können Sie seine Funktionalität wie folgt erweitern:

• Implementieren Sie die Rechnerlogik. Dies erscheint zwar möglicherweise einfach, die Zustandsübergänge des Rechners können aber recht kompliziert sein.

• Packen Sie die Rechneranwendung für die Bereitstellung. Weitere Informationen finden Sie unter Gewusst wie: Veröffentlichen einer ClickOnce-Anwendung mit dem Webpublishing-Assistenten.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von TableLayoutPanel

Exemplarische Vorgehensweise: Hinzufügen von Smarttags zu einer Windows Forms-Komponente

Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von Ausrichtungslinien

Exemplarische Vorgehensweise: Automatisches Füllen der Toolbox mit benutzerdefinierten Komponenten

Gewusst wie: Testen des Laufzeitverhaltens eines UserControl

Problembehandlung beim Erstellen von Komponenten und Steuerelementen

Problembehandlung bei der Entwurfszeitentwicklung

Konzepte

Arten von benutzerdefinierten Steuerelementen

Weitere Ressourcen

Erstellen neuer Windows Forms

Änderungsprotokoll