Vue d’ensemble de la disposition

Microsoft Expression Blend facilite la création de dispositions de page aussi bien simples que complexes grâce à l’utilisation des divers panneaux de disposition ou de vos propres panneaux personnalisés. Les panneaux de disposition sont des éléments qui contrôlent la position, la taille, les dimensions et l’organisation d’autres éléments qu’ils contiennent. Ils jouent essentiellement le rôle de conteneurs. L’un des avantages des panneaux de disposition est que vous pouvez y organiser les éléments.

Remarque :
Seul le panneau de disposition Canevas est disponible dans les projets Microsoft Silverlight 1.0. De plus, seuls les panneaux de disposition Grille, Canevas, StackPanel, ScrollViewer et Border sont disponible dans les projets Silverlight 2.

Ces panneaux sont adaptables dans la mesure où vous pouvez les implémenter implicitement. Cela signifie que leur taille se redimensionne ou s’adapte automatiquement à celle de la fenêtre. Vous pouvez en tirer parti dans plusieurs scénarios, par exemple lorsque vous générez une interface utilisateur (IU) qui autorise diverses dimensions d’écran et résolutions et qui répond aux besoins de la localisation. Vous pouvez également utiliser des tailles fixes en choisissant d’implémenter explicitement les panneaux de disposition ; dans ce cas, les valeurs des attributs de hauteur (Width) et de largeur (Height) de la disposition sont fixes, de sorte que la taille d’une zone située dans la disposition ne change pas, même si la fenêtre d’application est redimensionnée.

Remarque :
Lorsque vous modifiez la propriété Width ou Height d’un objet d’une valeur fixe en Auto, elle prend la valeur minimale par défaut.

Vous pouvez également transformer un élément dans un panneau de disposition pour définir une position d’affichage après disposition. Ceci est très utile pour les animations (par exemple, pour déplacer un élément en dehors des limites d’un panneau Grille et le faire revenir à sa place en volant). Les transformations sont relatives à la position de disposition. Par conséquent, la catégorie Transformer du panneau Propriétés indique que la position par défaut est (0,0). Dans la plupart des cas, vous n’appliquerez pas de transformations à un élément au sein d’un panneau de disposition, à l’exception des animations, dans lesquelles un élément doit pouvoir se déplacer par rapport à la dernière position de disposition.

Panneaux de disposition

Expression Blend possède cinq panneaux de disposition principaux, chacun d’eux étant conçu pour gérer un type de disposition particulier. Le tableau suivant décrit ces panneaux.

Panneau	Name	Description
	Grille	Organise les éléments enfants en une disposition très souple de lignes et de colonnes qui forme une grille. Pour plus d’informations, voir Panneau Grille.
	Canvas (canevas)	Organise les éléments enfants en fonction de coordonnées x et y absolues. Un canevas vous permet d’avoir des positions fixes pour les éléments à l’écran lors de l’exécution, à l’image d’un canevas vide. Pour plus d’informations, voir Panneau Canevas (Canvas).
	Empilement	Organise les éléments enfants en une ligne unique pouvant être orientée, ou empilée, horizontalement ou verticalement. Pour plus d’informations, voir Panneau d’empilement.
	Wrap	Organise les éléments enfants en position séquentielle de gauche à droite, et lorsqu’il n’y a plus de place à l’extrémité droite du panneau, il renvoie le contenu à la ligne suivante, et ainsi de suite de gauche à droite, de haut en bas. L’orientation d’un panneau de renvoi à la ligne peut également être verticale, les éléments enfants étant alors disposés en un flux allant de haut en bas, puis de gauche à droite. Pour plus d’informations, voir Panneau d’agencement.
	Ancrage	Organise les éléments enfants de sorte qu’ils restent, ou s’ancrent, sur un bord du panneau. Pour plus d’informations, voir Panneau d’ancrage.

Haut de la page

Autres conteneurs de disposition

