チュートリアル : インライン値エディタの実装

2008-09-30

更新 : 2007 年 11 月

Windows Presentation Foundation (WPF) Designer for Visual Studio の機能拡張モデルを使用すると、[プロパティ] ウィンドウ内のプロパティを操作するためのカスタムの値エディタをデザイン時に作成できます。作成できるのは、インラインエディタまたは外部エディタです。インラインエディタは、[プロパティ] ウィンドウで値を直接編集できるエディタです。外部エディタは、[プロパティ] ウィンドウの外部でプロパティを編集する UI を備えたエディタです。インラインエディタを作成する方法を示すために、このチュートリアルでは、コントロールの Background プロパティを操作するためのインライン値エディタを作成する手順を説明します。

このチュートリアルでは次のタスクを行います。

WPF カスタムコントロールプロジェクトを作成する。
[プロパティ] ウィンドウでプロパティ値の編集に使用できるインラインエディタを作成する。
カスタムエディタを提供するクラスにインラインエディタを接続するために使用する PropertyValueEditor 派生クラスを作成する。
新しいインラインエディタを登録するために IRegisterMetadata 派生クラスを作成する。
デザイン時にインラインエディタをテストする。

前提条件

このチュートリアルを完了するには、次のコンポーネントが必要です。

Visual Studio 2008。

カスタムコントロールの作成

最初に、カスタムコントロールのプロジェクトを作成します。コントロールは、デザイン時コードが少量のシンプルなボタンにします。このボタンは、GetIsInDesignMode メソッドを使用して、デザイン時動作を実装します。

カスタムコントロールを作成するには

Visual C# で CustomControlLibrary という名前の新しい WPF カスタムコントロールライブラリプロジェクトを作成します。

コードエディタで CustomControl1 のコードが開きます。
次の WPF デザイナアセンブリへの参照を追加します。
- Microsoft.Windows.Design

CustomControl1 のコードエディタで、CustomControlLibrary 名前空間のコードを次のコードに置き換えます。

public class CustomControl1 : Button
{
    public CustomControl1()
    {
        if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
        {
            Background = Brushes.Red;
        }
    }
}

プロジェクトの出力パスを "bin\" に設定します。
ソリューションをビルドします。

インラインエディタのテンプレートの作成

インラインエディタは、XAML データテンプレートを使用して作成できます。これは、Background プロパティの色選択リストを表示する簡単なドロップダウンリストになります。

インラインエディタのテンプレートを作成するには

Visual C# で CustomControlLibrary.Design という名前の新しい WPF カスタムコントロールライブラリプロジェクトをソリューションに追加します。

コードエディタで CustomControl1 のコードが開きます。
ソリューションエクスプローラで、CustomControl1 ファイルを CustomControlLibrary.Design プロジェクトから削除します。
次の WPF デザイナアセンブリへの参照を追加します。
- Microsoft.Windows.Design
CustomControlLibrary プロジェクトへの参照を追加します。
プロジェクトの出力パスを "..\CustomControlLibrary\bin\" に設定します。これにより、コントロールのアセンブリとメタデータのアセンブリが同じフォルダ内に配置されるため、デザイナがメタデータを検出できます。
EditorResources という名前の新しいクラスを CustomControlLibrary.Design プロジェクトに追加します。

EditorResources のコードエディタで、自動的に生成されたコードを次のコードに置き換えます。

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    public partial class EditorResources : ResourceDictionary {
        public EditorResources()
            : base()
        {
            InitializeComponent();
        }
    }
}

[プロジェクト] メニューの [リソースディクショナリの追加] をクリックします。
フォームに EditorResources.xaml という名前を付け、[追加] をクリックします。

EditorResources の XAML ビューで、自動的に生成された XAML を次の XAML に置き換えます。

<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:PropertyEditing="clr-namespace:Microsoft.Windows.Design.PropertyEditing;assembly=Microsoft.Windows.Design"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="InlineEditorNamespace.EditorResources">
    <DataTemplate x:Key="BrushInlineEditorTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <ComboBox Grid.Column="0" Text="{Binding StringValue}">
                <ComboBoxItem>Red</ComboBoxItem>
                <ComboBoxItem>Blue</ComboBoxItem>
                <ComboBoxItem>Green</ComboBoxItem>
            </ComboBox>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

