空のユーザーコントロールの作成

[アーティクル]
10/11/2017

システムコントロールと同じようにアートボードに追加して再利用できるコンポーネントをデザインする場合は、Microsoft Expression Blend でユーザーコントロールを作成します。ユーザーコントロールは、アプリケーションと同様に、他のコントロール、リソース、およびアニメーションタイムラインを含むことができます。唯一の違いは、ルート要素が Window や Page ではなく UserControl であることです。

次の手順では、アニメーションを含むユーザーコントロールを作成し、他のドキュメントにインスタンスを作成する方法について説明します。

既存のシステムコントロールを基にして、カスタムコントロールのコードを記述する例については、「試してみよう: カスタムプロパティを持つカスタムコントロールの作成」を参照してください。

Expression Blend には、ユーザーコントロールのサンプルも付属しています。サンプルを見るには、[ヘルプ] メニューの [ようこそ画面 ] をクリックし、[サンプル] タブでサンプルの名前をクリックします。

XAML とコードの例など、ユーザーコントロールの詳細については、MSDN の「Windows Presentation Foundation Cc294992.xtlink_newWindow(ja-jp,Expression.40).png 」セクションにある「コントロールの作成の概要」を参照してください。

ユーザーコントロールを定義するには

Expression Blend で、次のいずれかの操作を行います。
- ユーザーコントロールの .dll ファイルを作成するには、[ファイル] メニューの [新しいプロジェクト] をクリックし、プロジェクトの種類として [WPF コントロールライブラリ] または [Silverlight コントロールライブラリ] を選択します。次に、プロジェクト名を指定し、メインドキュメントの分離コードファイルの言語を選択して [OK] をクリックします。このオプションを使用するのは、ユーザーコントロールを他のユーザーに提供するときにユーザーコントロールの実装を隠す場合、またはユーザーコントロールを別のアプリケーションで描画するときに、テンプレートを作成することでユーザーコントロールの外観を変更できるようにする場合です。
- 既存のプロジェクトの .xaml ファイルにユーザーコントロールを作成するには、[ファイル] メニューの [新しいアイテム] (Ctrl + N キー) をクリックし、UserControl テンプレートを選択します。次に、ファイル名を設定して、[OK] をクリックします。このオプションでは、ユーザーコントロールはそれを使用するプロジェクトの中にあるので、簡単に変更できます。また、.dll への参照を更新する手順を省略できます。
編集できるユーザーコントロールが開きます。
ルートオブジェクトにするパネルの種類を決定します。既定では、LayoutRoot という Grid が使用されます。この場合は、ユーザーコントロールを別のドキュメントに描画したときに、アニメーションのサイズを変更できます。既定のパネルを Canvas や他のパネルコントロールに変更するには、[オブジェクトとタイムライン] パネルの LayoutRoot オブジェクトを右クリックし、[レイアウトの種類の変更 ]をポイントして、パネルの名前をクリックします。
[ツール] パネルで、ユーザーコントロールで使用するコントロールか描画ツールを選択し、アートボードに描画します。[プロパティ] パネルのプロパティを使用して変更します。ユーザーコントロールには、WPF アプリケーションに含められるものであれば、何でも含めることができます。

[オブジェクトとタイムライン] パネルで、必要なアニメーションタイムラインを作成します。

例については、「単純なアニメーションの作成」を参照してください。

メモ :
キーフレームを設定するときは、アプリケーション内のすべてのアニメーションのタイミングと、ユーザーコントロールのアニメーションを実行するタイミングを考慮してください。たとえば、スプラッシュ画面のアニメーションの後で、ユーザーインターフェイスが次第に遠ざかっていくアニメーションを表示するとします。それぞれのアニメーションを個別のユーザーコントロールに配置できますが、スプラッシュ画面のアニメーションが完了してから 2 番目のアニメーションが開始されるように設定してください。

キーフレームを設定するときは、アプリケーション内のすべてのアニメーションのタイミングと、ユーザーコントロールのアニメーションを実行するタイミングを考慮してください。たとえば、スプラッシュ画面のアニメーションの後で、ユーザーインターフェイスが次第に遠ざかっていくアニメーションを表示するとします。それぞれのアニメーションを個別のユーザーコントロールに配置できますが、スプラッシュ画面のアニメーションが完了してから 2 番目のアニメーションが開始されるように設定してください。

ヒント :
アニメーションを繰り返し開始できるようにする場合は、キーフレームを 0 秒のマークに設定します。たとえば、オブジェクトを左から右に移動し、マウスのダブルクリックでトリガーされるアニメーションタイムラインを作成した場合に、キーフレームを 0 秒のマークに設定しなかったとします。この場合は、1 回目のダブルクリックだけでアニメーションが開始され、2 回目以降では開始されません。これは、このアニメーションがハンドオフアニメーションだからです。ハンドオフアニメーションについては、「アニメーションオブジェクト」の「複数の重なり合うアニメーションタイムラインの使用」を参照してください。

