Exemplarische Vorgehensweise: Anordnen von Steuerelementen für Windows Forms mithilfe von Snaplines

Artikel
05/04/2023

Die präzise Platzierung von Steuerelementen auf dem Formular hat für viele Anwendungen einen hohen Stellenwert. Der Windows Forms Designer bietet Ihnen viele Layouttools, um dies zu erreichen. Eines der wichtigsten Tools ist SnapLine.

Snaplines zeigen Ihnen genau an, wo Steuerelemente mit anderen Steuerelementen ausgerichtet werden sollen. Außerdem werden die empfohlenen Abstände für Ränder zwischen Steuerelementen angezeigt, wie durch die Richtlinien für die Windows Benutzeroberfläche angegeben.

Snaplines erleichtern die Ausrichtung Ihrer Steuerelemente, für ein scharfes, professionelles Aussehen und Verhalten (Aussehen und Verhalten).

Erstellen des Projekts

Erstellen Sie in Visual Studio ein Windows basiertes Anwendungsprojekt namens "SnaplineExample".
Wählen Sie das Formular im Forms-Designer aus.

Platz und Ausrichten von Steuerelementen

Snaplines bieten Ihnen eine genaue und intuitive Möglichkeit, Steuerelemente auf Ihrem Formular auszurichten. Sie werden angezeigt, wenn Sie ein ausgewähltes Steuerelement oder Steuerelemente in der Nähe einer Position verschieben, die an einem anderen Steuerelement oder einer Gruppe von Steuerelementen ausgerichtet würde. Ihre Auswahl wird an der vorgeschlagenen Position "angedockt", während Sie sie über die anderen Steuerelemente verschieben.

So ordnen Sie Steuerelemente mithilfe von Ausrichtungslinien an

Ziehen Sie ein Button -Steuerelement aus der Toolbox auf das Formular.
Verschieben Sie das Button-Steuerelement in die obere rechte Ecke des Formulars. Beachten Sie die Snaplines, die angezeigt werden, wenn das Button-Steuerelement den unteren und rechten Rahmen des Formulars nähert. Diese Ausrichtungslinien zeigen den empfohlenen Abstand zwischen den Rahmen des Steuerelements und dem Formular an.
Verschieben Sie das Button-Steuerelement um die Rahmen des Formulars, und notieren Sie, wo die Ausrichtungslinien erscheinen. Wenn Sie fertig sind, verschieben Sie das Button-Steuerelement in der Nähe der Mitte des Formulars.
Ziehen Sie ein weiteres Button -Steuerelement aus der Toolbox auf das Formular.
Verschieben Sie das zweite Button-Steuerelement, bis es fast mit dem ersten Level ist. Beachten Sie die Ausrichtungslinie, die in der Textbasislinie beider Schaltflächen angezeigt wird, und beachten Sie, dass das Steuerelement, das Sie verschieben, an eine Position bewegt wird, die genau mit dem anderen Steuerelement abgleicht.
Verschieben Sie das zweite Button-Steuerelement, bis es direkt über dem ersten positioniert wird. Beachten Sie die Ausrichtungslinie, die entlang der linken und rechten Ränder beider Schaltflächen angezeigt werden, und beachten Sie, dass das Steuerelement, das Sie bewegen, an einer Position ausrichten, die genau an dem anderen Steuerelement ausgerichtet ist.
Wählen Sie eines der Button-Steuerelemente aus, und bewegen Sie sie in der Nähe des anderen, bis sie fast berührt werden. Beachten Sie die Ausrichtungslinie, die zwischen ihnen angezeigt wird. Dieser Abstand ist der empfohlene Abstand zwischen den Rahmen der Kontrollen. Beachten Sie auch, dass das Steuerelement, das Sie an diese Position verschieben, an diese Position verschiebt.
Ziehen Sie zwei Panel-Steuerelemente aus der Toolbox auf das Formular.
Verschieben Sie eines der Panel-Steuerelemente, bis sie fast mit dem ersten Level ist. Beachten Sie die Ausrichtungslinien, die entlang der oberen und unteren Ränder beider Steuerelemente angezeigt werden, und beachten Sie, dass das Steuerelement, das Sie bewegen, an eine Position bewegt wird, die genau mit dem anderen Steuerelement identisch ist.

