Procédure pas à pas : création un Windows Form redimensionnable pour l'entrée de données

Article
10/09/2014

Un formulaire qui se redimensionne correctement peut améliorer la facilité d'utilisation de votre interface utilisateur.

Cette procédure pas à pas illustre le processus de création d'une mise en forme qui s'ajuste proportionnellement lorsque l'utilisateur redimensionne le formulaire. Vous implémenterez un formulaire de saisie de données pour les informations sur le contact à l'aide du contrôle TableLayoutPanel.

Cette procédure pas à pas illustre les tâches suivantes :

Création du projet
Création du panneau de disposition
Installation de la grille de disposition
Création de champs de nom
Création de champs d'adresse
Création de champs de numéro de téléphone
Création du champ de remarques

Lorsque vous avez terminé, votre formulaire doit ressembler à ce qui suit :

Formulaire de saisie de données de base avec TableLayoutPanel

Pour copier le code dans cette rubrique sous forme de liste unique, consultez Comment : créer un Windows Form redimensionnable pour l'entrée de données.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée.Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils.Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Avoir des autorisations suffisantes pour être en mesure de créer et d'exécuter des projets d'application Windows Forms sur l'ordinateur où Visual Studio est installé.

Création du projet

La première étape consiste à créer le projet d'application. Utilisez ce projet pour générer l'application qui affiche le formulaire de saisie de données.

Pour créer le projet

Créez un projet d'application Windows appelé DemoDataEntryLayout. Pour plus d'informations, consultez Comment : créer un projet d'Application Windows Forms.

Création du panneau de disposition

L'étape suivante consiste à créer le panneau de disposition qui contient la disposition redimensionnable.

Pour créer le panneau de disposition

Sélectionnez le formulaire dans le Concepteur Forms.
Faites glisser un contrôle TableLayoutPanel de la Boîte à outils vers votre formulaire.
Dans la fenêtre Propriétés, modifiez la valeur de la propriété Dock du contrôle TableLayoutPanel en Fill.
Remplacez la valeur de la propriété ColumnCount par 4, puis remplacez la valeur de la propriété RowCount par 6.

Installation de la grille de disposition

L'étape suivante consiste à spécifier la grille de disposition. Définissez les propriétés dans les collections ColumnStyles et RowStyles de façon à déterminer comment les colonnes et les lignes se redimensionneront lorsque le formulaire changera de dimensions.

Pour installer la grille de disposition

Cliquez sur le glyphe () de la balise active du contrôle TableLayoutPanel, puis sélectionnez Modifier les lignes et les colonnes pour ouvrir la boîte de dialogue Styles de ligne et de colonne. Pour plus d'informations, consultez Comment : modifier des colonnes et des lignes dans un contrôle TableLayoutPanel.
Sélectionnez Colonnes dans la zone déroulante Afficher.
Sélectionnez la première colonne et modifiez la valeur de sa propriété SizeType en Percent. Affectez la valeur 25 au contrôle Percent NumericUpDown. Cette colonne contiendra des contrôles Label.
Sélectionnez la deuxième colonne. Affectez à sa propriété SizeType la valeur Percent. Affectez la valeur 50 au contrôle Percent NumericUpDown. Cette colonne contiendra des contrôles TextBox pour les champs de saisie de données.
Sélectionnez la troisième colonne. Affectez à sa propriété SizeType la valeur Percent. Affectez la valeur 25 au contrôle Percent NumericUpDown. Cette colonne contiendra des contrôles Label.
Sélectionnez la quatrième colonne. Affectez à sa propriété SizeType la valeur Percent. Affectez la valeur 50 au contrôle Percent NumericUpDown. Cette colonne contiendra des contrôles TextBox pour les champs de saisie de données.
Sélectionnez Lignes dans la zone déroulante Afficher.
Pour les cinq premières lignes, définissez la valeur de la propriété SizeType à Absolute, puis définissez la valeur du contrôle Absolute NumericUpDown à 28. Pour la sixième ligne, définissez la valeur de la propriété SizeType sur Percent, puis définissez la valeur du contrôle Percent NumericUpDown à 80.
Cliquez sur OK pour accepter les modifications.