アニメーションを繰り返し開始できるようにする場合は、キーフレームを 0 秒のマークに設定します。たとえば、オブジェクトを左から右に移動し、マウスのダブルクリックでトリガーされるアニメーションタイムラインを作成した場合に、キーフレームを 0 秒のマークに設定しなかったとします。この場合は、1 回目のダブルクリックだけでアニメーションが開始され、2 回目以降では開始されません。これは、このアニメーションがハンドオフアニメーションだからです。ハンドオフアニメーションについては、「アニメーションオブジェクト」の「複数の重なり合うアニメーションタイムラインの使用」を参照してください。

[トリガー] パネルでプロパティまたはイベントトリガーを構成し、アプリケーションがユーザーの操作に応答するようにします。

例については、「WPF コントロールのトリガーの追加と削除」を参照してください。

メモ :
ユーザーコントロールに設定するトリガーを決定するときは、ユーザーコントロールで使用できるようにするすべてのプロパティとトリガーを検討してください。たとえば、アプリケーションに、ボタンと、ユーザーコントロールに含まれたアニメーションがあるとします。Expression Blend では、ボタン自体もユーザーコントロールの一部でない限り、ボタンがクリックされたときにアニメーションタイムラインを開始するユーザーコントロールに対してトリガーを追加することはできません。さらに、2 つのプロパティが同じユーザーコントロール内に存在する場合に限り、プロパティの値の間をデータバインドできます。この問題に対処するには、分離コードファイルのコードを変更するか、ドキュメントにユーザーコントロールを追加した後でユーザーコントロール用のトリガーとアニメーションタイムラインを含むテンプレートを作成します。ユーザーコントロールと分離コードファイルの例については、MSDN の「Windows Presentation Foundation 」セクションにある「コントロールの作成の概要」を参照してください。Expression Blend から分離コードファイルを変更する方法の詳細については、「分離コードファイルの変更」を参照してください。

ユーザーコントロールに設定するトリガーを決定するときは、ユーザーコントロールで使用できるようにするすべてのプロパティとトリガーを検討してください。たとえば、アプリケーションに、ボタンと、ユーザーコントロールに含まれたアニメーションがあるとします。Expression Blend では、ボタン自体もユーザーコントロールの一部でない限り、ボタンがクリックされたときにアニメーションタイムラインを開始するユーザーコントロールに対してトリガーを追加することはできません。さらに、2 つのプロパティが同じユーザーコントロール内に存在する場合に限り、プロパティの値の間をデータバインドできます。この問題に対処するには、分離コードファイルのコードを変更するか、ドキュメントにユーザーコントロールを追加した後でユーザーコントロール用のトリガーとアニメーションタイムラインを含むテンプレートを作成します。ユーザーコントロールと分離コードファイルの例については、MSDN の「Windows Presentation Foundation Cc294992.xtlink_newWindow(ja-jp,Expression.40).png 」セクションにある「コントロールの作成の概要」を参照してください。Expression Blend から分離コードファイルを変更する方法の詳細については、「分離コードファイルの変更」を参照してください。

ユーザーコントロールの作成が終了したら、ドキュメントのルートオブジェクトのサイズを、必要なだけの大きさになるように変更します。[オブジェクトとタイムライン] パネルでドキュメントルートを選択します。次に、[選択内容] ツールを使用して、アートボードの青いガイドを見ながらドキュメントウィンドウのサイズを調節します。
ユーザーコントロールが、マウスのクリックや、コントロール内の空白部分でも反応する場合は、ルートオブジェクトの背景に単色のブラシを設定して、コントロールを別のドキュメントに追加したときに、アートボード上の領域を確保できるようにする必要があります。[プロパティ] パネルの [ブラシ] カテゴリで、ルートオブジェクトの Background プロパティを [単色ブラシ] に変更します。背景を非表示にする場合は、Alpha サブプロパティを 0 に変更します。
ユーザーコントロールが特定の高さまたは幅に依存する場合は、[プロパティ] パネルの [レイアウト] カテゴリの [詳細] セクションにある MinHeight プロパティと MinWidth プロパティを設定します。
ドキュメントに描画するときにユーザーコントロールのサイズを変更できるようにする場合は、ユーザーコントロールのすべてのオブジェクトの [Width] プロパティと [Height] プロパティを [自動] に設定します。
[ファイル] メニューの [すべて保存] をクリックして、ファイルとプロジェクトを保存します。
プロジェクトがコントロールライブラリの場合は、[プロジェクト] メニューの [プロジェクトのビルド] をクリックする (または Ctrl + Shift + B キーを押す) ことで、プロジェクトをビルドして .dll ファイルを作成します。.dll ファイルがビルドされ、プロジェクトと同じ場所の \bin\Debug フォルダーに保存されます。