ソリューションをビルドします。

テンプレートのカプセル化とインラインエディタの登録

インラインエディタ用のテンプレートの作成が完了したので、次にこのテンプレートをカスタムエディタとして使用するために PropertyValueEditor 派生クラスを作成し、新しいインラインエディタを登録する必要があります。

インラインエディタをカプセル化および登録するには

BrushInlineEditor という名前の新しいクラスを CustomControlLibrary.Design プロジェクトに追加します。

BrushInlineEditor のコードエディタで、自動的に生成されたコードを次のコードに置き換えます。

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Microsoft.Windows.Design.PropertyEditing;
    using System.Windows;
    using InlineEditorNamespace;

    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

        public BrushInlineEditor()
        {
            this.InlineEditorTemplate = res["BrushInlineEditorTemplate"] as DataTemplate;
        }
    }
}

Metadata という名前の新しいクラスを CustomControlLibrary.Design プロジェクトに追加します。

Metadata のコードエディタで、自動的に生成されたコードを次のコードに置き換えます。

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Microsoft.Windows.Design.Metadata;
    using System.ComponentModel;
    using Microsoft.Windows.Design.PropertyEditing;
    using System.Windows.Media;
    using System.Windows.Controls;
    using System.Windows;
    using CustomControlLibrary;

    // Container for any general design-time metadata that we want to initialize.
    // Designers will look for a type in the design-time assembly that implements IRegisterMetadata.
    // If found, they will instantiate it and call its Register() method automatically.
    internal class Metadata : IRegisterMetadata
    {

        // Called by Cider to register any design-time metadata
        public void Register()
        {
            AttributeTableBuilder builder = new AttributeTableBuilder();
            builder.AddCustomAttributes
                (typeof(CustomControl1), 
                Control.BackgroundProperty,
                PropertyValueEditor.CreateEditorAttribute(
                    typeof(BrushInlineEditor)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

ソリューションをビルドします。

インライン値エディタのテスト

インライン値エディタはこれで完成し、使用できる状態になりました。後はテストするだけです。インラインエディタをテストするには、WPF アプリケーションプロジェクトをソリューションに追加し、カスタムコントロールを WPF アプリケーションに追加してから、インラインエディタの動作を確認します。

インライン値エディタをテストするには

Visual C# の DemoApplication という名前の WPF アプリケーションプロジェクトをソリューションに追加します。

WPF デザイナで Window1.xaml が開きます。
CustomControlLibrary プロジェクトへの参照を追加します。
Window1.xaml の XAML ビューで、自動的に生成された XAML を次の XAML に置き換えます。この XAML により、CustomControlLibrary 名前空間への参照が追加され、CustomControl1 カスタムコントロールが追加されます。ボタンは、赤い背景色でデザインビューに表示されます。これは、コントロールがデザインモードであることを示します。ボタンが表示されない場合は、デザイナの一番上の情報バーをクリックして、ビューの再読み込みを行う必要があります。
```
<Window x:Class="DemoApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary">
    <Grid>
        <my:CustomControl1 Margin="30,30,30,30" Name="customControl11">Button</my:CustomControl1>
    </Grid>
</Window>
```
デザインビューでコントロールを選択します。
[プロパティ] ウィンドウで、Background プロパティの横にあるドロップダウンボタンをクリックします。新しいインラインエディタを表す小さな色選択リストが、既定の色リストの代わりに表示されます。選択できる色は、赤、青、および緑です。
ドロップダウンリストで色を選択します。カスタムコントロールの背景が、その色に変更されます。

次の手順

さらに高度なプロパティエディタについては、外部エディタを作成する方法を説明している「チュートリアル : カラーエディタの実装」を参照してください。

参照

処理手順

チュートリアル : カラーエディタの実装

方法 : 値エディタを作成する

その他の技術情報

カスタムエディタの作成

WPF デザイナの機能拡張

次の方法で共有

チュートリアル : インライン値エディタの実装

前提条件

カスタム コントロールの作成

カスタム コントロールを作成するには

インライン エディタのテンプレートの作成

インライン エディタのテンプレートを作成するには

テンプレートのカプセル化とインライン エディタの登録

インライン エディタをカプセル化および登録するには