次の方法で共有

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

  • [アーティクル]

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

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

  • WPF カスタム コントロール プロジェクトを作成する。

  • [プロパティ] ウィンドウでプロパティ値の編集に使用できるインライン エディターを作成する。

  • カスタム エディターを提供するクラスにインライン エディターを接続するために使用する PropertyValueEditor 派生クラスを作成する。

  • 新しいインライン エディターを登録するために IProvideAttributeTable インターフェイスを実装するクラスを作成する。

  • デザイン時にインライン エディターをテストする。

必須コンポーネント

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

  • Visual Studio 2010.

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

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

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

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

    コード エディターで CustomControl1 のコードが開きます。

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

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomControlLibrary
{
    public class CustomControl1 : Button
    {
        public CustomControl1()
        {
            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "In design mode";
            }
        }
    }
}

  3. プロジェクトの出力パスを "bin\" に設定します。

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

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

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

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

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

    コード エディターで CustomControl1 のコードが開きます。

  2. ソリューション エクスプローラーで、CustomControl1 ファイルを CustomControlLibrary.Design プロジェクトから削除します。

  3. 次の WPF デザイナー アセンブリへの参照を追加します。

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  4. CustomControlLibrary プロジェクトへの参照を追加します。

  5. プロジェクトの出力パスを ".. \CustomControlLibrary\bin\" に設定します。 これにより、コントロールのアセンブリとメタデータのアセンブリが同じフォルダー内に配置されるため、デザイナーがメタデータを検出できます。

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

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

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

  8. [プロジェクト] メニューの [リソース ディクショナリの追加] をクリックします。

  9. フォームに EditorResources.xaml という名前を付け、[追加] をクリックします。

  10. 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.Interaction"
    xmlns:Local="clr-namespace:CustomControlLibrary.Design"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="CustomControlLibrary.Design.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>

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

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

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

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

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

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

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using Microsoft.Windows.Design.PropertyEditing;

namespace CustomControlLibrary.Design
{
    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

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

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

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

    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;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(CustomControlLibrary.Design.Metadata))]

namespace CustomControlLibrary.Design
{
    // Container for any general design-time metadata to initialize.
    // Designers look for a type in the design-time assembly that 
    // implements IProvideAttributeTable. If found, designers instantiate 
    // this class and access its AttributeTable property automatically.
    internal class Metadata : IProvideAttributeTable
    {
        // Accessed by the designer to register any design-time metadata.
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();
                builder.AddCustomAttributes
                    (typeof(CustomControl1),
                    "Background",
                    PropertyValueEditor.CreateEditorAttribute(
                        typeof(BrushInlineEditor)));

                return builder.CreateTable();
            }
        }
    }
}

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

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

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

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

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

    WPF デザイナーで MainWindow.xaml が開きます。

  2. CustomControlLibrary プロジェクトへの参照を追加します。

  3. MainWindow.xaml の XAML ビューで、自動的に生成された XAML を次の XAML に置き換えます。 この XAML により、CustomControlLibrary 名前空間への参照が追加され、CustomControl1 カスタム コントロールが追加されます。 ボタンは、赤い背景色でデザイン ビューに表示されます。これは、コントロールがデザイン モードであることを示します。 ボタンが表示されない場合は、デザイナーの一番上の情報バーをクリックして、ビューの再読み込みを行う必要があります。

        <Window x:Class="DemoApplication.MainWindow"
    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"></my:CustomControl1>
    </Grid>
</Window>

  4. デザイン ビューでコントロールを選択します。

  5. [プロパティ] ウィンドウで、Background プロパティの横にあるドロップダウン ボタンをクリックします。 新しいインライン エディターを表す小さな色選択リストが、既定の色リストの代わりに表示されます。 選択できる色は、赤、青、および緑です。

  6. ドロップダウン リストで色を選択します。 カスタム コントロールの背景が、その色に変更されます。

次の手順

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

参照

処理手順

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

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

その他の技術情報

カスタム エディターの作成

WPF デザイナーの機能拡張