チュートリアル : カテゴリエディタの作成

2008-09-30

更新 : 2007 年 11 月

Windows Presentation Foundation (WPF) Designer for Visual Studio の機能拡張モデルを使用すると、カテゴリエディタという、プロパティのカテゴリ用のカスタムエディタを作成できます。カテゴリエディタを使用すると、テキスト関連プロパティなど、1 つのカテゴリに属する互いに関連するプロパティを編集するためのカスタムユーザーインターフェイスを提供できます。このチュートリアルでは、コントロールのテキスト関連プロパティを編集するためのカテゴリエディタを作成します。

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

WPF カスタムコントロールプロジェクトを作成する。
そのコントロールのテキスト関連プロパティを編集するために使用されるカテゴリエディタを作成する。
コントロールのカテゴリエディタを表す CategoryEditor から継承するクラスを作成する。
新しい拡張エディタを登録するために 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))
        {
            Content = "I'm in design mode";
        }
    }
}

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

プロパティ情報をカプセル化するクラスの作成

作成されるカテゴリエディタは、フォントおよび関連するプロパティについての情報を必要とするため、それらの情報をカプセル化するクラスをここで作成します。このクラスは、カテゴリエディタによってデータソースとして使われます。

フォントプロパティ情報をカプセル化するクラスを作成するには

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

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

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

using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using System.Windows.Media;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;
using System.Globalization;

namespace CustomControlLibrary.Design
{
    public class FontList : ObservableCollection<FontFamily>
    {
        public FontList()
        {
            foreach (FontFamily ff in Fonts.SystemFontFamilies)
            {
                Add(ff);
            }
        }
    }

    public class FontSizeList : ObservableCollection<double>
    {
        public FontSizeList()
        {
            Add(8);
            Add(9);
            Add(10);
            Add(11);
            Add(12);
            Add(14);
            Add(16);
            Add(18);
            Add(20);
        }
    }

    public class FontStyleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            FontStyle fs = (FontStyle)value;
            return fs == FontStyles.Italic;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                bool isSet = (bool)value;

                if (isSet)
                {
                    return FontStyles.Italic;
                }
            }

            return FontStyles.Normal;
        }
    }

    public class FontWeightConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            FontWeight fs = (FontWeight)value;
            return fs == FontWeights.Bold;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                bool isSet = (bool)value;

                if (isSet)
                {
                    return FontWeights.Bold;
                }
            }

            return FontWeights.Normal;
        }
    }

}

カテゴリエディタのテンプレートの作成

カテゴリエディタは、XAML データテンプレートを使用して作成されます。これは、いくつかのテキスト関連プロパティにバインドされる簡単なユーザーインターフェイスです。

カテゴリエディタのテンプレートを作成するには

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

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();
        }
    }
}

[プロジェクト] メニューの [リソースディクショナリの追加] をクリックします。
フォームに 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: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">
    <Local:FontList x:Key="FontFamilyList"/>
    <Local:FontSizeList x:Key="FontSizeList"/>
    <Local:FontStyleConverter x:Key="FontStyleConverter"/>
    <Local:FontWeightConverter x:Key="FontWeightConverter"/>
    <DataTemplate x:Key="TextCategoryEditorTemplate">
        <StackPanel Margin="5">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <ComboBox 
                    Grid.Column="0"
                    Margin="2"
                    ItemsSource="{Binding Source={StaticResource FontFamilyList}}" 
                    DisplayMemberPath="FamilyNames.Values[0]"
                    SelectedItem="{Binding [FontFamily].PropertyValue.Value}"/>
                <ComboBox 
                    Grid.Column="1"
                    Margin="2"
                    ItemsSource="{Binding Source={StaticResource FontSizeList}}"
                    SelectedItem="{Binding [FontSize].PropertyValue.Value}"/>
            </Grid>
            <StackPanel Orientation="Horizontal">
                <CheckBox 
                    Margin="2"
                    Content="Bold"
                    IsChecked="{Binding Path=[FontWeight].PropertyValue.Value, Converter={StaticResource FontWeightConverter}}"/>
                <CheckBox 
                    Margin="2"
                    Content="Italic"
                    IsChecked="{Binding Path=[FontStyle].PropertyValue.Value, Converter={StaticResource FontStyleConverter}}"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

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

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

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

カテゴリエディタをカプセル化および登録するには

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

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

namespace CustomControlLibrary.Design {
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using Microsoft.Windows.Design.PropertyEditing;

    public class TextCategoryEditor : CategoryEditor {

        private EditorResources res = new EditorResources();
        public TextCategoryEditor()
        {
        }

        public override bool ConsumesProperty(PropertyEntry property)
        {
            return true;
        }

        public override DataTemplate EditorTemplate
        {
            get {
                return res["TextCategoryEditorTemplate"] as DataTemplate;
            }
        }

        public override object GetImage(Size desiredSize)
        {
            return null;
        }

        public override string TargetCategory
        {
            get { return "Text"; }
        }
    }
}

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

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

namespace CustomControlLibrary.Design
{
    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 the WPF Designer to register any design-time metadata
        public void Register()
        {
            AttributeTableBuilder builder = new AttributeTableBuilder();
            builder.AddCustomAttributes
                (typeof( CustomControl1), 
                "Enter text",
                PropertyValueEditor.CreateEditorAttribute(
                    typeof(TextCategoryEditor)));
            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"></my:CustomControl1>
    </Grid>
</Window>
```
デザインビューでコントロールを選択します。
[プロパティ] ウィンドウで、テキストカテゴリを見つけます。

他のコントロールとは異なる、テキストプロパティを指定するユーザーインターフェイスが表示されていることを確認してください。フォント名とフォントサイズをドロップダウンリストから選択できます。チェックボックスをオンにすると、太字と斜体を指定できます。
このカテゴリに含まれるプロパティを変更します。変更内容がコントロールに反映されます。

参照

処理手順

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

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

その他の技術情報

カスタムエディタの作成

WPF デザイナの機能拡張

次の方法で共有

チュートリアル : カテゴリ エディタの作成

前提条件

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

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

プロパティ情報をカプセル化するクラスの作成

フォント プロパティ情報をカプセル化するクラスを作成するには

カテゴリ エディタのテンプレートの作成

カテゴリ エディタのテンプレートを作成するには

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

カテゴリ エディタをカプセル化および登録するには

カテゴリ エディタのテスト

カテゴリ エディタをテストするには

参照