Remplissage de la disposition avec des contrôles

Vous êtes à présent prêt à remplir la disposition avec des contrôles. Ce formulaire de saisie de données est destiné aux informations sur le contact, ce qui fait qu'il a des champs pour le prénom, le nom, l'adresse, le numéro de téléphone et les remarques. La liste suivante affiche l'ordre dans lequel vous créez ces contrôles :

Champs de nom
Champs d'adresse
Champs de numéro de téléphone
Champ de remarques

Création de champs de nom

Les champs d'entrée de nom sont placés sur la première ligne du contrôle TableLayoutPanel. Ils se composent d'un contrôle Label et d'un contrôle TextBox pour le prénom, ainsi que d'un contrôle Label et d'un contrôle TextBox pour le nom.

Pour créer les champs de nom

Faites glisser un contrôle Label de la Boîte à outils vers la première cellule du contrôle TableLayoutPanel.
Dans la fenêtre Propriétés, modifiez la valeur de la propriété Label du contrôle Anchor en Right.
Affectez à la propriété AutoSize la valeur true.
Affectez la valeur Prénom à la propriété Text.
Faites glisser un contrôle TextBox de la Boîte à outils vers la deuxième cellule de la première ligne, à côté du contrôle Label.
Affectez à la propriété Anchor du contrôle TextBox la valeur Left, Right.
Faites glisser un contrôle Label de la Boîte à outils vers la troisième cellule de la première ligne. Affectez à la propriété Anchor du contrôle Label la valeur Right. Affectez à la propriété AutoSize la valeur true. Affectez la valeur Nom à la propriété Text.
Faites glisser un contrôle TextBox de la Boîte à outils vers la quatrième cellule de la première ligne. Affectez à la propriété Anchor du contrôle TextBox la valeur Left, Right.

Création de champs d'adresse

Les champs d'adresse occupent les deuxième, troisième et quatrième lignes. Dans la mesure où les adresses de rue peuvent être longues, les champs Address1 et Address2 couvrent trois colonnes.

Pour créer les champs d'adresse

Faites glisser un contrôle Label de la Boîte à outils vers la première cellule de la deuxième ligne.
Dans la fenêtre Propriétés, modifiez la valeur de la propriété Label du contrôle Anchor en Right. Affectez à la propriété AutoSize la valeur true. Affectez la valeur Adresse1 à la propriété Text.
Faites glisser un contrôle TextBox de la Boîte à outils vers la deuxième cellule de la deuxième ligne, à côté du contrôle Label.
Affectez à la propriété Anchor du contrôle TextBox la valeur Left, Right.
Affectez la valeur 3 à la propriété ColumnSpan. Cette propriété est fournie par le contrôle TableLayoutPanel. Pour plus d'informations sur les propriétés fournies, consultez Vue d'ensemble des fournisseurs d'extendeurs.
Répétez les étapes 1 à 5 pour la troisième ligne. Affectez la valeur Adresse2 à la propriété Text du contrôle Label.
Faites glisser un contrôle Label de la Boîte à outils vers la première cellule de la quatrième ligne.
Affectez à la propriété Anchor du contrôle Label la valeur Right. Affectez à la propriété AutoSize la valeur true. Affectez la valeur Ville à la propriété Text.
Faites glisser un contrôle TextBox de la Boîte à outils vers la deuxième cellule de la quatrième ligne, à côté du contrôle Label.
Affectez à la propriété Anchor du contrôle TextBox la valeur Left, Right.
Faites glisser un contrôle Label de la Boîte à outils vers la troisième cellule de la quatrième ligne.
Affectez à la propriété Anchor du contrôle Label la valeur Right. Affectez à la propriété AutoSize la valeur true. Affectez la valeur État à la propriété Text.
Faites glisser un contrôle ComboBox de la Boîte à outils vers la quatrième cellule de la quatrième ligne.
Affectez à la propriété Anchor du contrôle ComboBox la valeur Left. Affectez à la propriété FormattingEnabled la valeur true.

