Freigeben über

Lernprogramm: Erste Schritte mit Dem Windows Forms-Designer

  • Artikel

Der Windows Forms-Designer bietet viele Tools zum Erstellen von Windows Forms-Anwendungen. In diesem Artikel wird veranschaulicht, wie Sie eine App mithilfe der verschiedenen Vom Designer bereitgestellten Tools erstellen, einschließlich der folgenden Aufgaben:

  • Anordnen von Steuerelementen mithilfe von Ausrichtungslinien
  • Ausführen von Designeraufgaben mithilfe von Smarttags.
  • Legen Sie Ränder und Abstand für Steuerelemente fest.
  • Ordnen Sie Steuerelemente mithilfe eines TableLayoutPanel-Steuerelements an.
  • Partitionieren Sie das Layout Ihres Steuerelements mithilfe eines SplitContainer-Steuerelements.
  • Navigieren Sie im Layout mit dem Dokumentgliederungsfenster.
  • Positionieren von Steuerelementen mit angezeigten Informationen zu Größe und Speicherort
  • Legen Sie Eigenschaftenwerte mithilfe des Eigenschaftenfensters fest.

Wenn Sie fertig sind, verfügen Sie über ein benutzerdefiniertes Steuerelement, das mithilfe vieler der layoutfeatures im Windows Forms-Designer zusammengestellt wurde. Dieses Steuerelement implementiert die Benutzeroberfläche (UI) für einen einfachen Rechner. Die folgende Abbildung zeigt das allgemeine Layout des Rechnersteuerelements:

Screenshot der fertigen Benutzeroberfläche für das Rechnersteuerelement.

Tipp

Wenn Sie ein C++-Entwickler sind und nach einem Lernprogramm suchen, das Sie beim Erstellen einer Windows-App mit Formularen und Steuerelementen unterstützt, lesen Sie Erstellen einer formularbasierten MFC-Anwendung. Allgemeinere Informationen finden Sie unter Übersicht über die Windows-Programmierung in C++-.

Erstellen des Projekts für das benutzerdefinierte Steuerelement

Der erste Schritt ist, das Projekt für das Steuerelement "DemoCalculator" zu erstellen.

  1. Öffnen Sie Visual Studio, und erstellen Sie eine neue Windows Forms Control Library Projekt, indem Sie die .NET Framework-Vorlage für C# oder Visual Basic verwenden. Nennen Sie das Projekt DemoCalculatorLib.

    Screenshot der Vorlage

  2. Um die Datei umzubenennen, klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf UserControl1.vb oder UserControl1.cs, wählen Sie Umbenennen aus, und ändern Sie den Dateinamen in DemoCalculator.vb oder DemoCalculator.cs. Wählen Sie Ja aus, wenn Sie gefragt werden, ob Sie alle Verweise auf das Codeelement "UserControl1" umbenennen möchten.

Der Windows Forms-Designer zeigt 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 auf der Designeroberfläche platzieren. Weitere Informationen zu benutzerdefinierten Steuerelementen finden Sie unter Sorten von benutzerdefinierten Steuerelementen.

Entwerfen des Steuerelementlayouts

