Panneau Grille

Le panneau Grille est le conteneur de disposition le plus souple par rapport aux autres conteneurs de disposition qui sont conçus pour gérer des fonctionnalités de disposition plus spécifiques. Microsoft Expression Blend offre deux modes d’édition de disposition pour travailler avec des panneaux Grille :

• Le fonctionnement de la modification en mode de disposition Canevas (mode par défaut) est semblable à la modification dans un panneau Canevas. Dans ce mode, quand vous déplacez les séparateurs de colonnes et de lignes que vous avez définis, les éléments présents dans ces lignes et ces colonnes restent en place.

• Le mode de disposition Grille (enrichi) offre des fonctionnalités de disposition plus avancées. Dans ce mode, le panneau Grille se comporte en phase de conception de la même façon que la grille au moment de l’exécution.

• Vous pouvez basculer entre les deux modes en cliquant sur l’icône de mode dans le coin supérieur gauche quand un panneau Grille est sélectionné, ou bien en activant ou en désactivant la case à cocher Utiliser le mode de disposition Grille dans la section Planche graphique de la boîte de dialogue Options (dans le menu Outils).

Modes de disposition disponibles avec les panneaux Grille

Pour ajouter un panneau Grille à un document, utilisez le sous-menu du conteneur de disposition ou la Bibliothèque de composants  dans la Boîte à outils.

Organisation des objets dans un panneau Grille qui a été divisé en trois lignes et trois colonnes, illustré en mode de disposition Grille

Positionnement, dimensionnement et organisation

L’essentiel de la disposition dans un panneau Grille consiste à positionner, dimensionner et organiser efficacement des éléments en utilisant l’alignement, les marges et les propriétés Width (largeur) et Height (hauteur) :

• Alignement   L’alignement détermine la position qu’un élément prend par rapport à son élément parent.

• Marges   La marge détermine l’espace vide autour du contrôle, situé entre l’extérieur de l’élément enfant et les limites du panneau.

• Largeur et hauteur   Valeurs fixes mesurées en pixels (ou, unités indépendantes du périphérique qui correspondent à environ 1/96 pouce). Vous pouvez définir ces propriétés sur la valeur Auto de sorte que le redimensionnement des éléments enfants s’effectue automatiquement suivant celui du panneau parent.

Haut de la page

Organisation des éléments enfants

Vous pouvez réorganiser les éléments dans une grille sectionnant des zones de la grille. Pour ce faire, vous utilisez des séparateurs de lignes et de colonnes pour créer une série de lignes et colonnes qui définissent des régions dans lesquelles vous pouvez disposer des éléments dans la grille. Lorsque le panneau Grille est l’élément actif de votre document, des règles de couleur bleue apparaissent le long des côtés supérieur et gauche de la grille. Lorsque vous déplacez le pointeur de la souris sur les règles à l’aide de l’outil Sélection , le pointeur prend la forme d’une flèche avec le signe plus (+) , et un trait de couleur orange apparaît à l’emplacement où une ligne ou une colonne sera ajoutée. Si vous cliquez n’importe où sur la règle supérieure, vous ajoutez une colonne à la grille à cette position, et si vous cliquez sur la règle gauche, vous ajoutez une ligne.

Ajout d’un séparateur de colonne

Vous pouvez dessiner des éléments enfants dans un panneau Grille de sorte qu’ils se superposent les uns sur les autres. Les éléments superposés seront visibles en fonction de leur ordre de plan (l’ordre dans lequel les éléments ont été dessinés ou placés au sein de l’élément parent). Pour modifier l’ordre de plan des éléments, cliquez sur Trier dans le menu Objet, ou cliquez avec le bouton droit de la souris sur les éléments sous Objets et chronologie dans le panneau Interaction, pointez sur Trier, puis cliquez sur la commande souhaitée. Les éléments enfants peuvent également s’étendre sur plusieurs lignes ou colonnes. Vous pouvez également activer l’alignement pour pouvoir mieux organiser les objets en les alignant sur les lignes d’alignement. L’alignement vous permet de faire glisser les objets sur la planche graphique et de les aligner par rapport aux marges, à la ligne de base (pour les objets de texte) ou à l’alignement (ligne rouge en pointillés) d’autres objets présents dans le même élément conteneur, par exemple le panneau de disposition ou les séparateurs de lignes et de colonnes d’un panneau Grille.

