Exemplarische Vorgehensweise: Erstellen eines in der Größe veränderbaren Windows Forms für die Dateneingabe

Ein Formular, das in der Größe ordnungsgemäß angepasst wird, kann die Übersichtlichkeit der Benutzeroberfläche verbessern.

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie ein Layout erstellt wird, das sich proportional anpasst, wenn der Benutzer die Größe des Formulars ändert. Sie implementieren mit dem TableLayoutPanel-Steuerelement ein Dateneingabeformular für Kontaktinformationen.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

• Erstellen des Projekts

• Erstellen des Layoutbereichs

• Einrichten des Layoutrasters

• Erstellen der Namensfelder

• Erstellen der Adressfelder

• Erstellen der Telefonnummernfelder

• Erstellen des Notizenfelds

Wenn Sie fertig sind, sieht das Formular etwa folgendermaßen aus:

Informationen zum Kopieren des Codes in diesem Thema als einzelne Auflistung finden Sie unter Gewusst wie: Erstellen von in der Größe veränderbaren Windows Forms für die Dateneingabe.

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 muss das Anwendungsprojekt erstellt werden. Dieses Projekt wird verwendet, um die Anwendung zu erstellen, die das Dateneingabeformular enthält.

So erstellen Sie das Projekt

• Erstellen Sie ein Windows-Anwendungsprojekt mit dem Namen DemoDataEntryLayout. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines Windows-Anwendungsprojekts.

Erstellen des Layoutbereichs

Der nächste Schritt besteht darin, den Layoutbereich zu erstellen, der das in der Größe veränderbare Layout enthält.

So erstellen Sie den Layoutbereich

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

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

3. Ändern Sie im Eigenschaftenfenster den Wert der Dock-Eigenschaft des TableLayoutPanel-Steuerelements auf Fill.

4. Ändern Sie den Wert der ColumnCount-Eigenschaft in 4 und den Wert der RowCount-Eigenschaft in 6.

Einrichten des Layoutrasters

Der nächste Schritt besteht darin, das Layoutraster festzulegen. Legen Sie Eigenschaften in der ColumnStyles-Auflistung und RowStyles-Auflistung fest, um zu bestimmen, wie Zeilen und Spalten angepasst werden, wenn sich die Größe des Formulars ändert.

So richten Sie das Layoutraster ein

1. Klicken Sie auf das Smarttagsymbol () des TableLayoutPanel-Steuerelements, und wählen Sie Zeilen und Spalten bearbeiten aus, um das Dialogfeld Spalten- und Zeilenstile zu öffnen. Weitere Informationen finden Sie unter Gewusst wie: Bearbeiten von Zeilen und Spalten in einem TableLayoutPanel-Steuerelement.

2. Wählen Sie im Dropdownfeld Anzeigen den Eintrag Spalten aus.

3. Wählen Sie die erste Spalte aus, und ändern Sie den Wert der SizeType-Eigenschaft in Percent. Legen Sie den Wert des NumericUpDown-Steuerelements Prozent auf 25 fest. Diese Spalte enthält Label-Steuerelemente.

4. Wählen Sie die zweite Spalte aus. Ändern Sie den Wert der SizeType-Eigenschaft in Percent. Legen Sie den Wert des NumericUpDown-Steuerelements Prozent auf 50 fest. Diese Spalte enthält TextBox-Steuerelemente für Dateneingabefelder.

5. Wählen Sie die dritte Spalte aus. Ändern Sie den Wert der SizeType-Eigenschaft in Percent. Legen Sie den Wert des NumericUpDown-Steuerelements Prozent auf 25 fest. Diese Spalte enthält Label-Steuerelemente.

6. Wählen Sie die vierte Spalte aus. Ändern Sie den Wert der SizeType-Eigenschaft in Percent. Legen Sie den Wert des NumericUpDown-Steuerelements Prozent auf 50 fest. Diese Spalte enthält TextBox-Steuerelemente für Dateneingabefelder.

7. Wählen Sie im Dropdownfeld Anzeigen den Eintrag Zeilen aus.

