裝飾項架構

發行項
08/12/2011

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

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

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

裝飾項的類型

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

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

裝飾項特性

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

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

建立自訂裝飾項

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

裝飾項擴充性

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

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

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

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

裝飾項和配置

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

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

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

AdornerPanel 類別提供數個方法，可用來調整裝飾項的大小以及相對於裝飾控制項的位置。若要指定裝飾項位置，請使用 SetAdornerHorizontalAlignment、SetAdornerVerticalAlignment 與 SetAdornerMargin 方法。

注意事項
當您將控制項加入至另一個控制項做為裝置項時，這個裝飾項控制項會調整成符合其所裝飾控制項的寬度、高度和轉換。這可能會產生裁剪問題。對付這類裁剪問題最簡單的因應之道，就是將您的控制項加入至 Canvas，然後加入畫布做為裝飾項。 Canvas 的寬度和高度會受到調整，但是 Canvas 控制項不會隨其內容受到裁剪或調整大小，因此您的控制項只會在畫布內進行調整。

當您將控制項加入至另一個控制項做為裝置項時，這個裝飾項控制項會調整成符合其所裝飾控制項的寬度、高度和轉換。這可能會產生裁剪問題。對付這類裁剪問題最簡單的因應之道，就是將您的控制項加入至 Canvas，然後加入畫布做為裝飾項。 Canvas 的寬度和高度會受到調整，但是 Canvas 控制項不會隨其內容受到裁剪或調整大小，因此您的控制項只會在畫布內進行調整。

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

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

縮放行為

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

DesignerView

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

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

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

裝飾項

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

輸入傳送

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

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

設計工具檢視

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

請參閱

共用方式為