Das DemoCalculator-Steuerelement enthält mehrere Windows Forms-Steuerelemente. In diesem Verfahren ordnen Sie die Steuerelemente mithilfe des Windows Forms-Designers an.

  1. Vergrößern Sie das DemoCalculator-Steuerelement im Windows Forms-Designer, indem Sie den Größenziehpunkt in der unteren rechten Ecke auswählen und ihn nach unten und rechts ziehen. Suchen Sie in der unteren rechten Ecke von Visual Studio die Größen- und Positionsinformationen für Steuerelemente. Legen Sie die Größe des Steuerelements auf Breite 1000 und Höhe 800 fest, indem Sie die Größeninformationen beim Ändern der Größe des Steuerelements ansehen. Sie können auch nach unten im Fenster Eigenschaften scrollen, das in der Regel an die untere rechte Ecke angedockt ist, und die Werte manuell in die Eigenschaft Größe eingeben.

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

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

    Tipp

    Das SplitContainer-Steuerelement passt sich selbst der Größe des DemoCalculator-Steuerelements an. Sehen Sie sich das Fenster Eigenschaften an, um die Eigenschafteneinstellungen für das SplitContainer-Steuerelement anzuzeigen. Suchen Sie die Dock-Eigenschaft. Der Wert ist DockStyle.Fill, was bedeutet, dass sich das Steuerelement SplitContainer automatisch an die Randbereiche des DemoCalculator-Steuerelements anpasst. Ändern Sie die Größe des DemoCalculator-Steuerelements, um dieses Verhalten zu überprüfen.

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

    Das SplitContainer-Steuerelement wird auf die Standardgröße verkleinert und richtet sich nicht mehr nach der Größe des DemoCalculator-Steuerelements.

  4. Wählen Sie die Smarttag-Glyphe (SmartTag-Glyphe) in der oberen rechten Ecke des SplitContainer-Steuerelements aus. Wählen Sie In übergeordnetem Container andocken aus, um die Dock-Eigenschaft auf Fill festzulegen.

    Das SplitContainer-Steuerelement wird an die Begrenzungen des DemoCalculator-Steuerelements angedockt.

    Anmerkung

    Mehrere Steuerelemente bieten Smarttags, um das Design zu erleichtern. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Ausführen von allgemeinen Aufgaben mithilfe von Smart Tags in Windows Forms-Steuerelementen.

  5. Wählen Sie den vertikalen Rahmen zwischen den Bereichen aus, und ziehen Sie ihn nach rechts, sodass der linke Bereich den größten Teil des Platzes einnimmt.

    Die SplitContainer teilt das DemoCalculator-Steuerelement in zwei Felder, die durch einen verschiebbaren Rahmen getrennt sind. Das Panel auf der linken Seite enthält die Rechnerschaltflächen und -anzeige, und das Panel auf der rechten Seite zeigt einen Datensatz der arithmetischen Vorgänge, die vom Benutzer ausgeführt werden.

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

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

  8. Wählen Sie die Smarttag-Glyphe des ListView Steuerelements aus. Ändern Sie im Smarttagbereich die Einstellung View in Details.

  9. Wählen Sie im Smarttagpanel Spalten bearbeiten aus.

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

  10. Wählen Sie im Dialogfeld ColumnHeader-Auflistungs-Editor Hinzufügen aus,um dem ListView-Steuerelement eine Spalte hinzuzufügen. Ändern Sie den Wert der Text-Eigenschaft der Spalte in Verlauf. Wählen Sie OK aus, um die Spalte zu erstellen.

  11. Wählen Sie im Smarttagpanel die Option In übergeordnetem Container andocken und dann die Smarttag-Glyphe aus, um das Smarttagpanel zu schließen.

  12. Ziehen Sie ein TableLayoutPanel-Steuerelement aus der Toolbox im Knoten Container in das linke Panel des SplitContainer-Steuerelements.

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

  13. Wählen Sie im Smarttagpanel Zeilen und Spalten bearbeiten aus.

    Das Dialogfeld Spalten- und Zeilenformatvorlagen wird geöffnet.

  14. Wählen Sie die Schaltfläche Hinzufügen aus, bis fünf Spalten angezeigt werden. Wählen Sie alle fünf Spalten aus, und wählen Sie dann im Feld Größentyp die Option Prozent aus. Legen Sie den Wert Percent auf 20fest. Mit dieser Aktion wird jede Spalte auf dieselbe Breite festgelegt.

  15. Wählen Sie unter Anzeigen die Option Zeilen aus.

  16. Wählen Sie und fügen Sie hinzu, bis fünf Zeilen angezeigt werden. Wählen Sie alle fünf Zeilen aus, und wählen Sie dann im Feld Größentyp die Option Prozent aus. Legen Sie den Wert Percent auf 20fest. Mit dieser Aktion wird jede Zeile auf dieselbe Höhe festgelegt.

  17. Wählen Sie OK aus, um Ihre Änderungen zu akzeptieren, und wählen Sie dann die Smarttag-Glyphe aus, um den Smarttagbereich zu schließen.

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