Ausrichten an Formular- und Containerrändern

Snaplines helfen Ihnen, Ihre Steuerelemente auf Form- und Containerränder einheitlich auszurichten.

Wählen Sie eines der Button-Steuerelemente aus, und verschieben Sie es nahe an den rechten Rand des Formulars, bis eine Ausrichtungslinie angezeigt wird. Der Abstand der Ausrichtungslinie vom rechten Rahmen ist die Summe der Eigenschaft des Steuerelements Margin und der Eigenschaftswerte des Formulars Padding.

Hinweis

Wenn die Eigenschaft des Formulars Padding auf 0.0.0.0.0 festgelegt ist, gibt der Windows Forms Designer dem Formular einen schattierten Padding-Wert von 9,9,9,9.9. Um dieses Verhalten außer Kraft zu setzen, weisen Sie einen anderen Wert als 0.0.0.0 zu.
Ändern Sie den Wert der Margin-Eigenschaft des Button-Steuerelements, indem Sie im Fenster Eigenschaften den Eintrag Margin erweitern und die All-Eigenschaft auf 0 festlegen. Weitere Details finden Sie unter Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen mithilfe von Abständen, Rändern und der AutoSize-Eigenschaft.
Verschieben Sie das Button-Steuerelement in der Nähe des rechten Rahmens des Formulars, bis eine Ausrichtungslinie angezeigt wird. Dieser Abstand wird jetzt durch den Wert der Eigenschaft des Formulars Padding angegeben.
Ziehen Sie ein GroupBox -Steuerelement aus der Toolbox auf das Formular.
Ändern Sie den Wert der Padding-Eigenschaft des GroupBox-Steuerelements, indem Sie im Fenster Eigenschaften den Eintrag Padding erweitern und die All-Eigenschaft auf 10 festlegen.
Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das GroupBox-Steuerelement.
Verschieben Sie das Button-Steuerelement in der Nähe des rechten Rahmens des GroupBox-Steuerelements, bis eine Ausrichtungslinie angezeigt wird. Bewegen Sie das Button-Steuerelement innerhalb des GroupBox-Steuerelements und beachten Sie, wo die Fanglinien erscheinen.

An gruppierten Steuerelementen ausrichten

Sie können Ausrichtungslinien verwenden, um gruppierte Steuerelemente sowie Steuerelemente innerhalb eines GroupBox-Steuerelements auszurichten.

Wählen Sie zwei der Steuerelemente in Ihrem Formular aus. Verschieben Sie die Auswahl, und notieren Sie die Ausrichtungslinien, die zwischen Ihrer Auswahl und den anderen Steuerelementen angezeigt werden.
Ziehen Sie ein GroupBox -Steuerelement aus der Toolbox auf das Formular.
Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das GroupBox-Steuerelement.
Wählen Sie eines der Button-Steuerelemente aus, und bewegen Sie es um das GroupBox-Steuerelement. Beachten Sie die Ausrichtungslinien, die am Rand des GroupBox-Steuerelements angezeigt werden. Beachten Sie auch die Ausrichtungslinien, die an den Rändern des Button-Steuerelements angezeigt werden, das vom GroupBox-Steuerelement eingeschlossen ist. Steuerelemente, die untergeordnete Elemente eines Containersteuerelements sind, unterstützen auch Ausrichtungslinien.

Verwenden von Ausrichtungslinien, um ein Steuerelement zu platzieren, indem sie seine Größe herausgibt

Klicken Sie in der Toolboxauf das Symbol des Button -Steuerelements. Ziehen Sie es nicht auf das Formular.
Bewegen Sie den Mauszeiger über die Entwurfsoberfläche des Formulars. Beachten Sie, dass der Mauszeiger die Form eines Fadenkreuzes annimmt, an das das Symbol des Button -Steuerelements angefügt ist. Beachten Sie außerdem die Ausrichtungslinien, die als Vorschläge für ausgerichtete Positionen für das Button-Steuerelement angezeigt werden.
Klicken Sie, und halten Sie die Maustaste gedrückt.
Ziehen Sie den Mauszeiger um das Formular. Beachten Sie, dass eine Gliederung gezeichnet wird, die die Position und die Größe des Steuerelements angibt.
Ziehen Sie den Mauszeiger, bis es an ein anderes Steuerelement im Formular ausgerichtet ist. Beachten Sie, dass eine Ausrichtungslinie angezeigt wird, um die Ausrichtung anzugeben.
Lassen Sie die Maustaste los. Das Steuerelement wird an der Position und Größe erstellt, die durch die Gliederung angegeben wird.

