チュートリアル : デザイン時装飾の作成
更新 : 2007 年 11 月
このチュートリアルでは、WPF (Windows Presentation Foundation) カスタム コントロール用のデザイン時装飾を作成する方法について説明します。Windows Presentation Foundation (WPF) Designer for Visual Studio 内でこの装飾を使用して、カスタム ボタン コントロールの Opacity プロパティ値を設定できます。このチュートリアルでは、コントロールは単純なボタンであり、装飾はボタンの不透明度を変更できるスライダです。完全なコードの一覧については、「方法 : デザイン時装飾を作成する」を参照してください。
このチュートリアルでは次のタスクを行います。
WPF カスタム コントロール ライブラリ プロジェクトを作成する。
デザイン時メタデータに対する個別のアセンブリを作成する。
装飾プロバイダを実装する。
デザイン時にコントロールをテストする。
このチュートリアルを終了すると、カスタム コントロール用の装飾プロバイダを作成する方法を習得できます。
メモ : |
---|
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。 |
前提条件
このチュートリアルを完了するには、次のコンポーネントが必要です。
- Visual Studio 2008.
カスタム コントロールの作成
最初に、カスタム コントロールのプロジェクトを作成します。コントロールは、デザイン時コードが少量のシンプルなボタンにします。このボタンは、GetIsInDesignMode メソッドを使用して、デザイン時動作を実装します。
カスタム コントロールを作成するには
Visual Basic または Visual C# で CustomControlLibrary という名前の新しい WPF カスタム コントロール ライブラリ プロジェクトを作成します。
コード エディタで CustomControl1 のコードが開きます。
ソリューション エクスプローラで、コード ファイル名を ButtonWithDesignTime.cs または ButtonWithDesignTime.vb に変更します。このプロジェクト内のすべての参照について名前を変更するかどうかを確認するメッセージ ボックスが開いたら、[はい] をクリックします。
ソリューション エクスプローラで、Themes フォルダを展開します。
Generic.xaml をダブルクリックします。
WPF デザイナで Generic.xaml が開きます。
XAML ビューで、"CustomControl1" の出現箇所をすべて "ButtonWithDesignTime" に置き換えます。
コード エディタで ButtonWithDesignTime.cs または ButtonWithDesignTime.vb を開きます。
自動的に生成されたコードを次のコードに置き換えます。ButtonWithDesignTime カスタム コントロールは、Button からの継承で、ボタンがデザイナに表示されると、"Design mode active" というテキストを表示します。GetIsInDesignMode チェックおよび次のデザイン時コードはオプションであり、デモンストレーションのためだけに示されています。
Imports System Imports System.Collections.Generic Imports System.Text Imports System.Windows.Controls Imports System.Windows.Media Imports System.ComponentModel Public Class ButtonWithDesignTime Inherits Button Public Sub New() ' The GetIsInDesignMode check and the following design-time ' code are optional and shown only for demonstration. If DesignerProperties.GetIsInDesignMode(Me) Then Content = "Design mode active" End If End Sub End Class
using System; using System.Collections.Generic; using System.Text; using System.Windows.Controls; using System.Windows.Media; using System.ComponentModel; namespace CustomControlLibrary { public class ButtonWithDesignTime : Button { public ButtonWithDesignTime() { // The GetIsInDesignMode check and the following design-time // code are optional and shown only for demonstration. if (DesignerProperties.GetIsInDesignMode(this)) { Content = "Design mode active"; } } } }
プロジェクトの出力パスを "bin\" に設定します。
ソリューションをビルドします。
デザイン時メタデータ アセンブリの作成
デザイン時コードは、特殊なメタデータ アセンブリに配置されます。詳細については、「方法 : メタデータ ストアの使用方法」を参照してください。このチュートリアルでは、カスタム装飾は Visual Studio によってのみサポートされ、CustomControlLibrary.VisualStudio.Design という名前のアセンブリに配置されます。
デザイン時メタデータ アセンブリを作成するには
Visual Basic または Visual C# の CustomControlLibrary.VisualStudio.Design という名前の新しいクラス ライブラリ プロジェクトをソリューションに追加します。
プロジェクトの出力パスを "..\CustomControlLibrary\bin\" に設定します。これにより、コントロールのアセンブリとメタデータのアセンブリが同じフォルダ内に配置されるため、デザイナがメタデータを検出できます。
次の WPF アセンブリへの参照を追加します。
PresentationCore
PresentationFramework
WindowsBase
次の WPF デザイナ アセンブリへの参照を追加します。
Microsoft.Windows.Design
Microsoft.Windows.Design.Extensibility
Microsoft.Windows.Design.Interaction
CustomControlLibrary プロジェクトへの参照を追加します。
ソリューション エクスプローラで、Class1 コード ファイルの名前を Metadata.cs または Metadata.vb に変更します。
自動的に生成されたコードを次のコードに置き換えます。このコードにより、カスタム デザイン時実装を ButtonWithDesignTime クラスに関連付ける AttributeTable が作成されます。
Imports System Imports System.Collections.Generic Imports System.Text Imports System.ComponentModel Imports System.Windows.Media Imports System.Windows.Controls Imports System.Windows Imports CustomControlLibrary Imports Microsoft.Windows.Design.Features Imports Microsoft.Windows.Design.Metadata Namespace CustomControlLibrary.VisualStudio.Design ' Container for any general design-time metadata to initialize. ' Designers look for a type in the design-time assembly that ' implements IRegisterMetadata. If found, designers instantiate ' this class and call its Register() method automatically. Friend Class Metadata Implements IRegisterMetadata ' Called by the designer to register any design-time metadata. Public Sub Register() Implements IRegisterMetadata.Register Dim builder As New AttributeTableBuilder() ' Add the adorner provider to the design-time metadata. builder.AddCustomAttributes(GetType(ButtonWithDesignTime), _ New FeatureAttribute(GetType(OpacitySliderAdornerProvider))) MetadataStore.AddAttributeTable(builder.CreateTable()) End Sub End Class End Namespace
using System; using System.Collections.Generic; using System.Text; using System.ComponentModel; using System.Windows.Media; using System.Windows.Controls; using System.Windows; using CustomControlLibrary; using Microsoft.Windows.Design.Features; using Microsoft.Windows.Design.Metadata; namespace CustomControlLibrary.VisualStudio.Design { // Container for any general design-time metadata to initialize. // Designers look for a type in the design-time assembly that // implements IRegisterMetadata. If found, designers instantiate // this class and call its Register() method automatically. internal class Metadata : IRegisterMetadata { // Called by the designer to register any design-time metadata. public void Register() { AttributeTableBuilder builder = new AttributeTableBuilder(); // Add the adorner provider to the design-time metadata. builder.AddCustomAttributes( typeof(ButtonWithDesignTime), new FeatureAttribute(typeof(OpacitySliderAdornerProvider))); MetadataStore.AddAttributeTable(builder.CreateTable()); } } }
ソリューションを保存します。
装飾プロバイダの実装
装飾プロバイダは OpacitySliderAdornerProvider という名前の型で実装されます。この装飾により、コントロールの Opacity プロパティをデザイン時に設定できるようになります。
装飾プロバイダを実装するには
OpacitySliderAdornerProvider という名前の新しいクラスを CustomControlLibrary.VisualStudio.Design プロジェクトに追加します。
OpacitySliderAdornerProvider のコード エディタで、自動的に生成されたコードを次のコードに置き換えます。このコードにより、Slider コントロールに基づく装飾を提供する PrimarySelectionAdornerProvider を実装します。
Imports System Imports System.Collections.Generic Imports System.Text Imports System.Windows.Input Imports System.Windows Imports System.Windows.Automation Imports System.Windows.Controls Imports System.Windows.Media Imports System.Windows.Shapes Imports Microsoft.Windows.Design.Interaction Imports Microsoft.Windows.Design.Model Namespace CustomControlLibrary.VisualStudio.Design ' The following class implements an adorner provider for the ' adorned control. The adorner is a slider control, which ' changes the Background opacity of the adorned control. Class OpacitySliderAdornerProvider Inherits PrimarySelectionAdornerProvider Private adornedControlModel As ModelItem Private batchedChange As ModelEditingScope Private opacitySlider As Slider Private opacitySliderAdornerPanel As AdornerPanel Public Sub New() opacitySlider = New Slider() End Sub ' The following method is called when the adorner is activated. ' It creates the adorner control, sets up the adorner panel, ' and attaches a ModelItem to the adorned control. Protected Overrides Sub Activate(ByVal item As ModelItem, ByVal view As DependencyObject) ' Save the ModelItem and hook into when it changes. ' This enables updating the slider position when ' a new Background value is set. adornedControlModel = item AddHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged ' Setup the slider's min and max values. opacitySlider.Minimum = 0 opacitySlider.Maximum = 1 ' 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) ' Initialize the slider when it is loaded. AddHandler opacitySlider.Loaded, AddressOf slider_Loaded ' Handle the value changes of the slider control. AddHandler opacitySlider.ValueChanged, AddressOf slider_ValueChanged AddHandler opacitySlider.PreviewMouseLeftButtonUp, _ AddressOf slider_MouseLeftButtonUp AddHandler opacitySlider.PreviewMouseLeftButtonDown, _ AddressOf slider_MouseLeftButtonDown MyBase.Activate(item, view) End Sub ' The Panel utility property demand-creates the ' adorner panel and adds it to the provider's ' Adorners collection. Public ReadOnly Property Panel() As AdornerPanel Get If Me.opacitySliderAdornerPanel Is Nothing Then Me.opacitySliderAdornerPanel = New AdornerPanel() ' Add the adorner to the adorner panel. Me.opacitySliderAdornerPanel.Children.Add(opacitySlider) ' Add the panel to the Adorners collection. Adorners.Add(opacitySliderAdornerPanel) End If Return Me.opacitySliderAdornerPanel End Get End Property ' The following method deactivates the adorner. Protected Overrides Sub Deactivate() RemoveHandler adornedControlModel.PropertyChanged, _ AddressOf AdornedControlModel_PropertyChanged MyBase.Deactivate() End Sub ' The following method handles the PropertyChanged event. ' It updates the slider control's value if the adorned control's ' Background property changed, Sub AdornedControlModel_PropertyChanged( _ ByVal sender As Object, _ ByVal e As System.ComponentModel.PropertyChangedEventArgs) If e.PropertyName = "Background" Then opacitySlider.Value = GetCurrentOpacity() End If End Sub ' The following method handles the Loaded event. ' It assigns the slider control's initial value. Sub slider_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) opacitySlider.Value = GetCurrentOpacity() End Sub ' The following method handles the MouseLeftButtonDown event. ' It calls the BeginEdit method on the ModelItem which represents ' the adorned control. Sub slider_MouseLeftButtonDown( _ ByVal sender As Object, _ ByVal e As System.Windows.Input.MouseButtonEventArgs) batchedChange = adornedControlModel.BeginEdit() End Sub ' The following method handles the MouseLeftButtonUp event. ' It commits any changes made to the ModelItem which represents the ' the adorned control. Sub slider_MouseLeftButtonUp( _ ByVal sender As Object, _ ByVal e As System.Windows.Input.MouseButtonEventArgs) If Not (batchedChange Is Nothing) Then batchedChange.Complete() batchedChange.Dispose() batchedChange = Nothing End If End Sub ' The following method handles the slider control's ' ValueChanged event. It sets the value of the ' Background opacity by using the ModelProperty type. Sub slider_ValueChanged( _ ByVal sender As Object, _ ByVal e As RoutedPropertyChangedEventArgs(Of Double)) If (True) Then Dim newOpacityValue As Double = e.NewValue ' During setup, don't make a value local and set the opacity. If newOpacityValue = GetCurrentOpacity() Then Return End If ' Access the adorned control's Background property ' by using the ModelProperty type. Dim backgroundProperty As ModelProperty = _ adornedControlModel.Properties(Control.BackgroundProperty) If Not backgroundProperty.IsSet Then ' If the value isn't local, make it local ' before setting a sub-property value. backgroundProperty.SetValue(backgroundProperty.ComputedValue) End If ' Set the Opacity property on the Background Brush. backgroundProperty.Value.Properties(Brush.OpacityProperty).SetValue(newOpacityValue) End If End Sub ' This utility method gets the adorned control's ' Background brush by using the ModelItem. Function GetCurrentOpacity() As Double If (True) Then Dim backgroundBrushComputedValue As Brush = _ CType(adornedControlModel.Properties(Control.BackgroundProperty).ComputedValue, _ Brush) Return backgroundBrushComputedValue.Opacity End If End Function End Class End Namespace
using System; using System.Collections.Generic; using System.Text; using System.Windows.Input; using System.Windows; using System.Windows.Automation; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Shapes; using Microsoft.Windows.Design.Interaction; using Microsoft.Windows.Design.Model; namespace CustomControlLibrary.VisualStudio.Design { // The following class implements an adorner provider for the // adorned control. The adorner is a slider control, which // changes the Background opacity of the adorned control. class OpacitySliderAdornerProvider : PrimarySelectionAdornerProvider { private ModelItem adornedControlModel; private ModelEditingScope batchedChange; private Slider opacitySlider; private AdornerPanel opacitySliderAdornerPanel; public OpacitySliderAdornerProvider() { opacitySlider = new Slider(); } // The following method is called when the adorner is activated. // It creates the adorner control, sets up the adorner panel, // and attaches a ModelItem to the adorned control. protected override void Activate(ModelItem item, DependencyObject view) { // Save the ModelItem and hook into when it changes. // This enables updating the slider position when // a new Background value is set. adornedControlModel = item; adornedControlModel.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler( AdornedControlModel_PropertyChanged); // Setup the slider's min and max values. opacitySlider.Minimum = 0; opacitySlider.Maximum = 1; // 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); // Initialize the slider when it is loaded. opacitySlider.Loaded += new RoutedEventHandler(slider_Loaded); // Handle the value changes of the slider control. opacitySlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>( slider_ValueChanged); opacitySlider.PreviewMouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler( slider_MouseLeftButtonUp); opacitySlider.PreviewMouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler( slider_MouseLeftButtonDown); base.Activate(item, view); } // The Panel utility property demand-creates the // adorner panel and adds it to the provider's // Adorners collection. public AdornerPanel Panel { get { if (this.opacitySliderAdornerPanel == null) { opacitySliderAdornerPanel = new AdornerPanel(); opacitySliderAdornerPanel.Children.Add(opacitySlider); // Add the panel to the Adorners collection. Adorners.Add(opacitySliderAdornerPanel); } return this.opacitySliderAdornerPanel; } } // The following method deactivates the adorner. protected override void Deactivate() { adornedControlModel.PropertyChanged -= new System.ComponentModel.PropertyChangedEventHandler( AdornedControlModel_PropertyChanged); base.Deactivate(); } // The following method handles the PropertyChanged event. // It updates the slider control's value if the adorned control's // Background property changed, void AdornedControlModel_PropertyChanged( object sender, System.ComponentModel.PropertyChangedEventArgs e) { if (e.PropertyName == "Background") { opacitySlider.Value = GetCurrentOpacity(); } } // The following method handles the Loaded event. // It assigns the slider control's initial value. void slider_Loaded(object sender, RoutedEventArgs e) { opacitySlider.Value = GetCurrentOpacity(); } // The following method handles the MouseLeftButtonDown event. // It calls the BeginEdit method on the ModelItem which represents // the adorned control. void slider_MouseLeftButtonDown( object sender, System.Windows.Input.MouseButtonEventArgs e) { batchedChange = adornedControlModel.BeginEdit(); } // The following method handles the MouseLeftButtonUp event. // It commits any changes made to the ModelItem which represents the // the adorned control. void slider_MouseLeftButtonUp( object sender, System.Windows.Input.MouseButtonEventArgs e) { if (batchedChange != null) { batchedChange.Complete(); batchedChange.Dispose(); batchedChange = null; } } // The following method handles the slider control's // ValueChanged event. It sets the value of the // Background opacity by using the ModelProperty type. void slider_ValueChanged( object sender, RoutedPropertyChangedEventArgs<double> e) { double newOpacityValue = e.NewValue; // During setup, don't make a value local and set the opacity. if (newOpacityValue == GetCurrentOpacity()) { return; } // Access the adorned control's Background property // by using the ModelProperty type. ModelProperty backgroundProperty = adornedControlModel.Properties[Control.BackgroundProperty]; if (!backgroundProperty.IsSet) { // If the value isn't local, make it local // before setting a sub-property value. backgroundProperty.SetValue(backgroundProperty.ComputedValue); } // Set the Opacity property on the Background Brush. backgroundProperty.Value.Properties[Brush.OpacityProperty].SetValue(newOpacityValue); } // This utility method gets the adorned control's // Background brush by using the ModelItem. private double GetCurrentOpacity() { Brush backgroundBrushComputedValue = (Brush)adornedControlModel.Properties[Control.BackgroundProperty].ComputedValue; return backgroundBrushComputedValue.Opacity; } } }
ソリューションをビルドします。
デザイン時実装のテスト
ButtonWithDesignTime コントロールは、他の WPF コントロールと同じように使用できます。WPF デザイナは、すべてのデザイン時オブジェクトの作成を処理します。
デザイン時実装をテストするには
Visual Basic または Visual C# の DemoApplication という名前の WPF アプリケーション プロジェクトをソリューションに追加します。
WPF デザイナで Window1.xaml が開きます。
CustomControlLibrary プロジェクトへの参照を追加します。
XAML ビューで、自動的に生成された XAML を次の XAML に置き換えます。この XAML により、CustomControlLibrary 名前空間への参照が追加され、ButtonWithDesignTime カスタム コントロールが追加されます。ボタンは、"Design mode active" というテキストと共にデザイン ビューに表示されます。これは、現在デザイン モードであることを示すものです。ボタンが表示されない場合は、デザイナの一番上の情報バーをクリックして、ビューの再読み込みを行う必要があります。
<Window x:Class="DemoApplication.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:cc="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary" Title="Window1" Height="300" Width="300"> <Grid> <cc:ButtonWithDesignTime Margin="30,30,30,30" Background="#FFD4D0C8"></cc:ButtonWithDesignTime> </Grid> </Window>
<Window x:Class="DemoApplication.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:cc="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary" Title="Window1" Height="300" Width="300"> <Grid> <cc:ButtonWithDesignTime Margin="30,30,30,30" Background="#FFD4D0C8"></cc:ButtonWithDesignTime> </Grid> </Window>
デザイン ビューで、ButtonWithDesignTime コントロールをクリックして選択します。
Slider コントロールが ButtonWithDesignTime コントロールの上に表示されます。
スライダ コントロール修飾を使用して、ボタンの不透明度を変更します。
DemoApplication プロジェクトを実行します。
実行時には、装飾で設定した不透明度でボタンが表示されます。
次の手順
カスタム コントロールに、さらにカスタム デザイン時機能を追加できます。
カスタムのデザイン時に対して MenuAction を追加します。詳細については、「チュートリアル : MenuAction の作成」を参照してください。
埋め込み先編集用の装飾プロバイダを作成します。詳細については、「チュートリアル : 埋め込み先編集の実装」を参照してください。
[プロパティ] ウィンドウで使用できるカスタム カラー エディタを作成します。詳細については、「チュートリアル : カラー エディタの実装」を参照してください。
参照
処理手順
参照
PrimarySelectionAdornerProvider