Haut de la page

Redimensionnement des lignes et des colonnes

Lorsque vous vous trouvez dans le mode de disposition Grille d’un panneau Grille, des icônes de verrou apparaissent à proximité des règles situées sur les bords supérieur et gauche du panneau Grille. Vous pouvez utiliser ces icônes de verrou pour définir le type de dimensionnement utilisé pour les lignes et les colonnes de votre grille. Vous pouvez définir les valeurs de hauteur des lignes et les valeurs de largeur des colonnes. Il existe trois options de dimensionnement de lignes et de colonnes différentes qui affectent l’organisation des éléments enfants dans la grille. Ces options de dimensionnement sont les suivantes :

• Dimensionnement fixe  Cette fonctionnalité utilise des valeurs en pixels (px). Pour la définir, cliquez sur l’icône de verrou pour la positionner sur la valeur Dimensionné à une taille de pixel (position verrouillée) . Le dimensionnement fixe signifie que la ligne et la colonne ne seront pas redimensionnées.

  Remarque :

  Dans les applications Windows Presentation Foundation (WPF) (telles que celles qui ont été créées à l’aide d’Expression Blend), pixels fait référence à des pixels indépendants du périphérique ou des unités indépendantes du périphérique, qui sont équivalents à la taille d’un pixel sur un écran qui a pour valeur une résolution d’écran de 96 ppp. Chaque unité correspond approximativement à 1/96 de pouce, indépendamment de la taille de l’écran ou de sa résolution.

• Dimensionnement à une taille d’étoile  Cette fonctionnalité utilise des valeurs d’étoile (*). Pour la définir, cliquez sur l’icône de verrou pour la positionner sur la valeur Dimensionné à une taille d’étoile (position déverrouillée) . Le dimensionnement à une taille d’étoile a un effet similaire à celui du dimensionnement en pourcentage dans HTML.

• Dimensionnement automatique  Cette fonctionnalité n’utilise aucune propriété de largeur et de hauteur. Pour la définir, cliquez sur l’icône de verrou pour la positionner sur la valeur Dimensionné automatiquement . Le dimensionnement automatique signifie que le redimensionnement des éléments dans le panneau Grille s’effectuera en fonction de celui de l’élément parent.

Dimensionnement à une taille d’étoile et dimensionnement automatique définis pour différentes colonnes dans un panneau Grille

Lorsqu’un séparateur de grille est sélectionné sur la planche graphique, vous pouvez utiliser le panneau Propriétés pour sélectionner les options de dimensionnement et ajuster la propriété Width (largeur) lorsque vous utilisez le dimensionnement à une taille d’étoile ou fixe. Vous pouvez aussi définir les propriétés MaxWidth (largeur maximale) et MinWidth (largeur minimale) d’un séparateur de colonne dans le panneau Propriétés.

Haut de la page

Positionnement des éléments enfants

En mode de disposition Canevas, vous pouvez positionner des éléments visuellement en utilisant directement la planche graphique et en faisant glisser des éléments n’importe où dans un panneau Grille (et même en dehors des limites), ou bien vous pouvez entrer des valeurs précises pour la position sous Disposition dans le panneau Propriétés.

