裝飾項架構

發行項
08/21/2008

更新：2007 年 11 月

在進行視覺化設計時，會需要使用「裝飾項」(Adorner)，這是設計介面上的特殊圖像 (Glyph)。裝飾項通常會附加到「目標控制項」(Target Control)，可供使用者以圖形化方式調整控制項的屬性。例如，當您設計控制項，並按一下邊角來調整它的大小時，這個按一下調整大小的圖像就是裝飾項。

能夠迅速輕鬆設計、修改和重新設定裝飾項的樣式，是 WPF 設計工具架構的重點。本概觀將說明 WPF 設計工具裝飾項擴充性模型如何讓您輕鬆建立自己的裝飾項，以自訂控制項的設計操作。

WPF 設計工具提供彈性的機制來顯示裝飾項。此機制更與彈性的命令系統緊密結合，後者能讓裝飾項回應使用者輸入。您可以使用 MetadataStore，將裝飾項加入到控制項。

裝飾項的類型

裝飾項可建立幾乎任何視覺化設計階段展示的模型，但部分裝飾項類型會重複出現。下表描述常用的裝飾項。

裝飾項	說明
抓取控點	可供移動控制項及調整其大小；無法縮放。
滑軌	在控制項的一側加上刻度或尺規；無法沿著單一座標軸縮放。
框架	表示控制項的界限；可沿著兩個座標軸縮放。
覆疊	擷取控制項區域中的滑鼠互動；可沿著兩個座標軸縮放。這大致類似於 System.ComponentModel 設計工具架構中的主體圖像。

裝飾項特性

WPF 設計工具架構可讓裝飾項具備下列特性：

允許裝飾項從任何 UIElement 類別衍生，並支援 Windows Presentation Foundation 樣式。
允許水平和垂直維度單獨指定所有大小、位置和縮放。
不需要裝飾項基底類別 (Base Class)。裝飾項型別可衍生自任何符合所需的 UIElement 型別。

建立自訂裝飾項

裝飾項是由 AdornerProvider 功能提供者所提供。您可以將 AdornerProvider 功能加入到類別，該類別就會自動將裝飾項加入到設計介面。下列逐步解說將說明如何建立自訂裝飾項。

裝飾項擴充性

裝飾項會根據裝飾項提供者的原則加入。您可以將 UsesItemPolicyAttribute 加入至類別定義，以便將原則加入至 AdornerProvider。

當通過 IsInPolicy 檢查時，裝飾項就會出現在設計介面上。

您可以將裝飾項提供者加入到根據原則提供裝飾項的控制項。當原則中的項目變更時，裝飾項功能連接器會查詢新控制項上的新裝飾項提供者，並顯示更新的一組裝飾項。

WPF 設計工具會實作 PrimarySelectionAdornerProvider，它會提供一組裝飾項供主要選項使用。大多數自訂裝飾項提供者都衍生自這個類別。

裝飾項和配置

對裝飾項來說，最重要的問題就是配置。裝飾項需要各種不同的配置選項。當設計工具介面的縮放設定變更時，就必須考慮到裝飾項的特定延伸或縮放行為。裝飾項必須能夠根據下列配置調整大小和位置。

相對於套用的樣式。
相對於所裝飾控制項的大小和位置。
相對於絕對像素位移。
相對於目前縮放設定。

在 WPF 中，控制配置的常見機制為面板。WPF 設計工具架構控制配置的方式是使用 AdornerPanel 類別來設定設計介面上特定控制項之裝飾項的父代。

AdornerPanel 類別提供方法，可讓裝飾項相對於裝飾項樣式指定的大小、所裝飾控制項的大小或絕對像素大小，來本身的調整大小和位置。這些方法是累加性的方法，表示您可以建立相對大小或位置位移的裝飾項。此位移可設成邏輯像素，可隨著設計工具介面的縮放設定變更時縮放或不縮放。AdornerPlacementCollection 型別會提供指定這些關係的方法。

下列程式碼範例示範如何將裝飾項置於目標控制項的上方。

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

AdornerPanel.SetHorizontalStretch(opacitySlider, AdornerStretch.Stretch)
AdornerPanel.SetVerticalStretch(opacitySlider, AdornerStretch.None)

Dim placement As New AdornerPlacementCollection()

' The adorner's width is relative to the content.
' The slider extends the full width of the control it adorns.
placement.SizeRelativeToContentWidth(1.0, 0)

' The adorner's height is the same as the slider's.
placement.SizeRelativeToAdornerDesiredHeight(1.0, 0)

' Position the adorner above the control it adorns.
placement.PositionRelativeToAdornerHeight(-1.0, 0)

' Position the adorner up 5 pixels. This demonstrates 
' that these placement calls are additive. These two calls
' are equivalent to the following single call:
' PositionRelativeToAdornerHeight(-1.0, -5).
placement.PositionRelativeToAdornerHeight(0, -5)

AdornerPanel.SetPlacements(opacitySlider, placement)

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

AdornerPanel.SetHorizontalStretch(opacitySlider, AdornerStretch.Stretch);
AdornerPanel.SetVerticalStretch(opacitySlider, AdornerStretch.None);

AdornerPlacementCollection placement = new AdornerPlacementCollection();

// The adorner's width is relative to the content.
// The slider extends the full width of the control it adorns.
placement.SizeRelativeToContentWidth(1.0, 0);

// The adorner's height is the same as the slider's.
placement.SizeRelativeToAdornerDesiredHeight(1.0, 0);

// Position the adorner above the control it adorns.
placement.PositionRelativeToAdornerHeight(-1.0, 0);

// Position the adorner up 5 pixels. This demonstrates 
// that these placement calls are additive. These two calls
// are equivalent to the following single call:
// PositionRelativeToAdornerHeight(-1.0, -5).
placement.PositionRelativeToAdornerHeight(0, -5);

AdornerPanel.SetPlacements(opacitySlider, placement);

縮放行為

當設計工具檢視的縮放設定變更為 200% 時，所裝飾的控制項就會放大兩倍呈現。所有距離和字型會變大，而線條會變粗。許多裝飾項設計都會指定即使設計工具檢視的縮放變更時，裝飾項仍保持原始大小不變。

配置空間和轉譯空間

在 WPF 設計工具中，您可以將控制項放置在設計介面上，相對於兩個不同的參考框架：配置空間和轉譯空間。

配置空間定義當 WPF 配置系統計算您的設計配置時，控制項所佔的空間。轉譯空間定義計算出配置且套用所有呈現轉換後，控制項所佔的空間。如需詳細資訊，請參閱配置空間和轉譯空間。

DesignerView

DesignerView 類別提供一組裝飾項集合，會將所有使用者輸入對應到設計工具動作。DesignerView 類別衍生自 Decorator 類別。它為設計工具提供了視覺化介面。請將設計工具之 UI 的根項目 (Root Element) 指派給 DesignerView 的 Child 屬性，並將設計工具檢視上的編輯內容屬性設定為設計工具的編輯內容。

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

DesignerView 類別實作了 WPF 設計工具的兩個方面。

Adorner

DesignerView 類別支援使用覆疊所設計之控制項的其他視覺化裝飾項目，來裝飾檢視中的項目。

輸入傳送

DesignerView 類別會針對裝飾項、工具和工作，將使用者輸入傳遞至命令。

DesignerView 類別的運作方式是在所有內容前面引入兩個其他項目：裝飾項層和點擊測試層。下圖顯示設計工具檢視層與視覺化樹狀結構的關係。

設計工具檢視

DesignerView 類別包含空的建構函式，可供您在 XAML 中使用。

請參閱

共用方式為