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

Die präzise Platzierung von Steuerelementen auf dem Formular hat für viele Anwendungen einen hohen Stellenwert. Der Windows Forms-Designer bietet Ihnen hierfür zahlreiche Layouttools. Eines der wichtigsten Tools ist das SnapLine-Feature.

Mithilfe von Ausrichtungslinien können Sie genau erkennen, wo Steuerelemente an anderen Steuerelementen ausgerichtet werden. Darüber hinaus zeigen sie die laut den Richtlinien für die Windows-Benutzeroberfläche empfohlenen Abstände für Ränder zwischen Steuerelementen. Ausführliche Informationen finden Sie unter User Interface Design and Development.

Ausrichtungslinien erleichtern das Ausrichten von Steuerelementen und gewährleisten so ein professionelles Aussehen und Verhalten.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

• Erstellen eines Windows Forms-Projekts

• Festlegen des Abstands und der Ausrichtung von Steuerelementen mithilfe von Ausrichtungslinien

• Ausrichten an Formular- und Containerrändern

• Ausrichten an gruppierten Steuerelementen

• Verwenden von Ausrichtungslinien zum Platzieren eines Steuerelements durch Nachzeichnen seiner Größe

• Verwenden von Ausrichtungslinien beim Ziehen eines Steuerelements aus der Toolbox

• Ändern der Größe von Steuerelementen mithilfe von Ausrichtungslinien

• Ausrichten einer Bezeichnung am Text eines Steuerelements

• Verwenden von Ausrichtungslinien durch Tastaturnavigation

• Ausrichtungslinien und Layoutbereiche

• Deaktivieren von Ausrichtungslinien

Anschließend werden Sie verstehen, welche Rolle die Ausrichtungsfeatures für das Layout spielen.

Erstellen des Projekts

Zunächst wird das Projekt erstellt und das Formular eingerichtet.

So erstellen Sie das Projekt

1. Erstellen Sie ein Windows-basiertes Anwendungsprojekt mit dem Namen "SnaplineExample". Ausführliche Informationen finden Sie unter Gewusst wie: Erstellen eines Windows-Anwendungsprojekts.

2. Wählen Sie im Windows Forms-Designer das Formular aus.

Festlegen des Abstands und der Ausrichtung von Steuerelementen mithilfe von Ausrichtungslinien

Ausrichtungslinien bieten Ihnen eine genaue und intuitive Möglichkeit, Steuerelemente auf dem Formular auszurichten. Sie werden angezeigt, wenn Sie ein ausgewähltes Steuerelement oder mehrere ausgewählte Steuerelemente in die Nähe einer Position verschieben, an der sie an einem oder mehreren anderen Steuerelementen ausgerichtet würden. Die Auswahl "fängt" die vorgeschlagene Position, während Sie sie an den anderen Steuerelementen vorbei verschieben.

So ordnen Sie Steuerelemente mithilfe von Ausrichtungslinien an

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

2. Verschieben Sie das Button-Steuerelement in die rechte untere Ecke des Formulars. Beachten Sie die Ausrichtungslinien, die angezeigt werden, wenn sich das Button-Steuerelement dem unteren und rechten Rand des Formulars nähert. Diese Ausrichtungslinien zeigen den empfohlenen Abstand zwischen den Rändern des Steuerelements und denen des Formulars an.

3. Verschieben Sie das Button-Steuerelement um die Ränder des Formulars herum, und beachten Sie, wo die Ausrichtungslinien angezeigt werden. Wenn Sie fertig sind, verschieben Sie das Button-Steuerelement in die Nähe des Formularmittelpunkts.

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

5. Verschieben Sie das zweite Button-Steuerelement, bis es nahezu auf der gleichen Höhe wie das erste ist. Beachten Sie die Ausrichtungslinie, die an der Textbasislinie beider Schaltflächen angezeigt wird. Beachten Sie außerdem, dass das Steuerelement, das Sie verschieben, eine Position fängt, die exakt auf der gleichen Höhe wie das andere Steuerelement liegt.