Verwenden von Ausrichtungslinien beim Ziehen eines Steuerelements aus der Toolbox

Ziehen Sie ein Button-Steuerelement aus der Toolbox auf Das Formular, lassen Sie die Maustaste jedoch nicht los.
Bewegen Sie den Mauszeiger über die Entwurfsoberfläche des Formulars. Beachten Sie, dass sich der Zeiger ändert, um die Position anzugeben, an der das neue Button-Steuerelement erstellt wird.
Ziehen Sie den Mauszeiger um das Formular. Beachten Sie die Ausrichtungslinien, die angezeigt werden, um ausgerichtete Positionen für das Button-Steuerelement vorzuschlagen. Suchen Sie eine Position, die an anderen Steuerelementen ausgerichtet ist.
Lassen Sie die Maustaste los. Das Steuerelement wird an der Position erstellt, die durch die Ausrichtungslinien angegeben ist.

Ändern der Größe eines Steuerelements mithilfe von Ausrichtungslinien

Ziehen Sie ein Button -Steuerelement aus der Toolbox auf das Formular.
Ändern Sie die Größe des Button-Steuerelements, indem Sie einen der Eckziehpunkte und ziehen. Weitere Informationen finden Sie unter Gewusst wie: Ändern der Größe von Steuerelementen in Windows Forms.
Ziehen Sie den Größenziehpunkt, bis eins der Button-Rahmen des Steuerelements an einem anderen Steuerelement ausgerichtet ist. Beachten Sie, dass eine Ausrichtungslinie angezeigt wird. Beachten Sie außerdem, dass der Größenziehpunkt an die position ausgerichtet wird, die durch die Ausrichtungslinie angegeben ist.
Ändern Sie die Größe des Button-Steuerelements in unterschiedlichen Richtungen, und richten Sie den Größenziehpunkt an verschiedene Steuerelemente aus. Beachten Sie, wie die Ausrichtungslinien in verschiedenen Ausrichtungen angezeigt werden, um die Ausrichtung anzugeben.

Ausrichten einer Beschriftung an den Text eines Steuerelements

Ziehen Sie ein TextBox -Steuerelement aus der Toolbox auf das Formular. Wenn Sie das TextBox-Steuerelement auf das Formular ablegen, klicken Sie auf die Smarttag-Glyphe, und wählen Sie die Option "Text auf textBox1 festlegen " aus. Weitere Details finden Sie unter Exemplarische Vorgehensweise: Ausführen allgemeiner Aufgaben mit Designaktionen.
Ziehen Sie ein Label -Steuerelement aus der Toolbox auf das Formular.
Ändern Sie den Wert der Label -Eigenschaft des AutoSize -Steuerelements in true. Beachten Sie, dass die Rahmen des Steuerelements an den Anzeigetext angepasst werden.
Verschieben Sie das Label-Steuerelement links neben dem TextBox-Steuerelement, sodass es am unteren Rand des TextBox-Steuerelements ausgerichtet ist. Beachten Sie die Ausrichtungslinie, die am unteren Rand der beiden Steuerelemente angezeigt wird.
Verschieben Sie das Label-Steuerelement etwas nach oben, bis der Label-Text und der TextBox-Text ausgerichtet sind. Beachten Sie die anders formatierte Ausrichtungslinie, die angezeigt wird, die angibt, wann die Textfelder beider Steuerelemente ausgerichtet sind.