8. Legen Sie für die ersten fünf Zeilen den Wert der SizeType-Eigenschaft auf Absolute fest, und legen Sie den Wert des NumericUpDown-Steuerelements Absolut auf 28 fest. Legen Sie für die sechste Zeile den Wert der SizeType-Eigenschaft auf Percent fest, und legen Sie den Wert des NumericUpDown-Steuerelements Prozent auf 80 fest.

9. Klicken Sie auf OK, um die Änderungen zu übernehmen.

Füllen des Layouts mit Steuerelementen

Nun können Sie das Layout mit Steuerelementen füllen. Da dieses Dateneingabeformular für Kontaktinformationen vorgesehen ist, enthält es Felder für den Vornamen, den Nachnamen, die Adresse, die Telefonnummer und Notizen. Die folgende Liste zeigt die Reihenfolge, in der Sie diese Steuerelemente erstellen:

1. Namensfelder

2. Adressfelder

3. Telefonnummernfelder

4. Notizenfeld

Erstellen der Namensfelder

Die Namenseingabefelder werden in der ersten Zeile des TableLayoutPanel-Steuerelements platziert. Sie umfassen ein Label-Steuerelement und ein TextBox-Steuerelement für den Vornamen sowie ein Label-Steuerelement und ein TextBox-Steuerelement für den Nachnamen.

So erstellen Sie die Namensfelder

1. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle des TableLayoutPanel-Steuerelements.

2. Legen Sie im Eigenschaftenfenster den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Right fest.

3. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest.

4. Legen Sie den Wert der Text-Eigenschaft auf First Name fest.

5. Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die zweite Zelle der ersten Zeile neben dem Label-Steuerelement.

6. Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.

7. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die dritte Zelle der ersten Zeile. Legen Sie den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Right fest. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest. Legen Sie den Wert der Text-Eigenschaft auf Last Name fest.

8. Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die vierte Zelle der ersten Zeile. Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.

Erstellen der Adressfelder

Die Adressfelder nehmen die zweite, dritte und vierte Zeile ein. Da Straßennamen lang sein können, überspannen das Address1-Feld und das Address2-Feld drei Spalten.

So erstellen Sie die Adressfelder

1. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der zweiten Zeile.

2. Legen Sie im Eigenschaftenfenster den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Right fest. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest. Legen Sie den Wert der Text-Eigenschaft auf Address1 fest.

3. Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die zweite Zelle der zweiten Zeile neben dem Label-Steuerelement.

4. Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.

5. Legen Sie den Wert der ColumnSpan-Eigenschaft auf 3 fest. Diese Eigenschaft wird vom TableLayoutPanel-Steuerelement bereitgestellt. Weitere Informationen über bereitgestellte Eigenschaften finden Sie unter Übersicht über Extenderanbieter.

6. Wiederholen Sie die Schritte 1 bis 5 für die dritte Zeile. Legen Sie den Wert der Text-Eigenschaft des Label-Steuerelements auf Address2 fest.

7. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der vierten Zeile.

8. Legen Sie den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Right fest. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest. Legen Sie den Wert der Text-Eigenschaft auf City fest.

9. Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die zweite Zelle der vierten Zeile neben dem Label-Steuerelement.

10. Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.

11. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die dritte Zelle der vierten Zeile.

12. Legen Sie den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Right fest. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest. Legen Sie den Wert der Text-Eigenschaft auf State fest.

13. Ziehen Sie ein ComboBox-Steuerelement aus der Toolbox in die vierte Zelle der vierten Zeile.

14. Legen Sie den Wert der Anchor-Eigenschaft des ComboBox-Steuerelements auf Left fest. Legen Sie den Wert der FormattingEnabled-Eigenschaft auf true fest.

Erstellen der Telefonnummernfelder

Die Telefonnummernfelder nehmen die fünfte Zeile ein. Um sicherzustellen, dass Benutzer nur gültige Telefonnummern eingeben, implementieren Sie sie mit dem MaskedTextBox-Steuerelement.

So erstellen Sie die Telefonnummernfelder

1. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der fünften Zeile.

2. Legen Sie im Eigenschaftenfenster den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Right fest. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest. Legen Sie den Wert der Text-Eigenschaft auf Phone (W) fest.