6. Verschieben Sie das zweite Button-Steuerelement, bis es direkt über dem ersten positioniert ist. Beachten Sie die Ausrichtungslinien, die an den linken und rechten Rändern beider Schaltflächen angezeigt werden. Beachten Sie außerdem, dass das Steuerelement, das Sie verschieben, eine Position fängt, die exakt auf der gleichen Höhe wie das andere Steuerelement liegt.

7. Wählen Sie eines der Button-Steuerelemente aus, und verschieben Sie es in die Nähe des jeweils anderen, bis sie sich beinahe berühren. Beachten Sie die Ausrichtungslinie, die zwischen ihnen angezeigt wird. Dies ist der empfohlene Abstand zwischen den Rändern der Steuerelemente. Beachten Sie außerdem, dass das Steuerelement, das Sie verschieben, diese Position fängt.

8. Ziehen Sie zwei Panel-Steuerelemente aus der Toolbox auf das Formular.

9. Verschieben Sie eines der Panel-Steuerelemente, bis es nahezu auf der gleichen Höhe wie das erste ist. Beachten Sie die Ausrichtungslinien, die an den oberen und unteren Rändern beider Steuerelemente angezeigt werden. Beachten Sie außerdem, dass das Steuerelement, das Sie verschieben, eine Position fängt, die exakt auf der gleichen Höhe wie das andere Steuerelement liegt.

Ausrichten an Formular- und Containerrändern

Ausrichtungslinien unterstützen Sie dabei, Steuerelemente an Formular- und Containerrändern konsistent auszurichten.

So richten Sie Steuerelemente an Formular- und Containerrändern aus

• Wählen Sie eines der Button-Steuerelemente aus, und verschieben Sie es in die Nähe des rechten Rands des Formulars, bis eine Ausrichtungslinie angezeigt wird. Der Abstand der Ausrichtungslinie vom rechten Rand entspricht der Summe der Werte für die Margin-Eigenschaft des Steuerelements und die Padding-Eigenschaft des Formulars.

1. Ändern Sie den Wert der Margin-Eigenschaft des Button-Steuerelements, indem Sie den Margin-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 0 festlegen. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen mithilfe von Abständen, Rändern und der AutoSize-Eigenschaft.

2. Verschieben Sie das Button-Steuerelement in die Nähe des rechten Rands des Formulars, bis eine Ausrichtungslinie angezeigt wird. Dieser Abstand wird nun durch den Wert der Padding-Eigenschaft des Formulars bestimmt.

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

4. Ändern Sie den Wert der Padding-Eigenschaft des GroupBox-Steuerelements, indem Sie den Padding-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 10 festlegen.

5. Ziehen Sie ein Button-Steuerelement aus der Toolbox in das GroupBox-Steuerelement.

6. Verschieben Sie das Button-Steuerelement in die Nähe des rechten Rands des GroupBox-Steuerelements, bis eine Ausrichtungslinie angezeigt wird. Verschieben Sie das Button-Steuerelement innerhalb des GroupBox-Steuerelements, und beachten Sie, wo die Ausrichtungslinien angezeigt werden.

Ausrichten an gruppierten Steuerelementen

Mit Ausrichtungslinien können Sie gruppierte Steuerelemente sowie Steuerelemente innerhalb eines GroupBox-Steuerelements ausrichten.

So richten Sie an gruppierten Steuerelementen aus

1. Wählen Sie zwei der Steuerelemente auf dem Formular aus. Verschieben Sie die Auswahl, und beachten Sie die Ausrichtungslinien, die zwischen der Auswahl und den anderen Steuerelementen angezeigt werden.

2. Ziehen Sie ein GroupBox-Steuerelement aus der Toolbox auf das Formular.

