Architecture d'ornement

Article
08/10/2011

L'expérience de conception visuelle nécessite des ornements qui sont des glyphes spéciaux sur l'aire de conception. En général, les ornements sont attachés à un contrôle cible et offrent à l'utilisateur un moyen graphique d'ajuster les propriétés du contrôle. Par exemple, lorsque vous concevez un contrôle, si vous cliquez sur un coin pour le redimensionner, le glyphe de dimensionnement sur lequel vous cliquez est un ornement.

La possibilité d'ébaucher, d'affiner et de restyliser des ornements de manière simple et rapide s'avère importante pour l'architecture du Concepteur WPF. Cette vue d'ensemble explique comment le modèle d'extensibilité d'ornements du Concepteur WPF simplifie la création d'ornements pour personnaliser l'expérience de conception de vos contrôles.

Le Concepteur WPF offre un mécanisme souple permettant d'afficher les ornements. Ce mécanisme est associé à un système de commande souple qui permet aux ornements de répondre à l'entrée d'utilisateur. Vous ajoutez des ornements à un contrôle en implémentant l'interface IProvideAttributeTable.

Types d'ornements

Les ornements peuvent modéliser presque toutes les présentations visuelles au moment du design. Toutefois, quelques types d'ornements s'affichent à plusieurs reprises. Le tableau suivant décrit les ornements fréquemment utilisés.

Ornement	Description
Poignée de manipulation	Permet de déplacer et de dimensionner un contrôle ; pas de mise à l'échelle.
Rail	Ajoute un marqueur ou une règle sur un côté d'un contrôle ; pas de mise à l'échelle sur un axe unique.
Cadre	Représente les limites d'un contrôle ; mise à l'échelle le long des deux axes.
Superposition	Capture des interactions de la souris dans la zone du contrôle ; mise à l'échelle le long des deux axes. Équivalent au glyphe de corps dans l'infrastructure du concepteur System.ComponentModel.

Caractéristiques des ornements

L'infrastructure du Concepteur WPF active des ornements qui présentent les caractéristiques suivantes.

Possibilité de dériver des ornements de n'importe quelle classe UIElement et de prendre en charge les styles WPF (Windows Presentation Foundation).
Possibilité de spécifier toutes les tailles, positions et mises à l'échelle de manière indépendante pour les dimensions horizontales et verticales.
Suppression de la nécessite d'une classe de base d'ornement. Les types d'ornements peuvent être dérivés de n'importe quel type UIElement qui répond à vos besoins.

Création d'ornements personnalisés

Les ornements sont fournis par le fournisseur de fonctionnalités AdornerProvider. Vous pouvez ajouter une fonctionnalité AdornerProvider à une classe, qui ajoute automatiquement des ornements à l'aire de conception. Les procédures pas à pas suivantes vous indiquent comment créer des ornements personnalisés.

Extensibilité des ornements

Les ornements sont ajoutés en fonction de la stratégie d'un fournisseur d'ornements. Vous ajoutez une stratégie à AdornerProvider en intégrant UsesItemPolicyAttribute dans la définition de classe.

Lorsque le contrôle IsInPolicy réussit, l'ornement s'affiche sur l'aire de conception.

Vous pouvez ajouter des fournisseurs d'ornements à un contrôle qui offre des ornements pour une stratégie donnée. En cas de modification des éléments de la stratégie, le connecteur de fonctionnalités d'ornement interroge les nouveaux contrôles sur les nouveaux fournisseurs d'ornements et affiche un jeu d'ornements mis à jour.

Le Concepteur WPF implémente PrimarySelectionAdornerProvider, qui offre un jeu d'ornements affichés pour la sélection principale. La plupart des fournisseurs d'ornements personnalisés dérivent de cette classe.

Ornements et disposition

La disposition représente le problème le plus important pour les ornements. En effet, les ornements requièrent une grande diversité d'options de disposition. Le comportement d'étirement ou de mise à l'échelle spécifique d'un ornement doit être pris en compte en cas de modification du paramètre de zoom pour l'aire du concepteur. Les ornements doivent pouvoir se dimensionner et se positionner selon les schémas suivants :