Création de champs de numéro de téléphone

Les champs de numéro de téléphone occupent la cinquième ligne. Pour garantir que l'utilisateur entre uniquement des numéros de téléphone valides, implémentez-les avec le contrôle MaskedTextBox.

Pour créer les champs de numéro de téléphone

Faites glisser un contrôle Label de la Boîte à outils vers la première cellule de la cinquième ligne.
Dans la fenêtre Propriétés, modifiez la valeur de la propriété Label du contrôle Anchor en Right. Affectez à la propriété AutoSize la valeur true. Affectez la valeur Téléphone (B) à la propriété Text.
Faites glisser un contrôle MaskedTextBox de la Boîte à outils vers la deuxième cellule de la cinquième ligne.
Affectez à la propriété Anchor du contrôle MaskedTextBox la valeur Left.
Cliquez sur la balise active () sur le contrôle MaskedTextBox pour ouvrir l'éditeur Mask.
Sélectionnez le masque Numéro de téléphone dans la boîte de dialogue Masque de saisie. Cliquez sur OK.
Répétez les étapes 1 à 5 pour le champ de numéro de téléphone du domicile. Affectez la valeur Téléphone (D) à la propriété Text.

Création du champ de remarques

Le dernier champ occupe la sixième ligne. Il est destiné à l'entrée de remarques, et il autorise la saisie de texte de formulaire libre.

Pour créer le champ de remarques

Faites glisser un contrôle Label de la Boîte à outils vers la première cellule de la sixième ligne.
Dans la fenêtre Propriétés, modifiez la valeur de la propriété Anchor du contrôle Label en Top, Right. Affectez à la propriété AutoSize la valeur true. Affectez la valeur Remarques à la propriété Text.
Faites glisser un contrôle RichTextBox de la Boîte à outils vers la deuxième cellule de la sixième ligne.
Affectez la valeur 3 à la propriété ColumnSpan.
Affectez à la propriété Dock du contrôle RichTextBox la valeur Fill.

Fin de la configuration de la grille de disposition

La dernière étape consiste à terminer la configuration de la grille de disposition. Les première et troisième colonnes doivent avoir la valeur AutoSize. Dans la mesure où vous avez placé des contrôles dans ces colonnes, elles sont visibles au moment du design.

Pour installer la grille de disposition

Sélectionnez le contrôle TableLayoutPanel et cliquez sur son glyphe de balise active (). Sélectionnez Modifier les lignes et les colonnes pour ouvrir la boîte de dialogue Styles de ligne et de colonne. Pour plus d'informations, consultez Comment : modifier des colonnes et des lignes dans un contrôle TableLayoutPanel.
Sélectionnez Colonnes dans la zone déroulante Afficher.
Sélectionnez la première et la troisième colonne et modifiez la valeur de la propriété SizeType en AutoSize.
Cliquez sur OK pour accepter les modifications.

Point de contrôle

À ce stade, vous pouvez lancer votre application pour vérifier la disposition de dynamique du formulaire.

Pour vérifier la disposition de votre formulaire

Générez et exécutez le projet. Lorsque le formulaire apparaît, redimensionnez-le pour le rendre plus large et plus petit.

Notes

Les contrôles sont redimensionnés proportionnellement pour remplir l'espace disponible.

Étapes suivantes

Maintenant que vous pouvez créer des formulaires qui implémentent la disposition dynamique, pensez à rendre votre formulaire prêt pour la localisation. Pour plus d'informations, consultez Procédure pas à pas : création d'une présentation qui ajuste la proportion pour la localisation.