Adorner-Architektur

Artikel
08/10/2011

Die visuelle Entwurfsumgebung erfordert Adorner, bei denen es sich um besondere Symbole auf der Entwurfsoberfläche handelt. Adorner werden normalerweise an ein Zielsteuerelement angefügt, und sie bieten dem Benutzer ein grafisches Mittel zum Anpassen der Eigenschaften des Steuerelements. Wenn Sie beispielsweise ein Steuerelement entwerfen und auf eine Ecke klicken, um seine Größe zu ändern, handelt es sich beim Symbol für die Größenanpassung, auf das Sie klicken, um einen Adorner.

Die Möglichkeit, Adorner schnell und problemlos zu entwerfen, zu verfeinern und neu zu formatieren, ist für die WPF-Designer-Architektur wichtig. In dieser Übersicht wird erläutert, wie Sie mit dem Adorner-Erweiterbarkeitsmodell im WPF-Designer ohne Weiteres eigene Adorner zum Anpassen der Entwurfsumgebung für die Steuerelemente erstellen können.

Der WPF-Designer bietet einen flexiblen Mechanismus zum Anzeigen von Adornern. Dieser Mechanismus ist mit einem flexiblen Befehlssystem verbunden, das es Adornern ermöglicht, auf Benutzereingaben zu reagieren. Sie fügen einem Steuerelement Adorner hinzu, indem Sie die IProvideAttributeTable-Schnittstelle implementieren.

Arten von Adornern

Adorner können für fast jede visuelle Entwurfszeitpräsentation ein Modell erstellen, einige Typen von Adornern werden jedoch immer wieder angezeigt. In der folgenden Tabelle werden häufig verwendete Adorner beschrieben.

Adorner	Beschreibung
Ziehpunkt	Ermöglicht das Verschieben und das Anpassen der Größe eines Steuerelements; keine Skalierung.
Schiene	Fügt eine Markierung oder ein Lineal an einer Seite eines Steuerelements hinzu; keine Skalierung entlang einer einzelnen Achse.
Frame	Stellt die Grenzen eines Steuerelements dar; Skalierung entlang beider Achsen.
Overlay	Zeichnet Mausinteraktionen im Bereich des Steuerelements auf; Skalierung entlang beider Achsen. Entspricht ungefähr dem Textsymbol im System.ComponentModel-Designerframework.

Merkmale von Adornern

Das WPF-Designer-Framework aktiviert Adorner, die die folgenden Eigenschaften haben.

Adorner können von jeder UIElement-Klasse abgeleitet werden und Windows Presentation Foundation-Formate unterstützen.
Größe, Position und Skalierung kann in jedem Fall unabhängig für die horizontalen und vertikalen Dimensionen angegeben werden.
Es ist keine Adornerbasisklasse erforderlich. Adornertypen können von jedem UIElement-Typ abgeleitet werden, der Ihren Anforderungen entspricht.

Erstellen von benutzerdefinierten Adornern

Adorner werden vom AdornerProvider-Featureanbieter bereitgestellt. Sie können ein AdornerProvider-Feature zu einer Klasse hinzufügen, die Adorner automatisch zur Entwurfsoberfläche hinzufügt. In den folgenden exemplarischen Vorgehensweisen wird erläutert, wie Sie benutzerdefinierte Adorner erstellen.

Adornererweiterbarkeit

Adorner werden entsprechend der Richtlinie eines Adorneranbieters hinzugefügt. Sie können einem AdornerProvider eine Richtlinie hinzufügen, indem Sie der Klassendefinition das UsesItemPolicyAttribute hinzufügen.

Wenn die IsInPolicy-Überprüfung erfolgreich ausgeführt wurde, wird der Adorner auf der Entwurfsoberfläche angezeigt.

Sie können Adorneranbieter zu einem Steuerelement hinzufügen, das Adorner für eine gegebene Richtlinie anbietet. Wenn sich die Elemente in der Richtlinie ändern, führt die Adornerfeatureverbindung eine Abfrage für neue Adorneranbieter auf neuen Steuerelementen aus und zeigt einen aktualisierten Satz von Adornern an.

