チュートリアル: ツールボックスアイコンへのメタデータの提供

[アーティクル]
08/09/2011

このチュートリアルでは、Windows Presentation Foundation (WPF) カスタムコントロールライブラリで Visual Studio や Expression Blend などのさまざまなデザイナーにツールボックスアイコンを提供する方法について説明します。カスタムコントロールをデザイナーのツールボックスに追加すると、該当するアイコンがコントロールの名前の横に表示されます。

WPF Designer for Visual Studio は、カスタムツールボックスアイコンをさまざまなデザイナーに提供できるようにします。たとえば、Visual Studio および Expression Blend のカスタムコントロールに対して、異なるアイコンを対象にすることができます。デザイン時実装によって提供されるアイコンは、コントロールのランタイムアセンブリの既定のアイコンをオーバーライドします。

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

埋め込まれたアイコンのビットマップを含む WPF カスタムコントロールライブラリプロジェクトを作成する。
既定のツールボックスアイコンをオーバーライドするデザイン時メタデータに対して個別のアセンブリを作成する。
デザイン時にコントロールのアイコンをテストする。

タスクを終了すると、デザイン時にカスタムコントロールの既定のランタイムアイコンを置換する方法を理解できるようになります。

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

必須コンポーネント

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

Visual Studio 2010.

ツールボックスアイコンを含むカスタムコントロールの作成

コントロール用のカスタムツールボックスアイコンを作成するには、コントロールのプロジェクトに埋め込みリソースとしてイメージを追加します。

ツールボックスアイコンを含むカスタムコントロールを作成するには

Visual Basic または Visual C# で TailspinToysControlLibrary という名前の新しい WPF カスタムコントロールライブラリプロジェクトを作成します。
CustomControl1 コードファイルの名前を TailspinToysControl に変更します。
埋め込みリソースとして TailspinToysControl.icon.bmp という名前のツールボックスアイコンを追加します。詳細については、「チュートリアル : コントロール用のカスタムツールボックスアイコンの作成」を参照してください。
[テキストツール] を使用して、ビットマップで DEFAULT を描画します。これは、テキストボックスでコントロールアセンブリの既定のアイコンが読み込まれることを示します。
プロジェクトの出力パスを ".. \TailspinToysControlLibrary\bin\" に設定します。
ソリューションをビルドします。

デザイン時メタデータアセンブリの作成

デザイン時コードは、特殊なメタデータアセンブリで配布されます。このチュートリアルでは、カスタムメタデータは Visual Studio および Expression Blend によってサポートされ、TailspinToysControlLibrary.Design という名前のアセンブリに配置されます。

デザイン時メタデータアセンブリを作成するには

TailspinToysControlLibrary.Design という名前のデザイン時アセンブリを作成します。詳細については、「チュートリアル: カスタムのデザイン時メタデータの提供」を参照してください。
コードエディターで RegisterMetadata コードファイルを開きます。

自動的に生成されたコードを次のコードで置き換えます。このコードにより、カスタムのデザイン時属性を TailspinToysControl クラスに関連付ける AttributeTable が作成されます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Microsoft.Windows.Design;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;

using TailspinToysControlLibrary;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(TailspinToysControlLibrary.Design.RegisterMetadata))]
namespace TailspinToysControlLibrary.Design
{
    internal class RegisterMetadata : IProvideAttributeTable
    {
        // Called by the designer to register any design-time metadata. 
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();

                // Set ToolboxBrowsableAttribute to true to display your custom control 
                // in the Toolbox and in the Choose Items... dialog box. 
                builder.AddCustomAttributes(typeof(TailspinToysControl), new ToolboxBrowsableAttribute(true));

                return builder.CreateTable();
            }
        }
    }
}

ソリューションを保存します。

デザイン時ツールボックスアイコンの作成

デザイン時アセンブリを作成すると、カスタムのツールボックスアイコンを作成し、それらのアイコンを埋め込みリソースとしてプロジェクトに追加できます。 2 つのアイコンを作成します。1 つは Visual Studio 用、もう 1 つは Expression Blend 用です。

Visual Studio 用のツールボックスアイコンを作成するには