Steuerelement befüllen

Nachdem das Layout des Steuerelements eingerichtet wurde, können Sie das DemoCalculator-Steuerelement mit Schaltflächen und einer Anzeige auffüllen.

  1. Wählen Sie in der Toolbox das Steuerelement-Symbol TextBox aus.

    Ein TextBox-Steuerelement wird in der ersten Zelle des TableLayoutPanel-Steuerelements platziert.

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

    Das TextBox-Steuerelement wechselt zu einer Position, die in seiner Zeile zentriert ist.

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

    Das TextBox-Steuerelement wird horizontal erweitert und umfasst anschließend alle fünf Spalten.

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

  5. Erweitern Sie im Eigenschaftenfenster den Font-Eigenschaftsknoten. Legen Sie Size auf 14fest, und legen Sie Bold auf true für das TextBox-Steuerelement fest.

  6. Wählen Sie das Steuerelement TableLayoutPanel aus.

  7. Wählen Sie in Toolbox-das Symbol Button aus.

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

  8. Wählen Sie in Toolbox-das symbol Button viermal aus, um die zweite Zeile des TableLayoutPanel-Steuerelements aufzufüllen.

  9. Wählen Sie alle fünf Button Steuerelemente aus, indem Sie sie auswählen, während Sie die Umschalttaste gedrückt halten. Drücken Sie STRG+C, um die Button-Steuerelemente in die Zwischenablage zu kopieren.

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

  11. Markieren Sie alle 20 Button-Steuerelemente, indem Sie sie auswählen, während Sie die UMSCHALTTASTE gedrückt halten.

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

    Alle Button-Steuerelemente docken an, um ihre enthaltenen Zellen zu füllen.

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

    Alle Button Steuerelemente sind kleiner, um einen größeren Rand dazwischen zu erstellen.

  14. Wählen Sie Schaltfläche10 und Schaltfläche20aus, und drücken Sie dann Löschen-Taste, um sie aus dem Layout zu entfernen.

  15. Wählen Sie Schaltfläche5 und Schaltfläche15aus, und ändern Sie dann den Wert ihrer RowSpan-Eigenschaft in 2. Diese Schaltflächen stellen die Schaltflächen " löschen" und "=" für das DemoCalculator-Steuerelement dar.

Verwenden des Dokumentgliederungsfensters

