Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen mithilfe von Abständen, Rändern und der AutoSize-Eigenschaft
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. Drei der wichtigsten Tools sind die Eigenschaften Margin, Padding und AutoSize, über die jedes Windows Forms-Steuerelement verfügt.
Die Margin-Eigenschaft definiert den Bereich um das Steuerelement, durch den andere Steuerelemente in einem bestimmten Abstand von den Rändern des Steuerelements entfernt bleiben.
Die Padding-Eigenschaft definiert den Bereich innerhalb eines Steuerelements, durch den der Inhalt des Steuerelements (z. B. der Wert seiner Text-Eigenschaft) in einem bestimmten Abstand von den Rändern des Steuerelements entfernt bleibt.
Die folgende Abbildung zeigt die Padding-Eigenschaft und die Margin-Eigenschaft für ein Steuerelement.
.gif "Ränder und Abstände bei Windows Forms-Steuerelementen")
Die AutoSize-Eigenschaft weist ein Steuerelement an, seine Größe automatisch an seinen Inhalt anzupassen. Seine Größe entspricht jedoch mindestens dem Wert der ursprünglichen Size-Eigenschaft. Außerdem wird bei der Anpassung der Wert der Padding-Eigenschaft berücksichtigt.
Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:
Erstellen eines Windows Forms-Projekts
Festlegen von Rändern für die Steuerelemente
Festlegen eines Abstands für die Steuerelemente
Automatisches Anpassen der Größe der Steuerelemente
Anschließend werden Sie verstehen, welche Rolle diese wichtigen Layoutfeatures spielen.
Tipp
Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.
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 Projekts
Zunächst wird das Projekt erstellt und das Formular eingerichtet.
So erstellen Sie das Projekt
Erstellen Sie ein Projekt vom Typ Windows-Anwendung mit dem Namen LayoutExample. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen Windows Forms-Anwendungsprojekts.
Wählen Sie im Windows Forms-Designer das Formular aus.
Festlegen von Rändern für die Steuerelemente
Sie können den standardmäßigen Abstand zwischen den Steuerelementen mithilfe der Margin-Eigenschaft festlegen. Wenn Sie ein Steuerelement nahe genug an ein anderes Steuerelement verschieben, wird eine Ausrichtungslinie angezeigt, die die Ränder zwischen den beiden Steuerelement angibt. Das Steuerelement, das Sie verschieben, wird ebenfalls mit dem von den Rändern definierten Abstand ausgerichtet.
So ordnen Sie Steuerelemente auf dem Formular mithilfe der Margin-Eigenschaft an
Ziehen Sie zwei Button-Steuerelemente aus der Toolbox auf das Formular.
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. Dieser Abstand entspricht der Summe der Margin-Werte der beiden Steuerelemente. Das Steuerelement, das Sie verschieben, wird mit diesem Abstand ausgerichtet. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von Ausrichtungslinien.
Ändern Sie die Margin-Eigenschaft eines der beiden Steuerelemente, indem Sie den Margin-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 20 festlegen.
Wählen Sie eines der Button-Steuerelemente aus, und verschieben Sie es in die Nähe des anderen.
Die Ausrichtungslinie, die die Summer der Werte für die Ränder definiert, ist länger, d. h., das Steuerelement wird mit einem größeren Abstand zum anderen Steuerelement ausgerichtet.
Ändern Sie die Margin-Eigenschaft des ausgewählten Steuerelements, indem Sie den Margin-Eintrag im Eigenschaftenfenster erweitern und die Top-Eigenschaft auf 5 festlegen.
Verschieben Sie das ausgewählte Steuerelement unter das andere Steuerelement, und beachten Sie, dass die Ausrichtungslinie kürzer ist. Verschieben Sie das ausgewählte Steuerelement links neben das andere Steuerelement, und beobachten Sie, dass die Ausrichtungslinie den Wert aus Schritt 4 beibehält.
Sie können für alle Aspekte der Margin-Eigenschaft, d. h. für Left, Top, Right und Bottom, verschiedene Werte festlegen oder mit der All-Eigenschaft für alle denselben Wert festlegen.
Festlegen eines Abstands für die Steuerelemente
Um das für die Anwendung erforderliche präzise Layout zu erreichen, enthalten die Steuerelemente häufig untergeordnete Steuerelemente. Wenn Sie den Abstand zwischen den Rändern des untergeordneten Steuerelements und den Rändern des übergeordneten Steuerelements festlegen möchten, verwenden Sie die Padding-Eigenschaft des übergeordneten Steuerelements zusammen mit der Margin-Eigenschaft des untergeordneten Steuerelements. Die Padding-Eigenschaft wird außerdem verwendet, um den Abstand des Inhalts eines Steuerelements (z. B. die Text-Eigenschaft eines Button-Steuerelements) zu seinen Rändern zu steuern.
So ordnen Sie Steuerelemente auf dem Formular mithilfe des Abstands an
Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular.
Ändern Sie den Wert der AutoSize-Eigenschaft des Button-Steuerelements in true.
Ändern Sie die Padding-Eigenschaft, indem Sie den Padding-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 5 festlegen.
Das Steuerelement wird gemäß dem neuen Abstand erweitert.
Ziehen Sie ein GroupBox-Steuerelement aus der Toolbox auf das Formular. Ziehen Sie ein Button-Steuerelement aus der Toolbox in das GroupBox-Steuerelement. Positionieren Sie das Button-Steuerelement so, dass es an der rechten unteren Ecke des GroupBox-Steuerelements ausgerichtet ist.
Beachten Sie die Ausrichtungslinien, die angezeigt werden, wenn sich das Button-Steuerelement dem unteren und rechten Rand des GroupBox-Steuerelements nähert. Diese Ausrichtungslinien entsprechen der Margin-Eigenschaft des Button.
Ändern Sie die Padding-Eigenschaft des GroupBox-Steuerelements, indem Sie den Padding-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 20 festlegen.
Wählen Sie das Button-Steuerelement innerhalb des GroupBox-Steuerelements aus, und verschieben Sie es in Richtung der Mitte des GroupBox-Steuerelements.
Die Ausrichtungslinien werden mit einem größeren Abstand von den Rändern des GroupBox-Steuerelements angezeigt. Dieser Abstand entspricht der Summe der Margin-Eigenschaft des Button-Steuerelements und der Padding-Eigenschaft des GroupBox-Steuerelements.
Automatisches Anpassen der Größe der Steuerelemente
In einigen Anwendungen ist die Größe eines Steuerelements zur Laufzeit nicht dieselbe wie zur Entwurfszeit. Der Text eines Button-Steuerelements kann beispielsweise aus einer Datenbank abgerufen werden, ohne dass seine Länge vorab bekannt ist.
Wenn die AutoSize-Eigenschaft auf true festgelegt ist, passt sich die Größe des Steuerelements an seinen Inhalt an. Weitere Informationen finden Sie unter Übersicht über die AutoSize-Eigenschaft.
So ordnen Sie Steuerelemente auf dem Formular mithilfe der AutoSize-Eigenschaft an
Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular.
Ändern Sie den Wert der AutoSize-Eigenschaft des Button-Steuerelements in true.
Ändern Sie die Text-Eigenschaft des Button-Steuerelements in "This button has a long string for its Text property".
Wenn Sie die Änderung anwenden, passt sich die Größe des Button-Steuerelements an den neuen Text an.
Ziehen Sie ein weiteres Button-Steuerelement aus der Toolbox auf das Formular.
Ändern Sie die Text-Eigenschaft des Button-Steuerelements in "This button has a long string for its Text property".
Wenn Sie die Änderung anwenden, passt sich die Größe des Button-Steuerelements nicht an, und der Text wird am rechten Rand des Steuerelements abgeschnitten.
Ändern Sie die Padding-Eigenschaft, indem Sie den Padding-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 5 festlegen.
Der Text innerhalb des Steuerelements wird an allen vier Seiten abgeschnitten.
Ändern Sie die AutoSize-Eigenschaft des Button-Steuerelements in true.
Die Größe des Button-Steuerelements passt sich an die Zeichenfolge an, sodass es diese vollständig umschließt. Zudem wurde um den Text herum ein Abstand hinzugefügt, wodurch das Button-Steuerelement in alle vier Richtungen erweitert wird.
Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular. Positionieren Sie es in der Nähe der rechten unteren Ecke des Formulars.
Ändern Sie den Wert der AutoSize-Eigenschaft des Button-Steuerelements in true.
Legen Sie die Anchor-Eigenschaft des Button-Steuerelements auf Right und Bottom fest.
Ändern Sie die Text-Eigenschaft des Button-Steuerelements in "This button has a long string for its Text property".
Wenn Sie die Änderung anwenden, passt sich die Größe des Button-Steuerelements nach links an. Im Allgemeinen bewirkt die automatische Größenanpassung, dass sich die Größe eines Steuerelements in entgegengesetzter Richtung zur Einstellung der Anchor-Eigenschaft erhöht.
AutoSize-Eigenschaft und AutoSizeMode-Eigenschaft
Einige Steuerelemente unterstützen die AutoSizeMode-Eigenschaft, mit der Sie die automatische Anpassung eines Steuerelements genauer steuern können.
So verwenden Sie die AutoSizeMode-Eigenschaft
Ziehen Sie ein Panel-Steuerelement aus der Toolbox auf das Formular.
Legen Sie den Wert der AutoSize-Eigenschaft des Panel-Steuerelements auf true fest.
Ziehen Sie ein Button-Steuerelement aus der Toolbox in das Panel-Steuerelement.
Platzieren Sie das Button-Steuerelement in der Nähe der rechten unteren Ecke des Panel-Steuerelements.
Wählen Sie das Panel-Steuerelement aus, und klicken Sie auf den rechten unteren Ziehpunkt. Vergrößern oder verkleinern Sie das Panel-Steuerelement.
Legen Sie den Wert der AutoSizeMode-Eigenschaft des Panel-Steuerelements auf GrowAndShrink fest.
Die Größe des Panel-Steuerelements passt sich so an, dass es das Button-Steuerelement umgibt. Sie können die Größe des Panel-Steuerelements nicht ändern.
Ziehen Sie das Button-Steuerelement in die linke obere Ecke des Panel-Steuerelements.
Die Größe des Panel-Steuerelements passt sich an die neue Position des Button-Steuerelements an.
Nächste Schritte
Es gibt zahlreiche weitere Layoutfeatures zum Anordnen von Steuerelementen in Windows Forms-Anwendungen. Probieren Sie beispielsweise folgende Kombinationen aus:
Erstellen Sie ein Formular mithilfe eines TableLayoutPanel-Steuerelements. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von TableLayoutPanel. Versuchen Sie, die Werte der Padding-Eigenschaft des TableLayoutPanel-Steuerelements sowie die Margin-Eigenschaft der untergeordneten Steuerelemente zu ändern.
Versuchen Sie dies mit einem FlowLayoutPanel-Steuerelement. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von FlowLayoutPanel.
Docken Sie untergeordnete Steuerelemente in einem Panel-Steuerelement an. Die Padding-Eigenschaft ist eine allgemeinere Variante der DockPadding-Eigenschaft. Sie können sich hiervon überzeugen, indem Sie ein untergeordnetes Steuerelement in ein Panel-Steuerelement einfügen und die Dock-Eigenschaft des untergeordneten Steuerelements auf Fill festlegen. Legen Sie die Padding-Eigenschaft des Panel-Steuerelements auf verschiedene Werte fest, und beachten Sie die Auswirkung.