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.
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 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 neuen Windows Forms-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
Wählen Sie das Formular im Windows Forms-Designer aus.
Ziehen Sie ein TableLayoutPanel-Steuerelement aus der Toolbox auf das Formular.
Ändern Sie im Eigenschaftenfenster den Wert der Dock-Eigenschaft des TableLayoutPanel-Steuerelements auf Fill.
Ä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
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 hierzu finden Sie unter Gewusst wie: Bearbeiten von Zeilen und Spalten in einem TableLayoutPanel-Steuerelement.
Wählen Sie im Dropdownfeld Anzeigen den Eintrag Spalten aus.
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.
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.
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.
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.
Wählen Sie im Dropdownfeld Anzeigen den Eintrag Zeilen aus.
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.
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:
Namensfelder
Adressfelder
Telefonnummernfelder
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
Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle des TableLayoutPanel-Steuerelements.
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 "First Name" fest.
Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die zweite Zelle der ersten Zeile neben dem Label-Steuerelement.
Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.
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.
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
Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der zweiten Zeile.
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.
Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die zweite Zelle der zweiten Zeile neben dem Label-Steuerelement.
Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.
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.
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.
Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der vierten 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 City fest.
Ziehen Sie ein TextBox-Steuerelement aus der Toolbox in die zweite Zelle der vierten Zeile neben dem Label-Steuerelement.
Legen Sie den Wert der Anchor-Eigenschaft des TextBox-Steuerelements auf Left, Right fest.
Ziehen Sie ein Label-Steuerelement aus der Toolbox in die dritte Zelle der vierten 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 State fest.
Ziehen Sie ein ComboBox-Steuerelement aus der Toolbox in die vierte Zelle der vierten Zeile.
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
Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der fünften Zeile.
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.
Ziehen Sie ein MaskedTextBox-Steuerelement aus der Toolbox in die zweite Zelle der fünften Zeile.
Legen Sie den Wert der Anchor-Eigenschaft des MaskedTextBox-Steuerelements auf Left fest.
Klicken Sie auf das Smarttag (
) auf dem MaskedTextBox-Steuerelement, um den Mask-Editor zu öffnen.
Wählen Sie im Dialogfeld Eingabeformat das Format Telefonnummer aus. Klicken Sie auf OK.
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
Ziehen Sie ein Label-Steuerelement aus der Toolbox in die erste Zelle der sechsten Zeile.
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.
Ziehen Sie ein RichTextBox-Steuerelement aus der Toolbox in die zweite Zelle der sechsten Zeile.
Legen Sie den Wert der ColumnSpan-Eigenschaft auf 3 fest.
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
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.
Wählen Sie im Dropdownfeld Anzeigen den Eintrag Spalten aus.
Wählen Sie die erste und die dritte Spalte aus, und ändern Sie den Wert der SizeType-Eigenschaft in AutoSize.
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.
Tipp
Die Steuerelemente werden proportional an den verfügbaren Platz angepasst.
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
Gewusst wie: Bearbeiten von Zeilen und Spalten in einem TableLayoutPanel-Steuerelement