Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide des lignes d'alignement (SnapLines)
Mise à jour : novembre 2007
Le positionnement précis des contrôles sur votre formulaire est une haute priorité pour beaucoup d'applications. Le Concepteur Windows Forms vous propose beaucoup d'outils de disposition pour accomplir cette opération. L'un des plus importants est la fonctionnalité SnapLine.
Les lignes d'alignement (SnapLines) vous indiquent précisément où aligner des contrôles avec d'autres contrôles. Elles vous indiquent également les distances recommandées pour les marges entre les contrôles, comme spécifié par les indications de l'interface utilisateur de Windows. Pour plus d'informations, consultez (en anglais) User Interface Design and Development.
Avec les lignes d'alignement (SnapLines), il est plus facile d'aligner vos contrôles pour obtenir une apparence et un comportement impeccables et professionnels.
Cette procédure pas à pas illustre les tâches suivantes :
Création d'un projet Windows Forms
Espacement et alignement des contrôles à l'aide des lignes d'alignement (SnapLines)
Alignement selon les marges du contrôle et du conteneur
Alignement selon des contrôles groupés
Utilisation des lignes d'alignement (SnapLines) pour placer un contrôle en dessinant sa taille en mode plan
Utilisation des lignes d'alignement (SnapLines) lorsque vous faites glisser un contrôle à partir de la boîte à outils
Redimensionnement des contrôles à l'aide des lignes d'alignement (SnapLines)
Alignement d'une étiquette sur le texte d'un contrôle
Utilisation de lignes d'alignement (SnapLines) avec la navigation à l'aide du clavier
Lignes d'alignement (SnapLines) et panneaux de disposition
Désactivation des lignes d'alignement (SnapLines)
Lorsque vous aurez terminé, vous aurez assimilé le rôle de disposition joué par la fonctionnalité des lignes d'alignement (SnapLines).
.gif "Remarque") Remarque : |
|---|
Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. 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. |
Création du projet
La première étape consiste à créer le projet et configurer le formulaire.
Pour créer le projet
Créez un projet d'application Windows appelé « SnaplineExample ». Pour plus d'informations, consultez Comment : créer un projet d'application Windows.
Sélectionnez le formulaire dans le Concepteur Forms.
Espacement et alignement des contrôles à l'aide des lignes d'alignement (SnapLines)
Les lignes d'alignement (SnapLines) vous offrent un moyen précis et intuitif d'aligner des contrôles sur votre formulaire. Ils apparaissent lorsque vous déplacez un ou plusieurs contrôles sélectionnés près d'une position qui s'alignerait sur un autre contrôle ou jeu de contrôles. Votre sélection s'alignera à la position suggérée comme si vous l'aviez déplacée devant les autres contrôles.
Pour réorganiser des contrôles à l'aide de lignes d'alignement (SnapLines)
Faites glisser un contrôle Button de la Boîte à outils vers votre formulaire.
Déplacez le contrôle Button au coin inférieur droit du formulaire. Notez les lignes d'alignement (Snaplines) qui apparaissent lorsque le contrôle Button s'approche des bordures droite et inférieure du contrôle. Ces lignes d'alignement (SnapLines) affichent la distance recommandée entre les bordures du contrôle et le formulaire.
Déplacez le contrôle Button autour des bordures du formulaire et notez l'endroit où les lignes d'alignement (SnapLines) apparaissent. Lorsque vous avez terminé, déplacez le contrôle Button près du centre du formulaire.
Faites glisser un autre contrôle Button de la Boîte à outils vers votre formulaire.
Déplacez le deuxième contrôle Button jusqu'à ce qu'il soit presque au niveau du premier. Notez la ligne d'alignement (SnapLine) qui apparaît à la ligne de base du texte des deux boutons, et remarquez que le contrôle que vous déplacez s'aligne à une position qui est exactement au niveau de l'autre contrôle.
Déplacez le deuxième contrôle Button jusqu'à ce qu'il soit positionné directement au-dessus du premier. Notez les lignes d'alignement (SnapLines) qui apparaissent le long des bords gauche et droit des deux boutons, et remarquez que le contrôle que vous déplacez s'aligne à une position qui est alignée exactement avec l'autre contrôle.
Sélectionnez l'un des contrôles Button et déplacez-le à proximité de l'autre, jusqu'à ce qu'ils se touchent presque. Notez la ligne d'alignement (Snapline) qui apparaît entre eux. Cette distance est la distance recommandée entre les bordures des contrôles. Notez également que le contrôle vous déplacez s'aligne à cette position.
Faites glisser deux contrôles Panel de la Boîte à outils vers votre formulaire.
Déplacez l'un des contrôles Panel jusqu'à ce qu'il soit presque au niveau du premier. Notez les lignes d'alignement (SnapLines) qui apparaissent le long des bords supérieur et inférieur des deux contrôles, et remarquez que le contrôle que vous déplacez s'aligne à une position qui est exactement au niveau de l'autre contrôle.
Alignement selon les marges du contrôle et du conteneur
Les lignes d'alignement (SnapLines) vous aident à aligner de façon cohérente vos contrôles sur les marges des formulaires et des conteneurs.
Pour aligner des contrôles sur les marges de formulaires et de conteneurs
- Sélectionnez l'un des contrôles Button et déplacez-le près de la bordure droite du formulaire jusqu'à ce qu'une ligne d'alignement (SnapLine) apparaisse. La distance de la ligne d'alignement (SnapLine) par rapport à la bordure droite est la somme de la propriété Margin du contrôle et des valeurs de propriété Padding du formulaire.
| Remarque : |
|---|
Si la propriété Padding du formulaire a la valeur 0,0,0,0, le Concepteur Windows Forms affecte une valeur Padding masquée de 9,9,9,9 au formulaire. Pour substituer ce comportement, affectez une valeur autre que 0,0,0,0. |
Modifiez la valeur de la propriété Margin du contrôle Button en développant l'entrée Margin dans la fenêtre Propriétés et en attribuant à la propriété All la valeur 0. Pour plus d'informations, consultez Procédure pas à pas : disposition des contrôles Windows Forms avec les propriétés Padding, Margins et AutoSize.
Déplacez le contrôle Button près de la bordure droite du formulaire jusqu'à ce qu'une ligne d'alignement (SnapLine) apparaisse. Cette distance est maintenant indiquée par la valeur de la propriété Padding du formulaire.
Faites glisser un contrôle GroupBox de la Boîte à outils vers votre formulaire.
Modifiez la valeur de la propriété Padding du contrôle GroupBox en développant l'entrée Padding dans la fenêtre Propriétés et en attribuant à la propriété All la valeur 10.
Faites glisser un contrôle Button de la Boîte à outils jusqu'au contrôle GroupBox.
Déplacez le contrôle Button près de la bordure droite du contrôle GroupBox jusqu'à ce qu'une ligne d'alignement (SnapLine) apparaisse. Déplacez le contrôle Button dans le contrôle GroupBox et notez où les lignes d'alignement (SnapLines) apparaissent.
Alignement selon des contrôles regroupés
Vous pouvez utiliser des lignes d'alignement (SnapLines) pour aligner des contrôles regroupés aussi bien que des contrôles dans un contrôle GroupBox.
Pour aligner des contrôles regroupés
Sélectionnez deux des contrôles sur votre formulaire. Déplacez la sélection autour et notez les lignes d'alignement (SnapLines) qui apparaissent entre votre sélection et les autres contrôles.
Faites glisser un contrôle GroupBox de la Boîte à outils vers votre formulaire.
Faites glisser un contrôle Button de la Boîte à outils jusqu'au contrôle GroupBox.
Sélectionnez l'un des contrôles Button et déplacez-le autour du contrôle GroupBox. Notez les lignes d'alignement (SnapLines) qui apparaissent aux bords du contrôle GroupBox. Notez également les lignes d'alignement (SnapLines) qui apparaissent aux bords du Button contrôlent qui est contenu par le contrôle GroupBox. Les contrôles qui sont des enfants d'un contrôle conteneur prennent aussi en charge les lignes d'alignement (SnapLines).
Utilisation des lignes d'alignement (SnapLines) pour placer un contrôle en dessinant sa taille en mode plan
Les lignes d'alignement (SnapLines) vous aident à aligner des contrôles lorsque vous les placez la première fois sur un formulaire.
Pour utiliser les lignes d'alignement (SnapLines) en vue de placer un contrôle en dessinant sa taille en mode plan
Dans la Boîte à outils, cliquez sur l'icône du contrôle Button. Ne le faites pas glisser sur le formulaire.
Déplacez le pointeur de la souris sur l'aire de conception du formulaire. Notez que le pointeur se transforme en croix avec l'icône du contrôle Button jointe. Notez également les lignes d'alignement (SnapLines) qui apparaissent pour suggérer des positions alignées pour le contrôle Button.
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris autour du formulaire. Notez qu'un plan est dessiné, en indiquant la position et la taille du contrôle.
Faites glisser le pointeur jusqu'à ce qu'il s'aligne avec un autre contrôle sur le formulaire. Notez qu'une ligne d'alignement (SnapLine) apparaît pour indiquer l'alignement.
Relâchez le bouton de la souris. Le contrôle est créé selon la position et la taille indiquées par le plan.
Utilisation des lignes d'alignement (SnapLines) lorsque vous faites glisser un contrôle à partir de la boîte à outils
Les lignes d'alignement (SnapLines) vous aident à aligner des contrôles lorsque vous les faites glisser de la Boîte à outils sur votre formulaire.
Pour utiliser des lignes d'alignement (SnapLines) lorsque vous faites glisser un contrôle à partir de la boîte à outils
Faites glisser un contrôle Button de la Boîte à outils sur votre formulaire, mais ne relâchez pas le bouton de souris.
Déplacez le pointeur de la souris sur l'aire de conception du formulaire. Notez que le pointeur change pour indiquer la position à laquelle le nouveau contrôle Button sera créé.
Faites glisser le pointeur de la souris autour du formulaire. Notez les lignes d'alignement (SnapLines) qui apparaissent pour suggérer des positions alignées pour le contrôle Button. Recherchez une position qui est alignée avec d'autres contrôles.
Relâchez le bouton de la souris. Le contrôle est créé à la position indiquée par les lignes d'alignement (SnapLines).
Redimensionnement des contrôles à l'aide des lignes d'alignement (SnapLines)
Les lignes d'alignement (SnapLines) vous aident à aligner des contrôles lorsque vous les redimensionnez.
Pour redimensionner un contrôle à l'aide de lignes d'alignement (SnapLines)
Faites glisser un contrôle Button de la Boîte à outils vers votre formulaire.
Redimensionnez le contrôle Button en saisissant l'une des poignées de redimensionnement et en la faisant glisser. Pour plus d'informations, consultez Comment : redimensionner des contrôles sur des Windows Forms.
Faites glisser la poignée de redimensionnement jusqu'à ce que l'une des bordures du contrôle Button soit alignée avec un autre contrôle. Notez qu'une ligne d'alignement (SnapLine) apparaît. Notez également que la poignée de redimensionnement s'aligne à la position indiquée par la ligne d'alignement (SnapLine).
Redimensionnez le contrôle Button dans différentes directions et alignez la poignée de redimensionnement selon différents contrôles. Notez comment les lignes d'alignement (SnapLines) apparaissent dans différentes orientations pour indiquer l'alignement.
Alignement d'une étiquette sur le texte d'un contrôle
Certains contrôles offrent une ligne d'alignement (SnapLine) pour aligner d'autres contrôles sur le texte affiché.
Pour aligner une étiquette sur le texte d'un contrôle
Faites glisser un contrôle TextBox de la TextBox vers votre formulaire. Lorsque vous déposez le contrôle TextBox sur le formulaire, cliquez sur le glyphe de balise active et sélectionnez l'option Définir textBox1 pour le texte. Pour plus d'informations, consultez Procédure pas à pas : exécution de tâches courantes à l'aide de balises actives dans les contrôles Windows Forms.
Faites glisser un contrôle Label de la TextBox vers votre formulaire.
Affectez à la propriété AutoSize du contrôle Label la valeur true. Notez que les bordures du contrôle sont ajustées pour contenir le texte affiché.
Déplacez le contrôle Label à gauche du contrôle TextBox afin qu'il soit aligné avec le bord inférieur du contrôle TextBox. Notez la ligne d'alignement (SnapLine) qui apparaît le long des bords inférieurs des deux contrôles.
Déplacez le contrôle Labellégèrement vers le haut, jusqu'à ce que le texte Labelet le texte TextBox soient alignés. Notez la ligne d'alignement (SnapLine) différemment mise en forme avec des styles qui apparaît, en indiquant quand les champs de texte des deux contrôles sont alignés.
Utilisation de lignes d'alignement (SnapLines) avec la navigation à l'aide du clavier
Les lignes d'alignement (SnapLines) vous aident à aligner des contrôles lorsque vous les réorganisez à l'aide des touches de direction du clavier.
Pour utiliser des lignes d'alignement (SnapLines) avec la navigation par clavier
Faites glisser un contrôle Button de la Boîte à outils vers votre formulaire. Placez-le dans l'angle supérieur gauche du formulaire.
Appuyez sur CTRL+BAS. Notez que le contrôle se déplace vers le bas du formulaire jusqu'à la première position d'alignement horizontale disponible.
Appuyez sur CTRL+BAS jusqu'à ce que le contrôle atteigne le bas du formulaire. Notez les positions qu'il occupe à mesure qu'il descend dans le formulaire.
Appuyez sur CTRL+DROITE. Notez que le contrôle se déplace à travers le formulaire jusqu'à la première position d'alignement verticale disponible.
Appuyez sur CTRL+DROITE jusqu'à ce que le contrôle atteigne le côté du formulaire. Notez les positions qu'il occupe à mesure qu'il se déplace à travers le formulaire.
Déplacez le contrôle autour du formulaire avec une combinaison de touches de direction. Notez les positions que le contrôle occupe et les lignes d'alignement (SnapLines) qui les accompagnent.
Appuyez sur MAJ+une touche de direction pour redimensionner le contrôle Button par des incréments d'un pixel.
Appuyez sur la combinaison CTRL+MAJ+une touche de direction pour redimensionner le contrôle Button par incréments de lignes d'alignement (SnapLines).
Lignes d'alignement (SnapLines) et panneaux de disposition
Les lignes d'alignement (SnapLines) sont désactivés dans les panneaux de disposition.
Pour désactiver sélectivement les lignes d'alignement (SnapLines)
Faites glisser un contrôle TableLayoutPanel de la Boîte à outils vers votre formulaire.
Double-cliquez sur l'icône du contrôle Button dans la Boîte à outils. Notez qu'un nouveau contrôle de bouton apparaît dans la première cellule du contrôle TableLayoutPanel.
Double-cliquez sur l'icône du contrôle Button dans la Boîte à outils à deux reprises. Cela laisse une cellule vide dans le contrôle TableLayoutPanel.
Faites glisser un contrôle Button de la Boîte à outils vers la cellule vide du contrôle TableLayoutPanel. Notez qu'aucune ligne d'alignement (SnapLine) n'apparaît.
Faites glisser le contrôle Button hors du contrôle TableLayoutPanel et déplacez-le autour du contrôle TableLayoutPanel. Notez que les lignes d'alignement (SnapLines) apparaissent de nouveau.
Désactivation des lignes d'alignement (SnapLines)
Les lignes d'alignement (SnapLines) sont activées par défaut. Vous pouvez désactiver sélectivement les lignes d'alignement (SnapLines), ou vous pouvez les désactiver dans l'environnement de design.
Pour désactiver sélectivement les lignes d'alignement (SnapLines)
Appuyez sur la touche ALT tout en déplaçant un contrôle autour du formulaire.
Notez qu'aucune ligne d'alignement (SnapLine) n'apparaît et le contrôle ne s'aligne pas sur toutes les positions d'alignement potentielles.
Pour désactiver les lignes d'alignement (SnapLines) dans l'environnement de design
Dans le menu Outils, ouvrez la boîte de dialogue Options. Ouvrez la boîte de dialogue Concepteur Windows Forms. Pour plus d'informations, consultez Général, Concepteur Windows Forms, boîte de dialogue Options.
Sélectionnez le nœud Général. Dans la section LayoutMode, remplacez SnapLines par SnapToGrid.
Cliquez sur OK pour appliquer le paramètre.
Sélectionnez un contrôle sur votre formulaire et déplacez-le autour des autres contrôles. Notez que les lignes d'alignement (SnapLines) n'apparaissent pas.
Étapes suivantes
Les lignes d'alignement (SnapLines) offrent un moyen intuitif pour aligner des contrôles sur votre formulaire. Voici quelques suggestions pour une exploration plus approfondie :
Essayez d'imbriquer un contrôle GroupBox dans un autre contrôle GroupBox. Placez un contrôle Button dans le contrôle enfant GroupBox, et un autre dans le contrôle parent GroupBox. Déplacez les contrôles Button autour pour voir comment les lignes d'alignement (SnapLines) franchissent les limites des conteneurs.
Créez une colonne de contrôles TextBox et une colonne correspondante de contrôles Label. Affectez la valeur true à la propriété AutoSize du contrôle Label. Utilisez les lignes d'alignement (SnapLines) pour déplacer les contrôles Labelafin que leur texte affiché soit aligné avec le texte dans les contrôles TextBox.
Pour plus d'informations sur la conception d'interface utilisateur Windows, consultez l'ouvrage (en anglais) Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1) sur le site MSDN ()..