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

Aktualisiert: November 2007

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.

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.

3z3f9e8b.alert_note(de-de,VS.90).gifHinweis:

Je nach den aktiven Einstellungen oder der verwendeten Version können die angezeigten Dialogfelder und Menübefehle von den in der Hilfe beschriebenen abweichen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

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.

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

So erstellen Sie das Projekt

  1. Erstellen Sie ein Projekt vom Typ Windows-Anwendung mit dem Namen LayoutExample. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines Windows-Anwendungsprojekts.

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

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

  1. Ziehen Sie zwei Button-Steuerelemente aus der Toolbox auf das Formular.

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

  3. Ändern Sie die Margin-Eigenschaft eines der beiden Steuerelemente, indem Sie den Margin-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 20 festlegen.

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

  5. Ändern Sie die Margin-Eigenschaft des ausgewählten Steuerelements, indem Sie den Margin-Eintrag im Eigenschaftenfenster erweitern und die Top-Eigenschaft auf 5 festlegen.

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

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

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

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

  2. Ändern Sie den Wert der AutoSize-Eigenschaft des Button-Steuerelements in true.

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

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

  5. Ändern Sie die Padding-Eigenschaft des GroupBox-Steuerelements, indem Sie den Padding-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 20 festlegen.

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

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

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

  2. Ändern Sie den Wert der AutoSize-Eigenschaft des Button-Steuerelements in true.

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

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

  5. Ä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.

  6. Ä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.

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

  8. Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das Formular. Positionieren Sie es in der Nähe der rechten unteren Ecke des Formulars.

  9. Ändern Sie den Wert der AutoSize-Eigenschaft des Button-Steuerelements in true.

  10. Legen Sie die Anchor-Eigenschaft des Button-Steuerelements auf Right und Bottom fest.

  11. Ä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.

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

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

  2. Legen Sie den Wert der AutoSize-Eigenschaft des Panel-Steuerelements auf true fest.

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

  4. Platzieren Sie das Button-Steuerelement in der Nähe der rechten unteren Ecke des Panel-Steuerelements.

  5. Wählen Sie das Panel-Steuerelement aus, und klicken Sie auf den rechten unteren Ziehpunkt. Vergrößern oder verkleinern Sie das Panel-Steuerelement.

    3z3f9e8b.alert_note(de-de,VS.90).gifHinweis:

    Sie können die Größe des Panel-Steuerelements bis zur Position der rechten unteren Ecke des Button-Steuerelements beliebig ändern. Dieses Verhalten wird vom Standardwert der AutoSizeMode-Eigenschaft festgelegt, d. h. von GrowOnly.

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

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

Es gibt zahlreiche weitere Layoutfeatures zum Anordnen von Steuerelementen in Windows Forms-Anwendungen. Probieren Sie beispielsweise folgende Kombinationen aus:

Community-Beiträge

Anzeigen: