Freigeben über

Exemplarische Vorgehensweise: Gestalten von Steuerelementen mit Abständen, Rändern und der AutoSize-Eigenschaft

Die präzise Platzierung von Steuerelementen in Ihrem Formular ist für viele Anwendungen eine hohe Priorität. Der Windows Forms Designer- in Visual Studio bietet Ihnen viele Layouttools, um dies zu erreichen. Drei der wichtigsten sind die eigenschaften Margin, Paddingund AutoSize, die in allen Windows Forms-Steuerelementen vorhanden sind.

Die Margin-Eigenschaft definiert den Raum um das Steuerelement, der den Abstand festlegt, den andere Steuerelemente von den Rändern des Steuerelements einhalten sollen.

Die Padding-Eigenschaft definiert den Raum im Inneren eines Steuerelements, der den Inhalt des Steuerelements (z. B. den Wert seiner Text-Eigenschaft) in einem bestimmten Abstand vom Rand des Steuerelements hält.

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. Die Größe wird nicht kleiner als der Wert der ursprünglichen Size-Eigenschaft, und der Wert der Padding-Eigenschaft wird berücksichtigt.

Voraussetzungen

Für diese exemplarische Vorgehensweise benötigen Sie Visual Studio.

Erstelle das Projekt

  1. Erstellen Sie in Visual Studio ein Projekt vom Typ Windows-Anwendung namens LayoutExample.

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

Festlegen von Rändern für Steuerelemente

Sie können den Standardabstand zwischen Ihren Steuerelementen mithilfe der Margin-Eigenschaft festlegen. Wenn Sie ein Steuerelement nahe genug zu einem anderen Steuerelement bewegen, wird eine Ausrichtungslinie angezeigt, die die Ränder der beiden Steuerelemente anzeigt. Das Steuerelement, das Sie verschieben, dockt ebenfalls in dem durch die Ränder definierten Abstand an.

Anordnen von Steuerelementen in Ihrem Formular mithilfe der Margin-Eigenschaft

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

  2. Wählen Sie eines der Button-Steuerelemente aus, und bewegen Sie es nahe an das andere heran, bis sie sich fast berühren.

    Beachten Sie die Ausrichtungslinie, die zwischen ihnen angezeigt wird. Die Entfernung ist die Summe der Margin-Werte der beiden Steuerelemente. Das Steuerelement, das Sie verschieben, wird in diesem Abstand angedockt. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von Ausrichtungslinien.

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

  4. Wählen Sie eines der Button-Steuerelemente aus, und bewegen Sie es in die Nähe des anderen.

    Die Ausrichtungslinie, die die Summe der Randwerte definiert, ist länger und das Steuerelement dockt in einem größeren Abstand zum anderen Steuerelement an.

  5. Ändern Sie die Margin Eigenschaft des ausgewählten Steuerelements, indem Sie den Margin Eintrag im Fenster Eigenschaften erweitern und indem Sie die Top Eigenschaft auf 5setzen.

  6. Bewegen Sie das ausgewählte Steuerelement unter das andere Steuerelement und beobachten Sie, dass die Ausrichtungslinie kürzer ist. Bewegen Sie das ausgewählte Steuerelement nach links zu dem anderen Steuerelement und beobachten Sie, dass die Ausrichtungslinie den in Schritt 4 beobachteten Wert beibehält.

  7. Sie können alle Aspekte der Margin-Eigenschaft, Left, Top, Right, Bottom, auf unterschiedliche Werte festlegen oder alle auf denselben Wert mit der All-Eigenschaft festlegen.

Festlegen der Abstände für Steuerelemente

Damit Sie das exakte Layout für Ihre Anwendung erreichen, enthalten Ihre Steuerelemente oft untergeordnete Steuerelemente. Wenn Sie die Nähe des Rahmens des untergeordneten Steuerelements zum Rahmen des übergeordneten Steuerelements festlegen möchten, verwenden Sie die Padding-Eigenschaft des übergeordneten Steuerelements in Verbindung mit der Margin-Eigenschaft des untergeordneten Steuerelements. Die Padding-Eigenschaft wird auch verwendet, um die Nähe des Inhalts eines Steuerelements (z. B. die Button-Eigenschaft eines Text-Steuerelements) zu seinen Rändern zu steuern.