3. Ziehen Sie ein Button-Steuerelement aus der Toolbox in das GroupBox-Steuerelement.

4. Wählen Sie eines der Button-Steuerelemente aus, und verschieben Sie es um das GroupBox-Steuerelement. Beachten Sie die Ausrichtungslinien, die an den Rändern des GroupBox-Steuerelements angezeigt werden. Beachten Sie außerdem die Ausrichtungslinien, die an den Rändern des Button-Steuerelements angezeigt werden, das im GroupBox-Steuerelement enthalten ist. Steuerelemente, die untergeordnete Elemente eines Containersteuerelements sind, unterstützen ebenfalls Ausrichtungslinien.

Verwenden von Ausrichtungslinien zum Platzieren eines Steuerelements durch Nachzeichnen seiner Größe

Ausrichtungslinien unterstützen Sie dabei, Steuerelemente auszurichten, wenn Sie sie erstmals auf einem Formular platzieren.

So verwenden Sie Ausrichtungslinien zum Platzieren eines Steuerelements durch Nachzeichnen seiner Größe

1. Klicken Sie in der Toolbox auf das Symbol für das Button-Steuerelement. Ziehen Sie es nicht auf das Formular.

2. Verschieben Sie den Mauszeiger über die Entwurfsoberfläche des Formulars. Beachten Sie, dass sich der Zeiger zu einem Fadenkreuz mit angefügtem Symbol des Button-Steuerelements ändert. Beachten Sie außerdem die Ausrichtungslinien, die angezeigt werden, um ausgerichtete Positionen für das Button-Steuerelement vorzuschlagen.

3. Halten Sie die Maustaste gedrückt.

4. Ziehen Sie den Mauszeiger um das Formular. Beachten Sie, dass eine Kontur gezeichnet wird, die die Position und die Größe des Steuerelements angibt.

5. Ziehen Sie den Mauszeiger, bis es an einem anderen Steuerelement auf dem Formular ausgerichtet wird. Beachten Sie, dass eine Ausrichtungslinie angezeigt wird.

6. Lassen Sie die Maustaste los. Das Steuerelement wird an der Position und mit der Größe erstellt, die durch die Kontur vorgegeben werden.

Verwenden von Ausrichtungslinien beim Ziehen eines Steuerelements aus der Toolbox

Ausrichtungslinien unterstützen Sie dabei, Steuerelemente auszurichten, wenn Sie sie aus der Toolbox auf das Formular ziehen.

So verwenden Sie Ausrichtungslinien beim Ziehen eines Steuerelements aus der Toolbox

1. Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular, ohne anschließend die Maustaste loszulassen.

2. Verschieben Sie den Mauszeiger über die Entwurfsoberfläche des Formulars. Beachten Sie, dass der Mauszeiger die Position angibt, an der das neue Button-Steuerelement erstellt wird.

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

4. Lassen Sie die Maustaste los. Das Steuerelement wird an der von den Ausrichtungslinien angegebenen Position erstellt.

Ändern der Größe von Steuerelementen mithilfe von Ausrichtungslinien

Ausrichtungslinien unterstützen Sie dabei, Steuerelemente auszurichten, während Sie ihre Größe ändern.

So ändern Sie die Größe eines Steuerelements mithilfe von Ausrichtungslinien

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

2. Ändern Sie die Größe des Button-Steuerelements, indem Sie auf einen der Eckziehpunkte klicken und bei gedrückter Maustaste ziehen. Ausführliche Informationen finden Sie unter Gewusst wie: Ändern der Größe von Steuerelementen in Windows Forms.

3. Ziehen Sie den Ziehpunkt, bis einer der Ränder des Button-Steuerelements an einem anderen Steuerelement ausgerichtet ist. Beachten Sie, dass eine Ausrichtungslinie angezeigt wird. Beachten Sie außerdem, dass der Ziehpunkt die von der Ausrichtungslinie angegebene Position fängt.

