試してみよう : WPF ユーザー コントロールの作成
.png "このページは WPF プロジェクトにのみ適用されます。")
システム コントロールと同じようにアートボードに追加できる再利用可能なコンポーネントをデザインする場合、Microsoft Expression Blend でユーザー コントロールを作成できます。ユーザー コントロールは、Windows Presentation Foundation (WPF) アプリケーションと同様に、他のコントロール、リソース、およびアニメーション タイムラインを含むことができます。唯一の違いは、ルート要素が Window や Pageではなく UserControl という点です。
次の手順では、アニメーションを含むユーザー コントロールを作成し、他のドキュメントにインスタンスを作成する方法について説明します。既存のシステム コントロールを基にしてコードでカスタム コントロールを作成する例については、「試してみよう : カスタム WPF コントロールの作成」を参照してください。
Expression Blend に付属するサンプルには、その他にもユーザー コントロールの例があります。[ヘルプ] メニューの [ようこそ画面] をクリックし、[サンプル] タブをクリックします。次に、SmoothBlends などのサンプルの名前をクリックします。XAML とコードの例を含むユーザー コントロールの詳細については、MSDN の「Windows Presentation Foundation」のセクションにある「コントロールの作成の概要」を参照してください。
.gif "メモ") メモ : |
|---|
ユーザー コントロールは Microsoft Silverlight 1.0 ではサポートされません。ただし、プログラムでインスタンス化できるカスタム JavaScript クラスを作成できます。例については、[ヘルプ] メニューの [ようこそ画面] の [サンプル] タブからアクセスできる ButtonGallery サンプルの Button クラスを参照してください。 ユーザー コントロールは Silverlight 2 でサポートされています。詳細については、「Silverlight 2 プロジェクトでの新しいユーザー コントロールの作成」を参照してください。 |
ユーザー コントロールを定義するには
Expression Blend で、次のいずれかの操作を行います。
ユーザー コントロールを .dll ファイルで作成するには、[ファイル] メニューの [新しいプロジェクト] をクリックし、プロジェクトの種類として [WPF コントロール ライブラリ] を選択します。次に、プロジェクト名を設定し、メイン ドキュメントのコードビハインド ファイルの言語を選択して、[OK] をクリックします。このオプションを使用するのは、ユーザー コントロールを他のユーザーに提供するときにユーザー コントロールの実装を隠す場合、またはユーザー コントロールを別のアプリケーションで描画するときに、テンプレートを作成することでユーザー コントロールの外観を変更できるようにする場合です。
既存のプロジェクトの .xaml ファイルにユーザー コントロールを作成するには、[ファイル] メニューの [新しいアイテム] (Ctrl + N キー) をクリックし、UserControl テンプレートを選択します。次に、ファイル名を設定して、[OK] をクリックします。このオプションでは、ユーザー コントロールはそれを使用するプロジェクトの中にあるので、簡単に変更できます。また、.dll への参照を更新する手順を省略できます。
Expression Blend によって、ユーザー コントロールが編集用に開かれます。
ルート要素にするパネルの種類を決定します。既定では、LayoutRoot という名前のグリッドが使用され、ユーザー コントロールを別のドキュメントに描画したときに、アニメーションのサイズを変更できます。既定の設定をキャンバスまたは他のパネル コントロールに変更するには、[オブジェクトとタイムライン] の LayoutRoot 要素を右クリックし、[レイアウトの種類の変更] をポイントして、パネルの名前をクリックします。
ツールボックスから、ユーザー コントロールで使用するコントロールと描画ツールを選択し、アートボード上に描画します。[プロパティ] パネルのプロパティを使用して変更します。ユーザー コントロールは、WPF アプリケーションに含められるすべてのものを含むことができます。
[オブジェクトとタイムライン] で、必要なアニメーション タイムラインを作成します。例については、「単純なアニメーションの作成」を参照してください。
メモ :キーフレームを設定するときは、アプリケーション内のすべてのアニメーションのタイミングと、ユーザー コントロールのアニメーションを実行するタイミングを考慮してください。たとえば、スプラッシュ画面のアニメーションを表示した後、次第に遠ざかっていくユーザー インターフェイスのアニメーションを表示するとします。それぞれのアニメーションを個別のユーザー コントロールに配置できますが、スプラッシュ画面が完了するまで十分な時間を取ってから 2 番目のアニメーションを開始するように設定してください。
.gif "ヒント")
ヒント :アニメーションを繰り返し開始できるようにする場合は、キーフレームを 0 秒のマークに設定します。たとえば、オブジェクトを左から右に移動し、マウスのダブルクリックでトリガされるアニメーション タイムラインを作成した場合に、キーフレームを 0 秒のマークに設定しなかったとします。このアニメーションはハンドオフ アニメーションなので、マウスを初めてダブルクリックしたときだけ実行され、2 回目以降のダブルクリックでは実行されません。ハンドオフ アニメーションの詳細については、「アニメーションの概要」の「複数の重なり合うアニメーション タイムラインの使用」を参照してください。
[トリガ] で、プロパティまたはイベント トリガを構成し、アプリケーションがユーザー操作に応答するようにします。例については、「トリガの追加と削除」を参照してください。
メモ :ユーザー コントロールに設定するトリガを決定するときは、ユーザー コントロールで使用できるようにするすべてのプロパティとトリガを検討してください。たとえば、アプリケーションに、ボタンと、ユーザー コントロールに含まれたアニメーションがあるとします。Expression Blend では、ボタン自体もユーザー コントロールの一部でない限り、ボタンがクリックされたときにアニメーション タイムラインを開始するユーザー コントロールに対してトリガを追加することはできません。さらに、2 つのプロパティが同じユーザー コントロール内に存在する場合に限り、プロパティの値の間をデータ バインドできます。コードビハインド ファイルを使用してプログラムで、またはドキュメントにユーザー コントロールを追加した後でユーザー コントロール用にトリガとアニメーション タイムラインを含むテンプレートを作成することで、この問題を回避できます。ユーザー コントロールとコードビハインド ファイルの例については、MSDN の「Windows Presentation Foundation」のセクションにある「コントロールの作成の概要」を参照してください。Expression Blend からコードビハインド ファイルを変更する方法の詳細については、「コードビハインド ファイルの編集」を参照してください。
ユーザー コントロールの作成が終了したら、ドキュメントのルート要素のサイズを、必要なだけの大きさになるように変更します。[オブジェクトとタイムライン] でドキュメント ルートを選択した後、[選択内容]
.png "Cc294992.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png")
ツールを使用し、アートボードの青いガイドを使用してドキュメント ウィンドウのサイズを調節します。ユーザー コントロールがユーザー コントロールの空いている領域でのマウス クリックまたは操作に依存する場合は、ルート要素の背景に単色のブラシを設定し、別のドキュメントに追加したときに、ユーザー コントロールがアートボード上の領域を使用できるようにする必要があります。[プロパティ] パネルの [ブラシ] カテゴリで、ルート要素の Background プロパティを [単色ブラシ]
.png "Cc294992.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,Expression.10).png")
に変更します。背景を非表示にする場合は、[アルファ] サブプロパティを 0 に変更します。ユーザー コントロールが特定の高さまたは幅に依存する場合は、[プロパティ] パネルの [レイアウト] カテゴリの [詳細]
.png "Cc294992.81e110f1-4068-4299-957d-0693cea95088(ja-jp,Expression.10).png")
セクションにある MinHeight プロパティと MinWidth プロパティを設定します。ドキュメントに描画するときにユーザー コントロールのサイズを変更できるようにする場合は、ユーザー コントロールのすべてのオブジェクトの Width プロパティと Height プロパティを [自動] に設定します。
[ファイル] メニューの [すべて保存] をクリックして、ファイルとプロジェクトを保存します。
プロジェクトがコントロール ライブラリの場合は、[プロジェクト] メニューの [プロジェクトのビルド] をクリックする (または Ctrl + Shift + B キーを押す) ことで、プロジェクトをビルドして .dll ファイルを作成します。.dll ファイルがビルドされ、プロジェクトと同じ場所の \bin\Debug フォルダに保存されます。
.gif "Cc294992.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
他のドキュメントにユーザー コントロールのインスタンスを作成するには
コントロール ライブラリを作成した場合は、ユーザー コントロールを使用するプロジェクトに、.dll への参照を追加します。[プロジェクト] メニューの [参照の追加] をクリックし、[参照の追加] ウィンドウでユーザー コントロールの .dll ファイルを参照して、[開く] をクリックします。
アセット ライブラリでユーザー コントロールを選択できるようにするには、現在のプロジェクトをビルドします (Ctrl + Shift + B キーを押します)。
[アセット ライブラリ]
.png "Cc294992.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png")
の [カスタム コントロール] タブから、ユーザー コントロールを選択します。[アセット ライブラリ] ボタンの上に、ユーザー コントロールのアイコンが選択された状態で表示されます。マウスを使用して、アートボード上にユーザー コントロールを描画します。
プロジェクトをテストし (F5 キー)、ユーザー コントロールが動作することを確認します。
先頭に戻る
他のドキュメントに追加した後でユーザー コントロールを編集するには
コントロール ライブラリ (.dll) の代わりにユーザー コントロール ドキュメントを作成した場合は、ショートカット メニューを使用して、コントロールの編集モードに入ることができます。
アートボードまたは [オブジェクトとタイムライン] のユーザー コントロールを右クリックし、[コントロールの編集] をクリックします。Expression Blend によって、ユーザー コントロール ドキュメントが編集モードで開きます。
変更を行い、ファイルを保存した後、メイン ドキュメントに戻ります。
コントロール ライブラリ プロジェクトでユーザー コントロールを作成した場合は、元のコントロール ライブラリ プロジェクトを編集した後、.dll をリビルドする必要があります。
先頭に戻る