Anordnen von Steuerelementen auf Ihrem Formular mithilfe von Abständen

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

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

  3. Ändern Sie die Padding Eigenschaft, indem Sie den eintrag Padding im Fenster Eigenschaften erweitern und die All Eigenschaft auf 5festlegen.

    Die Steuerung wird erweitert, um Platz für die neuen Abstände zu schaffen.

  4. Ziehen Sie ein GroupBox-Steuerelement aus der Toolbox auf das Formular. Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das GroupBox-Steuerelement. Positionieren Sie das Button-Steuerelement so, dass es mit der unteren rechten Ecke des GroupBox-Steuerelements bündig 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 der Button.

  5. Ändern Sie die GroupBox-Eigenschaft des Padding-Steuerelements, indem Sie den Padding-Eintrag im Fenster Eigenschaften 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 der GroupBox-Instanz.

    Die Ausrichtungslinien werden in einem größeren Abstand zu den Rändern des GroupBox-Steuerelements angezeigt. Dieser Abstand ist die Summe aus der Button-Eigenschaft des Margin-Steuerelements und der GroupBox-Eigenschaft des Padding-Steuerelements.

Automatisches Anpassen der Größe von Steuerelementen

In einigen Anwendungen ist die Größe eines Steuerelements nicht zur Laufzeit identisch, wie es zur Entwurfszeit war. Der Text eines Button-Steuerelements kann z. B. einer Datenbank entnommen werden, und seine Länge ist nicht im Voraus bekannt.

Wenn die AutoSize-Eigenschaft auf truefestgelegt ist, wird das Steuerelement entsprechend seinem Inhalt dimensioniert. Weitere Informationen finden Sie unter Übersicht über die Eigenschaft der automatischen Größenanpassung.

Anordnen von Steuerelementen in Ihrem Formular mithilfe der AutoSize-Eigenschaft

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

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

  3. Ändern Sie die Button-Eigenschaft des Text-Steuerelements in Diese Schaltfläche hat eine lange Zeichenfolge für ihre Text-Eigenschaft.

    Wenn Sie die Änderung bestätigen, 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 Button-Eigenschaft des Text-Steuerelements in „Diese Schaltfläche hat eine lange Zeichenfolge für ihre Text-Eigenschaft“.

    Wenn Sie die Änderung bestätigen, ändert sich die Größe des Button-Steuerelements nicht von selbst und der Text wird vom rechten Rand des Steuerelements abgeschnitten.

  6. Ändern Sie die Padding Eigenschaft, indem Sie den eintrag Padding im Fenster Eigenschaften erweitern und die All Eigenschaft auf 5festlegen.

    Der Text im Inneren des Steuerelements ist auf allen vier Seiten abgeschnitten.

  7. Ändern Sie die Button-Eigenschaft des AutoSize-Steuerelements in true.

    Das Button-Steuerelement passt seine Größe selbst an, damit es die gesamte Zeichenfolge umfasst. Außerdem wurde um den Text herum ein Abstand hinzugefügt, wodurch sich das Button-Steuerelement in alle vier Richtungen ausdehnt.

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

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

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

  11. Ändern Sie die Button-Eigenschaft des Text-Steuerelements in „Diese Schaltfläche hat eine lange Zeichenfolge für ihre Text-Eigenschaft“.

Wenn Sie die Änderung bestätigen, ändert sich die Größe des Button-Steuerelements in Richtung der linken Seite. Im Allgemeinen vergrößert die automatische Dimensionierung die Größe eines Steuerelements in die Richtung, die seiner Anchor-Eigenschaftseinstellung entgegengesetzt ist.

AutoSize- und AutoSizeMode-Eigenschaften

Einige Steuerelemente unterstützen die AutoSizeMode-Eigenschaft, die Ihnen eine differenziertere Kontrolle über das automatische Dimensionierungsverhalten eines Steuerelements ermöglicht.

Verwenden der AutoSizeMode-Eigenschaft

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

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

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

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

  5. Wählen Sie das Panel-Steuerelement aus, und greifen Sie den unteren rechten Ziehpunkt für die Dimensionierung. Ändern Sie die Größe des Panel-Steuerelements, um es zu vergrößern oder zu verkleinern.

    Hinweis

    Sie können die Größe des Panel Steuerelements frei ändern, aber sie kann nicht kleiner als die Position der unteren rechten Ecke des steuerelements Button sein. Dieses Verhalten wird durch den Standardwert der AutoSizeMode-Eigenschaft angegeben, die GrowOnlyist.

  6. Legen Sie den Wert der Panel-Eigenschaft des AutoSizeMode-Steuerelements auf GrowAndShrink fest.

    Das Panel-Steuerelement ändert seine Größe so weit, 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 obere linke Ecke des Panel-Steuerelements.

    Das Panel-Steuerelement passt seine Größe an die neue Position des Button-Steuerelements an.

Nächste Schritte

Es gibt viele weitere Layoutfeatures zum Anordnen von Steuerelementen in Ihren Windows Forms-Anwendungen. Hier sind einige Kombinationen, die Sie möglicherweise ausprobieren:

Siehe auch