par rapport au style appliqué ;
par rapport à la taille et à la position du contrôle orné ;
par rapport aux décalages de pixels absolus ;
par rapport au paramètre de zoom actuel.

Dans WPF, le panneau représente le mécanisme classique de contrôle de la disposition. L'infrastructure du Concepteur WPF contrôle la disposition à l'aide de la classe AdornerPanel sur les ornements parents pour un contrôle donné sur une aire de conception.

La classe AdornerPanel offre des méthodes qui permettent de dimensionner et de positionner les ornements par rapport au contrôle orné. Pour spécifier l'emplacement de l'ornement, utilisez les méthodes SetAdornerHorizontalAlignment, SetAdornerVerticalAlignment et SetAdornerMargin.

Notes

Lorsque vous ajoutez un contrôle comme ornement à un autre contrôle, le contrôle d'ornement est modifié pour correspondre à la largeur, la hauteur et la transformation du contrôle possédant l'ornement. Cela peut mener à des problèmes de découpage. La solution la plus simple à ces problèmes de découpage est d'ajouter votre contrôle à un Canvas, puis d'ajouter la zone de dessin en tant qu'ornement. La largeur et la hauteur du Canvas sont ajustées, mais le contrôle Canvas ne s'ajuste pas au contenu, votre contrôle est alors uniquement modifié dans la zone de dessin.

L'exemple de code suivant indique comment positionner un ornement au-dessus du contrôle cible.

' Setup the adorner panel.
' All adorners are placed in an AdornerPanel
' for sizing and layout support.
Dim myPanel = Me.Panel

' The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment( _
    opacitySlider, _
    AdornerHorizontalAlignment.Stretch)

' Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment( _
    opacitySlider, _
    AdornerVerticalAlignment.OutsideTop)

' Position the adorner 5 pixels above the control. 
AdornerPanel.SetAdornerMargin( _
    opacitySlider, _
    New Thickness(0, 0, 0, 5))

// Setup the adorner panel.
// All adorners are placed in an AdornerPanel
// for sizing and layout support.
AdornerPanel myPanel = this.Panel;

// The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment( 
    opacitySlider, 
    AdornerHorizontalAlignment.Stretch);

// Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment(
    opacitySlider, 
    AdornerVerticalAlignment.OutsideTop);

// Position the adorner 5 pixels above the control. 
AdornerPanel.SetAdornerMargin(
    opacitySlider, 
    new Thickness(0, 0, 0, 5));

Comportement de zoom

Lorsque le paramètre de zoom du mode concepteur prend la valeur 200 %, le contrôle orné est restitué au double de sa taille. Toutes les distances et les polices sont plus grandes et les lignes sont plus épaisses. La plupart des conceptions d'ornement spécifient que la taille d'origine de l'ornement est préservée même en cas de modification du zoom du mode concepteur.

DesignerView

La classe DesignerView fournit une collection d'ornements et mappe toutes les entrées d'utilisateur aux mouvements du concepteur. La classe DesignerView dérive de la classe Decorator. Elle fournit une aire de conception visuelle pour le concepteur. Assignez l'élément racine de l'interface utilisateur du concepteur à la propriété Child de DesignerView et définissez la propriété de contexte d'édition du mode concepteur afin qu'elle pointe vers le contexte d'édition du concepteur.

DesignerView view = new DesignerView();
view.Child = documentManager.View;
view.Context = editingContext;

La classe DesignerView implémente deux aspects du Concepteur WPF.

Ornements

La classe DesignerView fournit la prise en charge de l'ornementation des éléments dans la vue avec des ornements visuels supplémentaires qui se superposent aux contrôles conçus.

Routage des entrées

La classe DesignerView dirige l'entrée d'utilisateur vers les commandes des ornements, outils et tâches.

La classe DesignerView introduit deux éléments supplémentaires devant l'ensemble du contenu : une couche d'ornements et une couche de test de positionnement. Le schéma suivant affiche la relation entre les couches du mode concepteur et l'arborescence d'éléments visuels.

Vue Concepteur

La classe DesignerView contient un constructeur vide à utiliser en XAML.

Voir aussi

Partager via