D’autres conteneurs de disposition ont également une incidence sur l’organisation des éléments en leur sein. Toutefois, ces conteneurs ne sont pas optimisés pour prendre en charge le développement d’interfaces utilisateur plus puissantes que les principaux panneaux gèrent de manière plus efficace. Le tableau suivant décrit les autres conteneurs de disposition.

Élément	Name	Description
	Bordure	Élément simple qui dessine une bordure, un arrière-plan ou les deux autour d’un élément. Le contrôle Bordure ne prend qu’un élément enfant. Si vous positionnez un panneau Grille ou canevas à l’intérieur de la bordure, vous pourrez utiliser plusieurs éléments enfants. Pour plus d’informations sur l’élément Bordure, voir Autres conteneurs de disposition.
	BulletDecorator	Élément ne pouvant prendre que deux éléments enfants, généralement une chaîne de texte et un glyphe (qui représente un contrôle du type case à cocher). Pour plus d’informations sur l’élément BulletDecorator, voir Autres conteneurs de disposition.
	Popup	Fenêtre qui s’affiche en regard de tous les autres contenus d’une application, mais par rapport à un autre élément. Vous pouvez utiliser un menu contextuel pour fournir des informations et des options supplémentaires aux utilisateurs qui interagissent avec l’élément d’interface utilisateur principal auquel le menu contextuel est lié. L’élément Popup prend un élément enfant unique et se positionne lui-même en fonction d’un élément cible. Par défaut, un élément Popup a un seul élément enfant : un panneau Grille. Le panneau Grille vous permet d’utiliser plusieurs éléments enfants dans un élément Popup immédiatement après l’avoir dessiné. Dans la plupart des cas, il n’est pas nécessaire de créer directement un menu contextuel. Il suffit simplement de faire appel à un contrôle, tel qu’un menu ou une zone de liste déroulante, qui possède un menu contextuel dans son modèle. Pour plus d’informations sur l’élément Popup, voir Autres conteneurs de disposition.
	ScrollViewer	Élément qui vous permet d’activer le défilement des éléments enfants qu’il contient. Il ne prend qu’un seul élément enfant. Par conséquent, il est généralement préférable d’utiliser un panneau de disposition, tel qu’un panneau d’empilement, un panneau canevas ou un panneau Grille à l’intérieur. L’élément ScrollViewer est utilisé dans les modèles d’autres contrôles, comme les zones de liste, pour prendre en charge le défilement de contenu. Lorsque le contenu à l’intérieur d’un élément ScrollViewer est trop important, vous pouvez autoriser le détourage de ce contenu. Vous pouvez également contrôler que les barres de défilement soient indisponibles, masquées, visibles ou automatiquement affichées uniquement lorsqu’elles sont nécessaires. Pour plus d’informations sur l’élément ScrollViewer, voir Autres conteneurs de disposition.
	UniformGrid	Organise les éléments enfants dans des régions de grille égales ou uniformes. L’élément UniformGrid n’est pas une variante du panneau Grille, mais plus exactement un élément de disposition en mosaïque, car il crée un espace égal entre chaque élément qu’il contient en fonction du nombre de lignes et de colonnes que vous spécifiez. Dès que vous ajoutez des éléments enfants à un élément UniformGrid, chaque élément est positionné dans une région, à partir du haut à gauche vers le bas à droite, jusqu’à ce que la grille soit remplie. Ceci est utile pour les contrôles de type Liste des images. Pour plus d’informations sur l’élément UniformGrid, voir Autres conteneurs de disposition.
	Viewbox	Met à l’échelle tous ses éléments enfants, en grande partie comme un contrôle zoom. Étant donné que l’élément viewbox n’accepte qu’un seul élément enfant, vous positionnez un panneau canevas ou grille à l’intérieur pour pouvoir bénéficier de l’effet de zoom sur plusieurs éléments enfants. Pour plus d’informations sur l’élément Viewbox, voir Autres conteneurs de disposition.

