装飾アーキテクチャ

2008-09-30

更新 : 2007 年 11 月

ビジュアルデザイン環境には、デザインサーフェイス上の特殊なグリフである装飾が必要です。装飾は通常、対象のコントロールにアタッチされ、これにより、コントロールのプロパティを調整する視覚的な手段がユーザーに提供されます。たとえば、コントロールをデザインしているときに、コントロールの角をクリックしてサイズを変更する場合、クリックするサイズ指定のグリフが装飾です。

装飾のドラフト作成、調整、およびスタイル変更をすばやく簡単に行うことは、WPF デザイナアーキテクチャにとって重要です。この概要では、WPF デザイナの装飾機能拡張モデルを使用して、独自の装飾を簡単に作成し、コントロールのデザイン環境をカスタマイズする方法について説明します。

WPF デザイナには、装飾を表示するための柔軟な機構が用意されています。この機構を柔軟なコマンドシステムと一緒に使用することで、装飾はユーザー入力に応答できます。コントロールに装飾を追加するには、MetadataStore を使用します。

装飾の種類

装飾は、ほとんどすべてのビジュアルなデザイン時表示をモデル化できますが、一定の種類の装飾は繰り返し表示されます。一般的に使用される装飾を次の表に示します。

装飾	説明
グラブハンドル	コントロールの移動とサイズ変更を行います。スケーリングは行いません。
レール	コントロールの 1 つの辺にマーカーまたは規則を追加します。単一の軸に沿ったスケーリングは行いません。
フレーム	コントロールの境界を表示します。両方の軸に沿ったスケーリングを行います。
オーバーレイ	コントロールの領域内でマウス操作をキャプチャします。両方の軸に沿ったスケーリングを行います。System.ComponentModel デザイナフレームワークの本体グリフにほぼ相当するものです。

装飾の特性

WPF デザイナフレームワークでは、次のような特性を持つ装飾を使用できます。

装飾は UIElement クラスから派生でき、Windows Presentation Foundation スタイルをサポートできます。
水平方向と垂直方向それぞれ別々に、サイズ、位置、およびスケーリングをすべて指定できます。
装飾の基本クラスは必要ありません。装飾型は、ニーズに合った 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% に変更されると、装飾コントロールは 2 倍のサイズで描画されます。すべての距離とフォントが大きくなり、線は太くなります。多くの装飾デザインでは、デザイナビューのズームが変更されても、装飾のサイズは変わらないように指定されています。

レイアウト空間と描画空間

WPF デザイナでは、レイアウト空間と描画空間という 2 つの参照フレームを相対的な基準として、デザインサーフェイス上にコントロールを配置できます。

レイアウト空間は、WPF レイアウトシステムがデザインのレイアウトを計算するときにコントロールが占める空間を定義します。描画空間は、レイアウトが計算され、すべての描画変換が適用された後に、コントロールが占める空間を定義します。詳細については、「レイアウト空間と描画空間」を参照してください。

DesignerView

DesignerView クラスは装飾のコレクションを提供し、すべてのユーザー入力をデザイナジェスチャに対応付けます。DesignerView クラスは Decorator クラスから派生します。デザイナにビジュアルサーフェイスを提供します。デザイナの UI のルート要素を DesignerView の Child プロパティに割り当て、デザイナビューの編集コンテキストプロパティをデザイナの編集コンテキストに設定します。

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

DesignerView クラスは、WPF デザイナの 2 つの要素を実装しています。

Adorner

DesignerView クラスは、デザインされるコントロールをオーバーレイする追加のビジュアル装飾を使用して、ビュー内の要素の装飾をサポートします。

入力のルーティング

DesignerView クラスは、ユーザー入力を、装飾、ツール、およびタスクのコマンドにルーティングします。

DesignerView クラスは、すべてのコンテンツの前に装飾レイヤとヒットテストレイヤという 2 つの要素を導入することによって動作します。次の図は、デザイナビューレイヤとビジュアルツリーの関係を示しています。

デザイナビュー

DesignerView クラスには、XAML で使用される空のコンストラクタがあります。

参照

次の方法で共有