プロジェクトでの新しいユーザー コントロールの作成
プロジェクトで何度も利用する独自のカスタム コントロールをデザインできます。これらのコントロールは、UserControl クラスを継承するため、テンプレートは使用しません。その代わりに、一からデザインを始めて、自分の好みにあった外観にすることができます。
空のユーザー コントロールを作成するには
プロジェクトを開きます。
[ファイル] メニューの [新しいアイテム] をクリックします (Ctrl キーを押しながら N キーを押します)。
.png "Dd185520.b2bd3ff5-22c3-403e-af75-ed0d4d1b7aed(JA-JP,Expression.30).png")
[新しいアイテム] ダイアログ ボックスで、[UserControl] を選択します。
[名前] ボックスに、コントロールのわかりやすい名前を入力します。
このユーザー コントロールの分離コード ファイルを生成する場合は、[コード ファイルを含める] チェック ボックスをオンにします。
.gif "ヒント")
ヒント :ユーザーの操作に反応するユーザー コントロールを作成する場合や、独自のビヘイビアーを作成する場合は、分離コード ファイルが必要です。
[OK] をクリックしてダイアログ ボックスを閉じ、編集するユーザー コントロールを開きます。
これで、ユーザー コントロールの外観をデザインできるようになりました。
既存のオブジェクトからユーザー コントロールを作成するには
新しいユーザー コントロールの一部にする既存のオブジェクトを選択します。
ヒント :複数のオブジェクトを選択するには、Ctrl キーを押しながらクリックします。
[ツール] メニューの [UserControl の作成] をクリックするか、F8 キーを押します。
.png "Dd185520.2a301fcf-3ece-4254-a3d1-654ad98cb9a7(JA-JP,Expression.30).png")
[UserControl の作成] ダイアログ ボックスに、ユーザー コントロールのわかりやすい名前を入力します。
ユーザー コントロール内に、選択したオブジェクトをそのまま残して、さらに複製を作成する場合は、[元のコンテンツを残し、必要に応じて複製を作成する] チェック ボックスをオンにします。
[OK] をクリックしてユーザー コントロール ファイルを作成し、編集する XAML ファイルをアートボード上に開きます。
プロジェクトのドキュメントにユーザー コントロールの新しいインスタンスを描画するには
すべてのファイルを保存します (Ctrl + Shift + S キーを押します)。
プロジェクトをビルドして (Ctrl + Shift + B キーを押します)、ユーザー コントロールが [アセット] パネルに表示されるようにします。
[ツール] パネルの [アセット]
.png "Dd185520.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png")
をクリックします。[アセット] パネルの [プロジェクト] タブで、ユーザー コントロールを選択します。
.png "Dd185520.9cd1da53-f2d2-4f69-8b7d-3cce14b06763(JA-JP,Expression.30).png")
マウスを使用して、アートボード上にユーザー コントロールを描画します。
| ヒント : |
|---|
選択したオブジェクトからコントロール テンプレートを作成する場合は、[コントロールの作成] コマンドを使います。アートボード上のオブジェクトを選択し、[Grid] などのレイアウト パネルでオブジェクトをグループにまとめたら、[ツール] メニューの [コントロールの作成] をクリックします。[コントロールの作成] コマンドは、ユーザー コントロールを作成するのではなく、選択したオブジェクトから構成されるテンプレートを含むコントロールのスタイルを作成します。同じ種類の別のコントロールを描画する場合は、[アセット] パネルの [スタイル] カテゴリでスタイルを選択してから、アートボードに描画します。 |
トラブルシューティング
- [UserControl の作成] コマンドを使用したときに、選択したオブジェクトにイベント ハンドラーやトリガーなどの分離したコンテンツが含まれている場合は、新しく作成したユーザー コントロールにそれらのイベント ハンドラー メソッドやトリガーを復元する必要があります。
次の手順
ユーザー コントロールにオブジェクトを追加できます。詳細については、次のトピックを参照してください。
ユーザー コントロール用の独自の状態を定義し、状態に応じてユーザー コントロールの外観を変えることができます。詳細については、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」を参照してください。
マウスのクリックに応じてユーザー コントロールの外観が変化するようにデザインできます。詳細については、「ユーザー操作に対応する状態の変更」を参照してください。
ユーザー コントロールをクリックしたときにユーザー コントロールの外観が複雑に変化するようにデザインできます。詳細については、「状態の変更後に再生されるアニメーションの追加」を参照してください。
ボタンのクリックなどのユーザー操作に応じて、実行時にユーザー コントロールが表示されるようにデザインできます。詳細については、「試してみよう : Silverlight アプリケーションでの新しいページの動的読み込み」を参照してください。