Haut de la page

Le conteneur de disposition racine

Sous Objets et chronologie dans le panneau Interaction, vous pouvez remarquer un élément nommé LayoutRoot. Cet élément représente le panneau de disposition racine d’un document Expression Blend. Par défaut, la racine de la disposition est un panneau Grille. Le panneau Grille, dans la plupart des cas, doit être suffisant pour la disposition des pages de niveau supérieur. Vous pouvez toutefois changer la racine de la disposition par un autre panneau de disposition ; pour ce faire, cliquez dessus avec le bouton droit de la souris, pointez sur Modifier le type de disposition, puis sélectionnez un autre panneau de disposition. Vous pouvez également décider d’avoir un panneau canevas en tant qu’élément LayoutRoot par défaut au lieu d’un panneau Grille, en désactivant la case à cocher Utiliser par défaut le panneau Grille pour la disposition des nouveaux éléments dans la section Projet de la boîte de dialogue Options (dans le menu Outils).

Haut de la page

Calques

Les calques constituent un moyen rapide et facile de créer des conteneurs de présentation au niveau de la page pour en organiser le contenu. Les calques sont particulièrement utiles pour l’importation de contenu à partir d’autres programmes, tels que Microsoft Expression Design 2. Les conceptions graphiques que vous importez d’Expression Design 2 peuvent également utiliser un panneau canevas pour chaque calque importé.

Vous pouvez créer un calque à l’aide de la commande Créer un calque dans le menu Outils. Expression Blend crée un calque en fonction de ce que spécifie l’élément LayoutRoot pour le document actuel.

Dessin conceptuel de calques

Haut de la page

Utiliser des éléments enfants

Expression Blend tente d’ajouter des éléments enfants à la racine (ou panneau le plus haut) dans un document. Toutefois, si un autre conteneur de disposition est actif ailleurs dans l’arborescence d’objets, les éléments enfants sont ajoutés à ce conteneur. Vous pouvez activer un élément en double-cliquant sur le panneau de disposition. Un cadre lumineux jaune autour du panneau indique que celui-ci est désormais l’élément actif. Le cadre lumineux jaune apparaît à la fois sur la planche graphique et sous Objets et chronologie dans le panneau Interaction. Quand vous créez un nouveau panneau et que vous dessinez immédiatement des éléments enfants à l’intérieur de ses bordures, ceux-ci sont placés dans le panneau que vous venez de créer. Cela est dû au fait qu’un panneau nouvellement créé devient automatiquement l’élément actif.

L’élément magGlass est l’élément actif actuel auquel les nouveaux objets enfants seront ajoutés

Expression Blend permet également de faire glisser facilement des éléments enfants entre des panneaux pour les rendre à nouveau parents dans un autre conteneur de disposition. L’image suivante montre une ellipse orange en cours de déplacement du panneau Grille de disposition racine vers un autre panneau Grille. Un rectangle englobant en pointillé et un message apparaissent autour du panneau si celui-ci peut accepter un élément enfant. Maintenez la touche Alt enfoncée avant de libérer le bouton de la souris pour terminer cette opération.

Opération consistant à rendre un objet à nouveau parent du panneau Grille racine dans un autre panneau Grille

Haut de la page

Disposition complexe

Parfois, vous avez besoin pour la disposition de votre page d’une flexibilité plus grande que ne peut vous offrir un simple panneau de disposition. Un moyen pour créer des dispositions complexes consiste à utiliser des panneaux de disposition en tant que conteneurs pour d’autres panneaux de disposition. Par exemple, vous pouvez utiliser un panneau d’ancrage dans l’élément LayoutRoot (qui, par défaut, est le panneau Grille). Cette opération organise la page en un ensemble de régions contenant généralement chacune un ou plusieurs contrôles.

Pour plus d’informations sur la disposition, voir la section concernant le développement de .NET dans le Kit de développement logiciel (SDK) Microsoft Windows.

Haut de la page