Utilisation du panneau de disposition Grille

Le panneau de disposition Grid 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 utiliser des panneaux de disposition Grid  :

• Mode de disposition Grille (mode par défaut)    Fournit une expérience d’édition semblable au comportement de redimensionnement de la Grid , au moment de l’exécution. Dans ce mode, quand vous déplacez les séparateurs de colonnes et de lignes  que vous avez créés, la taille des objets présents dans ces lignes et ces colonnes change pour conserver leurs propriétés Margin .

• Mode de disposition Canevas    Offre une expérience d’édition semblable à celle dans un panneau de canevas. Dans ce mode, quand vous déplacez les séparateurs de colonnes et de lignes que vous avez créés, les objets présents dans ces lignes et ces colonnes restent en place, mais leurs propriétés Margin sont mises à jour.

Vous pouvez basculer entre les deux modes en cliquant sur l’icône de mode dans le coin supérieur gauche quand un objet Grid 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

Ajoutez un objet Grid à un document en sélectionnant Grid   dans le panneau Composants  ou à l’aide du bouton de conteneur de disposition dans le panneau Outils, puis en la faisant glisser avec le pointeur sur la planche graphique. Le code XAML suivant est ajouté à votre projet :

<Grid/>

Pour plus d’informations sur l’utilisation des objets Grid , voir Ajouter ou supprimer une ligne ou une colonne et Modifier l’option de taille d’une ligne ou d’une colonne.

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

Le rôle de la disposition dans un panneau Grid consiste à positionner, dimensionner et organiser efficacement des objets en utilisant les propriétés Alignment , Margin , Width et Height  :

• Alignment    Détermine la position d’un objet par rapport à son objet parent.

• Margins    Détermine l’espace vide autour du contrôle, situé entre l’extérieur de l’objet enfant et les limites du panneau.

• Width et Height    Valeurs fixes mesurées en pixels (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 objets enfants s’effectue automatiquement suivant celui du panneau parent.

Organisation des objets enfants

Vous pouvez réorganiser les objets dans un panneau de disposition Grid en sectionnant des zones de la grille. Pour ce faire, 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 objets dans la grille. Lorsque le panneau de disposition Grid est le conteneur 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 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 objets enfants dans un panneau de disposition Grid de sorte qu’ils se superposent les uns sur les autres. Les objets superposés seront visibles en fonction de leur ordre de plan (l’ordre dans lequel les objets ont été dessinés ou placés au sein de l’objet parent). Pour modifier l’ordre de plan des objets, cliquez sur Trier dans le menu Objet, ou cliquez avec le bouton droit sur les objets dans le panneau Objets et chronologie, pointez sur Trier, puis cliquez sur la commande souhaitée. Les objets 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 objet conteneur, par exemple le panneau de disposition ou les séparateurs de lignes et de colonnes d’un panneau Grille.

Pour plus d’informations, voir Activer ou désactiver l’alignement.

Redimensionnement des lignes et des colonnes

Lorsque vous vous trouvez dans le mode de disposition Grille d’un panneau de disposition Grid , 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 objets 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 projets 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é Width ou Height. 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 objets dans le panneau Grille s’effectuera en fonction de celui de l’objet 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 lorsque vous utilisez le dimensionnement à une taille d’étoile ou fixe. Vous pouvez aussi définir les propriétés MaxWidth et MinWidth d’un séparateur de colonne dans le panneau Propriétés.

Positionnement des objets enfants

En mode de disposition Canevas, vous pouvez positionner des objets visuellement en utilisant directement la planche graphique et en faisant glisser des objets 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 objets enfants au sein d’une grille en définissant les marges de chaque objet. Les marges spécifient le décalage d’un objet à 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 objet enfant dans une position dans une grille, et elles représentent la distance entre le bord de l’objet 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 ( ou comme ceci ), cela signifie que la marge en question n’est pas définie. Si un ornement de marge est fermé ( 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 objets en place là où les marges n’ont pas été définies. En revanche, les objets liés à une marge seront déplacés avec la marge lors du redimensionnement.

Expression Blend utilise une règle simple pour définir l’alignement par défaut : si l’objet 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, avec la valeur de marge indiquée) à gauche et à droite, et non délimité (marges non définies) en haut et en bas

• Alignement horizontal

  • Gauche   Ancre à gauche mais s’étire à droite lors du redimensionnement.

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

  • Droite   Ancre à droite mais s’étire à gauche lors du redimensionnement.

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

• Alignement vertical

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

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

  • Haut . Ancre en haut mais s’é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 (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 objet enfant vers une position dans la grille, et elles représentent la distance entre le bord de l’objet sélectionné et le quadrillage suivant.

Dimensionnement des objets enfants

Vous disposez de deux options principales pour le redimensionnement des objets enfants : dimensionnement fixe ou dimensionnement automatique. Les objets à taille fixe ont des valeurs Width et Height spécifiques définies dans la catégorie Disposition. Les objets 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 objet peut être redimensionné ou mis à l’échelle dans une ligne ou une colonne.

• MaxWidth et MaxHeight   Valeur maximale à laquelle un objet 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 objets enfants.

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 le panneau 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 System.Windows.Controls, espace de noms  de la bibliothèque de classes .NET Framework pour Windows Presentation Foundation (WPF), ou voir la section System.Windows.Controls, espace de noms  de la bibliothèque de classes .NET Framework pour Microsoft Silverlight.

Voir aussi

Tâches

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

Copyright © 2011 Microsoft Corporation. Tous droits réservés.