Wenn Ihr Steuerelement oder Formular mit mehreren Steuerelementen gefüllt ist, ist es möglicherweise einfacher, mit dem Fenster „Dokumentgliederung“ durch Ihr Layout zu navigieren.

  1. Wählen Sie in der Menüleiste Ansicht>Weitere Fenster>Dokumentgliederung. Oder drücken Sie auf der Tastatur STRG+ALT-+T-.

    Das Fenster „Dokumentgliederung“ zeigt eine Strukturansicht des DemoCalculator-Steuerelements und der zugehörigen Steuerelemente an. Containersteuerelemente wie SplitContainer zeigen ihre untergeordneten Steuerelemente als Unterknoten in der Struktur an. Sie können Steuerelemente auch mithilfe des Fensters "Dokumentgliederung" umbenennen.

  2. Klicken Sie im Fenster Dokumentgliederung mit der rechten Maustaste auf button1, und wählen Sie dann Umbenennen (Tastatur: F2) aus. Ändern Sie den Namen in "sevenButton".

  3. Benutzen Sie das Fenster Dokumentgliederung, um die Button-Steuerelemente des vom Designer generierten Namens gemäß der folgenden Liste in den Produktionsnamen umzubenennen:

    • button1 in sevenButton

    • button2 in eightButton

    • button3 in nineButton

    • button4 in divisionButton

    • button5 in clearButton

    • button6 in fourButton

    • button7 in fiveButton

    • button8 in sixButton

    • button9 in multiplicationButton

    • button11 in oneButton

    • button12 in twoButton

    • button13 in threeButton

    • button14 in subtractionButton

    • button15 in equalsButton

    • button16 in zeroButton

    • button17 in changeSignButton

    • button18 in decimalButton

    • button19 in additionButton

  4. Ändern Sie im Fenster Dokumentengliederung und im Eigenschaftenfenster den Text-Eigenschaftswert für jeden Button-Steuerelementnamen gemäß der folgenden Liste:

    • Ändern Sie die Texteigenschaft des sevenButton-Steuerelements in 7.

    • Ändern Sie die Texteigenschaft des eightButton-Steuerelements in 8.

    • Ändern Sie die Texteigenschaft des nineButton-Steuerelements in 9.

    • Ändern Sie die Texteigenschaft des divisionButton-Steuerelements in / (Schrägstrich).

    • Ändern Sie die Texteigenschaft des clearButton-Steuerelements in Löschen.

    • Ändern Sie die Texteigenschaft des fourButton-Steuerelements in 4.

    • Ändern Sie die Texteigenschaft des fiveButton-Steuerelements in 5.

    • Ändern Sie die Texteigenschaft des sixButton-Steuerelements in 6.

    • Ändern Sie die Texteigenschaft der Multiplikationstaste auf * (Sternchen).

    • Ändern Sie die OneButton-Kontrolltexteigenschaft in 1

    • Ändern Sie die Texteigenschaft des twoButton-Steuerelements in 2.

    • Ändern Sie die Texteigenschaft des threeButton-Steuerelements in 3.

    • Ändern Sie die Texteigenschaft des subtractionButton-Steuerelements in - (Bindestrich).

    • Ändern Sie die Texteigenschaft des equalsButton-Steuerelements in = (Gleichheitszeichen).

    • Ändern Sie die Texteigenschaft des Steuerelements ZeroButton auf 0.

    • Ändern Sie die Texteigenschaft des changeSignButton-Steuerelements in +/-.

    • Ändern Sie die Texteigenschaft des decimalButton-Steuerelements in . (Punkt)

    • Ändern Sie die Texteigenschaft des Steuerelements 'AdditionButton' in + (Pluszeichen).

  5. Wählen Sie in der Designeroberfläche alle Button-Steuerelemente, indem Sie sie auswählen, während Sie die UMSCHALTTASTE gedrückt halten.

  6. Erweitern Sie im Eigenschaftenfenster den Font-Eigenschaftsknoten. Legen Sie Size auf 14fest, und legen Sie Bold auf 'true' für alle Button Steuerelemente fest.

Dieser Satz von Anweisungen schließt den Entwurf des DemoCalculator-Steuerelements ab. Alles, was bleibt, besteht darin, die Rechnerlogik bereitzustellen.

Implementieren von Ereignishandlern

Die Schaltflächen im DemoCalculator-Steuerelement verfügen über Ereignishandler, die zum Implementieren eines Großteils der Rechnerlogik verwendet werden können. Mit dem Windows Forms-Designer können Sie die Stubs aller Ereignishandler für alle Schaltflächen mit einer einzigen Auswahl implementieren.

  1. Wählen Sie in der Designeroberfläche alle Button-Steuerelemente, indem Sie sie auswählen, während Sie die UMSCHALTTASTE gedrückt halten.

  2. Wählen Sie eines der Button-Steuerelemente aus.

    Der Code-Editor wird mit den vom Designer generierten Ereignishandlern geöffnet.

Da sich dieses Lernprogramm auf den Designer konzentriert, werden die Implementierungsdetails der Rechnerfunktionalität weggelassen.

Testen des Steuerelements