4. Ändern Sie die Größe des Button-Steuerelements in verschiedene Richtungen, und richten Sie den Ziehpunkt an verschiedenen Steuerelementen aus. Beachten Sie, wie die Ausrichtungslinien in verschiedenen Ausrichtungen angezeigt werden.

Ausrichten einer Bezeichnung am Text eines Steuerelements

Einige Steuerelemente verfügen über eine Ausrichtungslinie, um andere Steuerelemente am angezeigten Text auszurichten.

So richten Sie eine Bezeichnung am Text eines Steuerelements aus

1. Ziehen Sie ein TextBox-Steuerelement aus der TextBox auf das Formular. Wenn Sie das TextBox-Steuerelement auf dem Formular einfügen, klicken Sie auf das Smarttagsymbol, und wählen Sie die Option Text auf textBox1 festlegen. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Ausführen von häufigen Aufgaben mit Smarttags auf Windows Forms-Steuerelementen.

2. Ziehen Sie ein Label -Steuerelement aus der TextBox auf das Formular.

3. Ändern Sie den Wert der AutoSize-Eigenschaft des Label-Steuerelements in true. Beachten Sie, dass die Ränder des Steuerelements so angepasst werden, dass der Text darin angezeigt wird.

4. Verschieben Sie das Label-Steuerelement links neben das TextBox-Steuerelement, sodass es am unteren Rand des TextBox-Steuerelements ausgerichtet ist. Beachten Sie die Ausrichtungslinie, die an den unteren Rändern der beiden Steuerelemente angezeigt wird.

5. Verschieben Sie das Label-Steuerelement etwas nach oben, bis der Label-Text und der TextBox-Text ausgerichtet sind. Beachten Sie die anders dargestellte Ausrichtungslinie, die angibt, wann die Textfelder beider Steuerelemente ausgerichtet sind.

Verwenden von Ausrichtungslinien durch Tastaturnavigation

Ausrichtungslinien unterstützen Sie dabei, Steuerelemente auszurichten, wenn Sie sie mit den Pfeiltasten der Tastatur anordnen.

So verwenden Sie Ausrichtungslinien durch Tastaturnavigation

1. Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular. Platzieren Sie es in der oberen linken Ecke des Formulars.

2. Drücken Sie STRG+NACH-UNTEN-PFEIL. Beachten Sie, dass das Steuerelement im Formular nach unten an die erste verfügbare horizontale Ausrichtungsposition verschoben wird.

3. Drücken Sie STRG+NACH-UNTEN-PFEIL, bis das Steuerelement das Ende des Formulars erreicht. Beachten Sie die Positionen, die es einnimmt, wenn es auf dem Formular nach unten verschoben wird.

4. Drücken Sie STRG+NACH-RECHTS-PFEIL. Beachten Sie, dass das Steuerelement im Formular nach rechts an die erste verfügbare vertikale Ausrichtungsposition verschoben wird.

5. Drücken Sie STRG+NACH-RECHTS-PFEIL, bis das Steuerelement den rechten Rand des Formulars erreicht. Beachten Sie die Positionen, die es einnimmt, wenn es auf dem Formular nach rechts verschoben wird.

6. Verschieben Sie das Steuerelement mit verschiedenen Pfeiltasten auf dem Formular. Beachten Sie die Positionen, die das Steuerelement einnimmt, sowie die dabei angezeigten Ausrichtungslinien.

7. Drücken Sie UMSCHALT+beliebige Pfeiltaste, um die Größe des Button-Steuerelements in Schritten von einem Pixel zu ändern.

8. Drücken Sie STRG+UMSCHALT+beliebige Pfeiltaste, um die Größe des Button-Steuerelements in Ausrichtungslinienschritten zu ändern.

Ausrichtungslinien und Layoutbereiche

Ausrichtungslinien sind innerhalb der Layoutbereiche deaktiviert.

So deaktivieren Sie Ausrichtungslinien gezielt