新しいビットマップファイルを TailspinToysControlLibrary.Design プロジェクトに追加します。ビットマップファイルに TailspinToysControlLibrary.TailspinToysControl.VisualStudio.24bit.48x48.bmp という名前を付けます。
[プロパティ] ウィンドウで、ビットマップの Colors プロパティを [24 ビット] に設定します。
[テキストツール] を使用して、ビットマップで METADATA を描画します。これは、アイコンがデザイナーメタデータから設定されることを示します。
ソリューションエクスプローラーでビットマップファイルを選択します。
[プロパティ] ウィンドウで、[ビルドアクション] プロパティを [埋め込まれたリソース] に設定します。
新しいビットマップファイルを TailspinToysControlLibrary.Design プロジェクトに追加します。ビットマップファイルに TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.bmp という名前を付けます。

注意

Blend でアイコンとして読み込まれるのは .png ファイルだけであるため、外部の描画プログラムを使用して Blend アイコンを作成します。
イメージエディター内を右クリックし、ショートカットメニューの [外部エディターを開く] をクリックします。

描画アプリケーションが開きます。
[テキストツール] を使用して、ビットマップで BLEND を描画します。これは、アイコンが Expression Blend の [資産] ウィンドウで使用されることを示します。
イメージを .png ファイル形式で保存します。
ソリューションエクスプローラーで、TailspinToysControlLibrary.Design プロジェクトを右クリックし、ショートカットメニューの [追加] をポイントし、[既存の項目] をクリックします。
[既存項目の追加] ダイアログボックスで、TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.png を選択し、[追加] をクリックします。
ソリューションエクスプローラーで、.png イメージファイルを選択します。
[プロパティ] ウィンドウで、[ビルドアクション] プロパティを [埋め込まれたリソース] に設定します。
空の TailspinToysControlLibrary.TailspinToysControl.VisualStudio.4bit.48x48.bmp ビットマップファイルを削除します。
ソリューションをビルドします。

ツールボックスアイコンのテスト

カスタムツールボックスアイコンをテストするには、ツールボックスに TailspinToysControl を追加します。

ツールボックスアイコンをテストするには

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

WPF デザイナーで MainWindow.xaml が開きます。ツールボックスの [TailspinToysControlLibrary コントロール] タブに TailspinToysControl が表示されます。既定のコントロールアイコンが表示されます。

注意

コントロールのランタイムアセンブリに埋め込まれているアイコンは表示されません。これは、ツールボックスの自動設定機能の制限です。
ツールボックスで、[TailspinToysControl] を右クリックし、ショートカットメニューの [削除] を選択し、[OK] をクリックします。

ツールボックスから [TailspinToysControl] が削除されます。
ツールボックスで、[TailspinToysControlLibrary コントロール] タブを右クリックし、ショートカットメニューの [アイテムの選択] を選択します。

[ツールボックスアイテムの選択] ダイアログボックスが表示されます。
[WPF コンポーネント] タブをクリックします。詳細については、「[ツールボックスアイテムの選択] ダイアログボックスの [WPF コンポーネント] タブ」を参照してください。
[参照] をクリックし、TailspinToysControlLibrary\TailspinToysControlLibrary\bin フォルダーに移動します。
[TailspinToysControlLibrary.dll] をダブルクリックして選択します。

[ツールボックスアイテムの選択] ダイアログボックスに、TailspinToysControlLibrary アセンブリの詳細が表示されます。 [TailspinToysControl] グループボックスにカスタムのデザイン時アイコンが表示されます。
[OK] をクリックします。

ランタイムアセンブリのアイコンをオーバーライドする [TailspinToysControlLibrary.TailspinToysControl.VisualStudio.24bit.48x48.bmp] アイコンを含むツールボックスに、[TailspinToysControl] が表示されます。

次の手順

Expression Blend では、カスタムコントロールおよびデザイン時アセンブリを読み込むこともできます。 Expression Blend 4 以降では、プロジェクト参照を TailspinToysControlLibrary.dll アセンブリに追加すると、[資産] ウィンドウに [TailspinToysControlLibrary.TailspinToysControl.Expression.4bit.48x48.png] アイコンが表示されます。
ランタイムアセンブリおよびデザイン時アセンブリを配置するには、AssemblyFoldersEx 登録プロシージャを使用します。詳細については、「カスタムコントロールとデザイン時アセンブリの配置」を参照してください。

参照

次の方法で共有

チュートリアル: ツールボックスアイコンへのメタデータの提供

必須コンポーネント