Da das DemoCalculator-Steuerelement von der UserControl Klasse erbt, können Sie sein Verhalten mit dem UserControl Test Containertesten. Weitere Informationen finden Sie unter So testen Sie das Laufzeitverhalten eines Benutzersteuerelements.

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

  2. Wählen Sie den Rahmen zwischen den SplitContainer Bereichen aus, und ziehen Sie ihn nach links und rechts. TableLayoutPanel und alle untergeordneten Steuerelemente werden an den verfügbaren Platz angepasst.

  3. Wenn Sie mit dem Testen des Steuerelements fertig sind, wählen Sie Schließenaus.

Verwenden des Steuerelements in einem Formular

Das DemoCalculator-Steuerelement kann in anderen zusammengesetzten Steuerelementen oder in einem Formular verwendet werden. Das folgende Verfahren beschreibt, wie sie verwendet wird.

Erstellen des Projekts

Der erste Schritt besteht darin, das Anwendungsprojekt zu erstellen. Sie verwenden dieses Projekt, um die Anwendung zu erstellen, die Ihr benutzerdefiniertes Steuerelement anzeigt.

  1. Fügen Sie der vorhandenen Lösung ein neues Windows Forms App (.NET Framework) Projekt hinzu, und nennen Sie es DemoCalculatorTest.

  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das DemoCalculatorTest-Projekt, und wählen Sie dann Hinzufügen>Verweis aus, um das Dialogfeld Verweis-Manager zu öffnen.

  3. Wechseln Sie zur Registerkarte Projekte, und wählen Sie dann das DemoCalculatorLib-Projekt aus, um den Verweis auf das Testprojekt hinzuzufügen.

  4. Klicken Sie im Lösungs-Explorermit der rechten Maustaste auf DemoCalculatorTest, und wählen Sie dann Als Startprojekt festlegenaus.

  5. Erhöhen Sie im Windows Forms-Designer die Größe des Formulars auf ca. 1400 x 1000.

Verwenden des Steuerelements im Formularlayout

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

  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 obere linke Ecke des Formulars. Wenn sich das Steuerelement in der Nähe der Formularbegrenzungen befindet, erscheinen Ausrichtungslinien. Ausrichtungslinien geben den Abstand zwischen der Padding-Eigenschaft des Formulars und der Margin-Eigenschaft des Steuerelements an. Positionieren Sie das Steuerelement an der durch die Ausrichtungslinien angegebenen Position.

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

  3. Ziehen Sie ein Button-Steuerelement aus der Toolbox, und legen Sie es auf dem Formular ab.

  4. Verschieben Sie das Button-Steuerelement um das DemoCalculator-Steuerelement, und beobachten Sie, wo die Ausrichtungslinien angezeigt werden. Sie können Ihre Steuerelemente präzise und einfach mithilfe dieses Features ausrichten. Löschen Sie das steuerelement Button, wenn Sie fertig sind.

  5. Klicken Sie mit der rechten Maustaste auf das DemoCalculator-Steuerelement, und wählen Sie Eigenschaften aus.

  6. Ändern Sie den Wert der eigenschaft Dock in Fill.

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

    Die Größe des DemoCalculator-Steuerelements wird reduziert, um den neuen Wert Padding des Formulars zu unterstützen.

  8. Ändern Sie die Größe des Formulars, indem Sie die verschiedenen Größenziehpunkte an verschiedene Positionen ziehen. Beobachten Sie, wie die Größe des DemoCalculator-Steuerelements verändert wird, um zu passen.

Nächste Schritte

In diesem Artikel wurde gezeigt, wie Sie die Benutzeroberfläche für einen einfachen Rechner erstellen. Um den Vorgang fortzusetzen, können Sie die Funktionalität erweitern, indem Sie die Rechnerlogik implementieren, und dann die App mithilfe von ClickOnce-veröffentlichen. Oder fahren Sie mit einem anderen Tutorial fort, in dem Sie mithilfe von Windows Forms eine Bildanzeige erstellen.

Siehe auch