1. Ziehen Sie ein TableLayoutPanel-Steuerelement aus der Toolbox auf das Formular.

2. Doppelklicken Sie auf das Button-Steuerelementsymbol in der Toolbox. Beachten Sie, dass ein neues Schaltflächensteuerelement in der ersten Zelle des TableLayoutPanel-Steuerelements angezeigt wird.

3. Doppelklicken Sie noch zweimal auf das Button-Steuerelementsymbol in der Toolbox. Dadurch verbleibt eine leere Zelle im TableLayoutPanel-Steuerelement.

4. Ziehen Sie ein Button-Steuerelement aus der Toolbox in die leere Zelle des TableLayoutPanel-Steuerelements. Beachten Sie, dass keine Ausrichtungslinien angezeigt werden.

5. Ziehen Sie das Button-Steuerelement aus dem TableLayoutPanel-Steuerelement, und verschieben Sie es um das TableLayoutPanel-Steuerelement. Beachten Sie, dass wieder Ausrichtungslinien angezeigt werden.

Deaktivieren von Ausrichtungslinien

Ausrichtungslinien sind standardmäßig aktiviert. Sie können Ausrichtungslinien gezielt oder in der Entwurfsumgebung deaktivieren.

So deaktivieren Sie Ausrichtungslinien gezielt

• Drücken Sie die ALT-TASTE, während Sie ein Steuerelement auf dem Formular verschieben.

  Beachten Sie, dass keine Ausrichtungslinien angezeigt werden und das Steuerelement keine potenziellen Ausrichtungspositionen fängt.

So deaktivieren Sie Ausrichtungslinien in der Entwurfsumgebung

1. Öffnen Sie im Menü Extras das Dialogfeld Optionen. Öffnen Sie das Dialogfeld Windows Forms-Designer. Ausführliche Informationen finden Sie unter Allgemein, Windows Forms-Designer, Dialogfeld "Optionen".

2. Wählen Sie den Knoten Allgemein aus. Ändern Sie im Abschnitt Layoutmodus die Auswahl von SnapLines in SnapToGrid.

3. Klicken Sie auf OK, um die Einstellung zu übernehmen.

4. Wählen Sie ein Steuerelement auf dem Formular aus, und verschieben Sie es um die anderen Steuerelemente. Beachten Sie, dass keine Ausrichtungslinien angezeigt werden.

Nächste Schritte

Ausrichtungslinien bieten eine intuitive Möglichkeit, Steuerelemente auf dem Formular auszurichten. Hier einige Vorschläge:

• Versuchen Sie, ein GroupBox-Steuerelement in einem anderen GroupBox-Steuerelement zu verschachteln. Platzieren Sie ein Button-Steuerelement im untergeordneten GroupBox-Steuerelement und ein weiteres im übergeordneten GroupBox-Steuerelement. Verschieben Sie die Button-Steuerelemente, um zu sehen, wie die Ausrichtungslinien Containergrenzen schneiden.

• Erstellen Sie eine Spalte mit TextBox-Steuerelementen und eine entsprechende Spalte mit Label-Steuerelementen. Legen Sie den Wert der AutoSize-Eigenschaft des Label-Steuerelements auf true fest. Verschieben Sie Label-Steuerelemente mithilfe von Ausrichtungslinien, sodass der darin enthaltene Text an dem Text in den TextBox-Steuerelementen ausgerichtet wird.

Informationen zur Gestaltung der Windows-Benutzeroberfläche finden Sie im Buch Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers, Redmond, WA: Microsoft Press, 1999 (USBN: 0-7356-0566-1) auf der MSDN-Website ..

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von FlowLayoutPanel
Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von TableLayoutPanel
Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen mithilfe von Abständen, Rändern und der AutoSize-Eigenschaft

Referenz

SnapLine

Weitere Ressourcen

Anordnen von Steuerelementen in Windows Forms