En mode de disposition Grille, vous définissez les positions des éléments enfants au sein d’une grille en définissant les marges de chaque élément. Les marges spécifient le décalage d’un élément à partir des lignes et des colonnes qui définissent la grille, ou à partir des bords de la grille au sein de la grille. Les marges sont définies lorsque vous faites glisser un élément enfant dans une position dans une grille, et elles représentent la distance entre le bord de l’élément sélectionné et le quadrillage suivant (ligne ou colonne). Pour ce faire, cliquez sur les ornements de marge (boutons). Si un ornement de marge est ouvert comme ceci ou comme ceci , cela signifie que la marge en question n’est pas définie. Si un ornement de marge est fermé comme ceci ou comme ceci , cela signifie que la marge en question est définie. Le redimensionnement de la grille pendant l’exécution laissera tous les éléments en place là où les marges n’ont pas été définies. En revanche, les éléments liés à une marge seront déplacés avec la marge lors du redimensionnement.

Expression Blend utilise également une règle simple pour définir l’alignement par défaut : si l’élément enfant que vous dessinez ou que vous redimensionnez coupe le milieu d’une ligne ou d’une colonne, les propriétés Width et Height seront définies à Auto; sinon, elles seront fixes. Vous pouvez également définir une option d’alignement qui indique si la marge est appliquée ou non lors du redimensionnement de la grille. L’alignement est indiqué dans la grille par un trait continu (alignement défini) ou en pointillé (alignement non défini), comme le montre l’image suivante.

Bouton dans un panneau Grille délimité (marges définies - remarquez que la valeur de marge est indiquée) à gauche et à droite, et non délimité (marges non définies) en haut et en bas

• Alignement horizontal

  • À gauche. Ancre à gauche mais étire à droite lors du redimensionnement.

  • Centré. Toujours ancré au centre horizontal, quel que soit le redimensionnement

  • À droite. Ancre à droite mais étire à gauche lors du redimensionnement.

  • Étirer . S’étire horizontalement dans les deux directions lors du redimensionnement.

• Alignement vertical

  • Bas  Ancre en bas mais étire en haut lors du redimensionnement.

  • Centré. Toujours ancré au centre vertical, quel que soit le redimensionnement

  • Haut . Ancre en haut mais étire en bas lors du redimensionnement.

  • Étirer . S’étire verticalement dans les deux directions lors du redimensionnement.

• Paramètres des marges   Valeurs fixes mesurées en pixels (ou en unités indépendantes des périphériques, qui sont approximativement de 1/96 de pouce) pour les marges supérieure, gauche, droite et inférieure. Ces valeurs sont définies lorsque vous faites glisser un élément enfant vers une position dans la grille, et elles représentent la distance entre le bord de l’élément sélectionné et le quadrillage suivant.

Haut de la page

Dimensionnement des éléments enfants

Vous disposez de deux options principales pour le redimensionnement des éléments enfants : dimensionnement fixe ou dimensionnement automatique. Les éléments à taille fixe ont des valeurs Width et Height spécifiques définies dans la catégorie Disposition. Les éléments dimensionnés automatiquement ont les valeurs Width et Height définies sur Auto. Leur redimensionnement s’effectue automatiquement suivant celui du panneau parent.

• MinWidth et MinHeight   Valeur minimale à laquelle un élément peut être redimensionné ou mis à l’échelle dans une ligne ou une colonne.

• MaxWidth et MaxHeight   Valeur maximale à laquelle un élément peut être redimensionné ou mis à l’échelle dans une ligne ou une colonne. Si vous ne souhaitez pas définir une taille maximale, sélectionnez la valeur Infinity.

• Détourer le contenu   Détermine si le panneau parent doit détourer ses éléments enfants.

Haut de la page

Contrôle GridSplitter

GridSplitter est un contrôle utilisé dans un panneau Grille avec lequel un utilisateur interagit pour redimensionner manuellement des parties d’une grille au moment de l’exécution. GridSplitter est disponible dans la Bibliothèque de composants.

Pour plus d’informations sur le panneau Grille, le contrôle GridSplitter ou la procédure à suivre pour créer des panneaux de disposition personnalisés, voir la section Développement .NET du Kit de développement logiciel (SDK) Windows.

Haut de la page

Voir aussi

Concepts

Ajouter ou supprimer une ligne ou une colonne

Modifier l’option de taille d’une ligne ou d’une colonne