次の方法で共有

装飾アーキテクチャ

  • [アーティクル]

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

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

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

装飾の種類

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

装飾

説明

グラブ ハンドル

コントロールの移動とサイズ変更を行います。スケーリングは行いません。

レール

コントロールの 1 つの辺にマーカーまたは規則を追加します。単一の軸に沿ったスケーリングは行いません。

フレーム

コントロールの境界を表示します。両方の軸に沿ったスケーリングを行います。

オーバーレイ

コントロールの領域内でマウス操作をキャプチャします。両方の軸に沿ったスケーリングを行います。 System.ComponentModel デザイナー フレームワークの本体グリフにほぼ相当するものです。

装飾の特性

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

  • 装飾は UIElement クラスから派生でき、Windows Presentation Foundation スタイルをサポートできます。

  • 水平方向と垂直方向それぞれ別々に、サイズ、位置、およびスケーリングをすべて指定できます。

  • 装飾の基本クラスは必要ありません。 装飾型は、ニーズに合った UIElement 型から派生できます。

カスタム装飾の作成

装飾は、AdornerProvider 機能プロバイダーによって提供されます。 AdornerProvider 機能をクラスに追加すると、装飾がデザイン サーフェイスに自動的に追加されます。 次のチュートリアルは、カスタム装飾を作成する方法を示しています。

装飾の拡張性

装飾は装飾プロバイダーのポリシーに従って追加されます。 ポリシーは、UsesItemPolicyAttribute をクラス定義に追加することによって AdornerProvider に追加できます。

IsInPolicy チェックが適合すると、デザイン サーフェイス上に装飾が表示されます。

指定のポリシーに装飾を提供するコントロールに、装飾プロバイダーを追加できます。 ポリシー内のアイテムに変更があると、装飾機能コネクタが新しいコントロール上の新しい装飾プロバイダーについて照会し、更新された装飾のセットを表示します。

WPF デザイナーは、主要な選択に対して表示される装飾のセットを提供する、PrimarySelectionAdornerProvider を実装します。 ほとんどのカスタム装飾プロバイダーは、このクラスから派生しています。

装飾とレイアウト

装飾にとって、最も重要な問題はレイアウトです。 装飾には、多様なレイアウト オプションが必要です。 デザイン サーフェイスのズーム設定が変わる場合は、装飾独自の伸縮やスケーリングの動作を考慮する必要があります。 装飾は、次の方法に従って、装飾自体のサイズと位置を設定できる必要があります。

  • 適用されるスタイルを基準とする。

  • 装飾されるコントロールのサイズと位置を基準とする。

  • 絶対ピクセル オフセットを基準とする。

  • 現在のズーム設定を基準とする。

WPF においてレイアウトを制御する一般的な機構はパネルです。 WPF デザイナー フレームワークは、デザイン サーフェイス上の指定のコントロールの装飾を処理する AdornerPanel クラスを使用して、レイアウトを制御します。

AdornerPanel クラスは、装飾されるコントロールを基準にして装飾のサイズと位置を設定できるメソッドを備えています。 装飾の位置を指定するには、SetAdornerHorizontalAlignment、SetAdornerVerticalAlignment、SetAdornerMargin の各メソッドを使用します。

注意

コントロールを装飾として別のコントロールに追加すると、その装飾コントロールは、装飾するコントロールの幅、高さ、および変換に合わせて配置されます。 このために、クリッピングの問題が発生することがあります。 こうしたクリッピングの問題の最も簡単な解決方法は、コントロールを 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% に変更されると、装飾コントロールは 2 倍のサイズで描画されます。 すべての距離とフォントが大きくなり、線は太くなります。 多くの装飾デザインでは、デザイナー ビューのズームが変更されても、装飾のサイズは変わらないように指定されています。

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 で使用される空のコンストラクターがあります。

参照

処理手順

チュートリアル : デザイン時装飾の作成

参照

AdornerPanel

AdornerProvider

DesignerView

その他の技術情報

WPF デザイナーの機能拡張