3. Ziehen Sie ein MaskedTextBox-Steuerelement aus der Toolbox in die zweite Zelle der fünften Zeile.

4. Legen Sie den Wert der Anchor-Eigenschaft des MaskedTextBox-Steuerelements auf Left fest.

5. Klicken Sie auf das Smarttag () auf dem MaskedTextBox-Steuerelement, um den Mask-Editor zu öffnen.

6. Wählen Sie im Dialogfeld Eingabeformat das Format Telefonnummer aus. Klicken Sie auf OK.

7. Wiederholen Sie die Schritte 1 bis 5 für das Feld mit der privaten Telefonnummer. Legen Sie den Wert der Text-Eigenschaft auf Phone (H) fest.

Erstellen des Notizenfelds

Das letzte Feld nimmt die sechste Zeile ein. Es ist für die Eingabe von Notizen vorgesehen und ermöglicht Freiformtexteingaben.

So erstellen Sie das Notizenfeld

1. Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der sechsten Zeile.

2. Legen Sie im Eigenschaftenfenster den Wert der Anchor-Eigenschaft des Label-Steuerelements auf Top, Right fest. Legen Sie den Wert der AutoSize-Eigenschaft auf true fest. Legen Sie den Wert der Text-Eigenschaft auf Notes fest.

3. Ziehen Sie ein RichTextBox-Steuerelement aus der Toolbox in die zweite Zelle der sechsten Zeile.

4. Legen Sie den Wert der ColumnSpan-Eigenschaft auf 3 fest.

5. Legen Sie den Wert der Dock-Eigenschaft des RichTextBox-Steuerelements auf Fill fest.

Beenden der Layoutrastereinrichtung

Im letzten Schritt wird die Layoutrastereinrichtung beendet. Die erste und dritte Spalte sollten auf AutoSize festgelegt werden. Da Sie in diese Spalte Steuerelemente eingefügt haben, sind die Spalten zur Entwurfszeit sichtbar.

So richten Sie das Layoutraster ein

1. Wählen Sie das TableLayoutPanel-Steuerelement aus, und klicken Sie auf sein Smarttagsymbol (). Wählen Sie Zeilen und Spalten bearbeiten aus, um das Dialogfeld Spalten- und Zeilenstile zu öffnen. Weitere Informationen hierzu finden Sie unter Gewusst wie: Bearbeiten von Zeilen und Spalten in einem TableLayoutPanel-Steuerelement.

2. Wählen Sie im Dropdownfeld Anzeigen den Eintrag Spalten aus.

3. Wählen Sie die erste und die dritte Spalte aus, und ändern Sie den Wert der SizeType-Eigenschaft in AutoSize.

4. Klicken Sie auf OK, um die Änderungen zu übernehmen.

Checkpoint

An diesem Punkt können Sie die Anwendung ausführen, um das dynamische Layout des Formulars zu überprüfen.

So überprüfen Sie das Layout des Formulars

• Erstellen Sie das Projekt, und führen Sie es aus. Wenn das Formular angezeigt wird, ändern Sie seine Größe.

Nächste Schritte

Nachdem Sie Formulare erstellen können, die ein dynamisches Layout implementieren, sollten Sie das Formular für die Lokalisierung vorbereiten. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen eines Layouts, das sich proportional an die Lokalisierung anpasst.

Siehe auch

Aufgaben

Gewusst wie: Erstellen von in der Größe veränderbaren Windows Forms für die Dateneingabe
Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von TableLayoutPanel
Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von FlowLayoutPanel
Gewusst wie: Bearbeiten von Zeilen und Spalten in einem TableLayoutPanel-Steuerelement
Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen mithilfe von Abständen, Rändern und der AutoSize-Eigenschaft
Gewusst wie: Unterstützen der Lokalisierung in Windows Forms mithilfe von AutoSize und dem TableLayoutPanel-Steuerelement
Exemplarische Vorgehensweise: Ausführen von häufigen Aufgaben mit Smarttags auf Windows Forms-Steuerelementen
Exemplarische Vorgehensweise: Erstellen eines Layouts, das sich proportional an die Lokalisierung anpasst

Referenz

TableLayoutPanel
FlowLayoutPanel