Ziehen Sie ein Button -Steuerelement aus der Toolbox auf das Formular. Platzieren Sie sie in der oberen linken Ecke des Formulars.
Drücken Sie Strg+Pfeil nach unten. Beachten Sie, dass das Steuerelement das Formular nach unten zur ersten verfügbaren horizontalen Ausrichtungsposition bewegt.
Drücken Sie Strg+Pfeil nach unten, bis das Steuerelement den unteren Rand des Formulars erreicht. Notieren Sie sich die Positionen, die sie belegt, während sie nach unten im Formular verschoben wird.
Drücken Sie Strg+Pfeil nach rechts. Beachten Sie, dass das Steuerelement über das Formular zur ersten verfügbaren vertikalen Ausrichtungsposition wechselt.
Drücken Sie Strg+Pfeil nach rechts, bis das Steuerelement die Seite des Formulars erreicht. Notieren Sie sich die Positionen, die sie belegt, während sie über das Formular verschoben wird.
Bewegen Sie das Steuerelement um das Formular mit einer Kombination aus Pfeiltasten. Notieren Sie sich die Positionen, die das Steuerelement belegt, und die Ausrichtungslinien, die sie begleiten.
Drücken Sie die Shift+Pfeiltasten, um die Größe des Button-Steuerelements in Schritten von einem Pixel zu ändern.
Drücken Sie die Strg+Umschalt+Pfeiltasten, um die Größe des Button-Steuerelements in Ausrichtungslinien-Schritten zu ändern.

Selektives Deaktivieren von Ausrichtungslinien

Ziehen Sie ein TableLayoutPanel -Steuerelement aus der Toolbox auf das Formular.
Doppelklicken Sie auf das Symbol des Button -Steuerelements in der Toolbox. Beachten Sie, dass ein neues Schaltflächensteuerelement in der ersten Zelle des TableLayoutPanel-Steuerelements angezeigt wird.
Doppelklicken Sie noch zweimal auf das Symbol des Button -Steuerelements in der Toolbox. Dadurch wird eine leere Zelle im TableLayoutPanel-Steuerelement verlassen.
Ziehen Sie ein Button-Steuerelement aus der Toolbox in die leere Zelle des TableLayoutPanel-Steuerelements. Beachten Sie, dass keine Ausrichtungslinien angezeigt werden.
Ziehen Sie das Button-Steuerelement aus dem TableLayoutPanel-Steuerelement, und bewegen Sie es um das TableLayoutPanel-Steuerelement. Beachten Sie, dass Ausrichtungslinien erneut angezeigt werden.

Deaktivieren von Ausrichtungslinien

Drücken Sie die Alt, und bewegen Sie ein Steuerelement um das Formular.

Es werden keine Ausrichtungslinien angezeigt, und das Steuerelement kann nicht an potenzielle Ausrichtungspositionen angedockt werden.

So deaktivieren Sie Ausrichtungslinien in der Entwurfsumgebung

Öffnen Sie über das Menü Extras das Dialogfeld Optionen. Wählen Sie Windows Forms Designer.
Wählen Sie den Knoten Allgemein aus. Ändern Sie im Abschnitt Layoutmodus die Auswahl von SnapLines (Ausrichtungslinien) in SnapToGrid.
Wählen Sie OK, um die Einstellung zu übernehmen.
Wählen Sie ein Steuerelement in Ihrem Formular aus, und bewegen Sie es um die anderen Steuerelemente. Beachten Sie, dass Ausrichtungslinien nicht angezeigt werden.

Nächste Schritte

Ausrichtungslinien bieten ein intuitives Mittel zum Ausrichten von Steuerelementen in Ihrem Formular. Mit folgenden Funktionen können Sie Ihre Fähigkeiten vertiefen:

Versuchen Sie, ein GroupBox-Steuerelement in einem anderen GroupBox-Steuerelement zu verschachteln. Platzieren Sie ein Button-Steuerelement innerhalb des untergeordneten GroupBox-Steuerelements und ein anderes innerhalb des übergeordneten GroupBox-Steuerelements. Verschieben Sie die Button-Steuerelemente, um zu sehen, wie die Ausrichtungslinien Containergrenzen überschreiten.
Erstellen Sie eine Spalte mit TextBox-Steuerelementen und eine entsprechende Spalte von Label-Steuerelementen. Setzen Sie den Wert der AutoSize-Eigenschaft des Label-Steuerelements auf true. Verwenden Sie Ausrichtungslinien, um die Label-Steuerelemente zu verschieben, damit der angezeigte Text mit dem Text in den TextBox-Steuerelementen ausgerichtet wird.