Der WPF-Designer implementiert den PrimarySelectionAdornerProvider, welcher einen Satz von Adornern bietet, die für die primäre Auswahl angezeigt werden. Die meisten benutzerdefinierten Adorneranbieter werden von dieser Klasse abgeleitet.

Adorner und Layout

Das wichtigste Problem für Adorner ist das Layout. Adorner erfordern eine Vielzahl von Layoutoptionen. Das spezifische Streck- oder Skalierungsverhalten für einen Adorner muss berücksichtigt werden, wenn die Zoomeinstellung für die Entwurfsoberfläche geändert wird. Adorner müssen in der Lage sein, ihre Größe und Position entsprechend den folgenden Schemas anzupassen.

Relativ zum angewendeten Format
Relativ zur Größe und der Position des erweiterten Steuerelements
Relativ zu absoluten Pixeloffsets
Relativ zur aktuellen Zoomeinstellung

In WPF ist der Bereich der typische Mechanismus für die Layoutsteuerung. Das WPF-Designer-Framework steuert das Layout, indem es die AdornerPanel-Klasse für übergeordnete Adorner für ein gegebenes Steuerelement auf einer Entwurfsoberfläche verwendet.

Die AdornerPanel-Klasse enthält Methoden, die ein Skalieren und Positionieren des Adorner relativ zum erweiterten Steuerelement ermöglichen. Verwenden Sie die Methoden SetAdornerHorizontalAlignment, SetAdornerVerticalAlignment und SetAdornerMargin, um die Position des Adorners anzugeben.

Tipp

Wenn Sie ein Steuerelement als Adorner einem anderen Steuerelement hinzufügen, wird das Adorner-Steuerelement so angeordnet, dass es der Breite, Höhe und Transformation des Steuerelements entspricht, dem es hinzugefügt wurde. Dies kann zu Problemen mit Abschneidungen führen. Diese Probleme können am einfachsten vermieden werden, indem Sie das Steuerelement einer Canvas hinzufügen und dann die Canvas als Adorner hinzufügen. Die Breite und Höhe der Canvas werden angepasst, aber die Größe des Canvas-Steuerelements wird nicht an den Inhalt angepasst, sodass das Steuerelement nur innerhalb der Canvas angeordnet wird.

Im folgenden Codebeispiel wird veranschaulicht, wie ein Adorner über dem Zielsteuerelement positioniert wird.

' 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));

Zoomverhalten

Wenn die Zoomeinstellung für die Entwurfsoberfläche auf 200 % geändert wird, wird das erweiterte Steuerelement mit der doppelten Größe gerendert. Alle Entfernungen und Schriftarten werden größer und Linien dicker dargestellt. In vielen Adornerentwürfen ist festgelegt, dass Adorner ihre ursprüngliche Größe selbst dann beibehalten, wenn sich der Zoom in der Designeransicht ändert.

DesignerView

Die DesignerView-Klasse stellt eine Auflistung von Adornern bereit und ordnet alle Benutzereingaben den Bewegungen im Designer zu. Die DesignerView-Klasse wird aus der Decorator-Klasse abgeleitet. Sie bietet eine visuelle Oberfläche für den Designer. Weisen Sie der Child-Eigenschaft der DesignerView das Stammelement der Benutzeroberfläche des Designers zu, und legen Sie die Bearbeitungskontexteigenschaft in der Designeransicht so fest, dass sie auf den Bearbeitungskontext für den Designer zeigt.

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

Die DesignerView-Klasse implementiert zwei Aspekte von WPF-Designer.

Adorner

Die DesignerView-Klasse bietet Unterstützung für das Erweitern von Elementen in der Ansicht mit weiteren visuellen Zusatzelementen, die die entworfenen Steuerelemente überlagern.

Eingaberouting

Die DesignerView-Klasse leitet Benutzereingaben an Befehle für Adorner, Tools und Aufgaben weiter.

Die DesignerView-Klasse fügt zwei zusätzliche Elemente vor dem Inhalt ein: eine Adornerebene und eine Treffertestebene. Das folgende Diagramm zeigt die Beziehung der Designeransichtsebenen zur visuellen Struktur.

Designeransicht

Die DesignerView-Klasse verfügt über einen leeren Konstruktor, der in XAML verwendet wird.

Siehe auch