プロジェクトでの新しいユーザー コントロールの作成
プロジェクトで何度も利用する独自のカスタム コントロールをデザインできます。 これらのコントロールは、UserControl クラスを継承するため、テンプレートは使用しません。 その代わりに、一からデザインを始めて、自分の好みにあった外観にすることができます。
空のユーザー コントロールを作成するには
プロジェクトを開きます。
[ファイル] メニューの [新しいアイテム] をクリックします (Ctrl キーを押しながら N キーを押します)。
[新しいアイテム] ダイアログ ボックスで、[UserControl] を選択します。
[名前] ボックスに、コントロールのわかりやすい名前を入力します。
このユーザー コントロールの分離コード ファイルを生成する場合は、[コード ファイルを含める] チェック ボックスをオンにします。
ヒント
ユーザーの操作に反応するユーザー コントロールを作成する場合や、独自のビヘイビアーを作成する場合は、分離コード ファイルが必要です。
[OK] をクリックしてダイアログ ボックスを閉じ、編集するユーザー コントロールを開きます。
これで、ユーザー コントロールの外観をデザインできるようになりました。
既存のオブジェクトからユーザー コントロールを作成するには
新しいユーザー コントロールの一部にする既存のオブジェクトを選択します。
ヒント
複数のオブジェクトを選択するには、Ctrl キーを押しながら各オブジェクトをクリックします。
[ツール] メニューの [UserControl の作成] をクリックするか、F8 キーを押します。
[UserControl の作成] ダイアログ ボックスに、ユーザー コントロールのわかりやすい名前を入力します。
ユーザー コントロール内に、選択したオブジェクトをそのまま残して、さらに複製を作成する場合は、[元のコンテンツを残し、必要に応じて複製を作成する] チェック ボックスをオンにします。
[OK] をクリックしてユーザー コントロール ファイルを作成し、編集する XAML ファイルをアートボード上に開きます。
プロジェクトのドキュメントにユーザー コントロールの新しいインスタンスを描画するには
すべてのファイルを保存します (Ctrl + Shift + S キーを押します)。
プロジェクトをビルドして (Ctrl + Shift + B キーを押します)、ユーザー コントロールが [アセット] パネルに表示されるようにします。
[ツール] パネルの [アセット] をクリックします。
[アセット] パネルの [プロジェクト] タブで、ユーザー コントロールを選択します。
マウスを使用して、アートボード上にユーザー コントロールを描画します。
ヒント
選択したオブジェクトからコントロール テンプレートを作成する場合は、[コントロールの作成] コマンドを使います。アートボード上のオブジェクトを選択し、[Grid] などのレイアウト パネルでオブジェクトをグループにまとめたら、[ツール] メニューの [コントロールの作成] をクリックします。[コントロールの作成] コマンドは、ユーザー コントロールを作成するのではなく、選択したオブジェクトから構成されるテンプレートを含むコントロールのスタイルを作成します。同じ種類の別のコントロールを描画する場合は、[アセット] パネルの [スタイル] カテゴリでスタイルを選択してから、アートボードに描画します。
トラブルシューティング
- [UserControl の作成] コマンドを使用したときに、選択したオブジェクトにイベント ハンドラーやトリガーなどの分離したコンテンツが含まれている場合は、新しく作成したユーザー コントロールにそれらのイベント ハンドラー メソッドやトリガーを復元する必要があります。
次の手順
ユーザー コントロールにオブジェクトを追加できます。 詳細については、次のトピックを参照してください。
ユーザー コントロール用の独自の状態を定義し、状態に応じてユーザー コントロールの外観を変えることができます。 詳細については、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」を参照してください。
マウスのクリックに応じてユーザー コントロールの外観が変化するようにデザインできます。 詳細については、「Blend でユーザー操作に対応する状態を変更する」を参照してください。
ユーザー コントロールをクリックしたときにユーザー コントロールの外観が複雑に変化するようにデザインできます。 詳細については、「Blend で状態の変更後に再生されるアニメーションを追加する」を参照してください。
ボタンのクリックなどのユーザー操作に応じて、実行時にユーザー コントロールが表示されるようにデザインできます。 詳細については、「Try it: Load a new page dynamically in your Silverlight application」を参照してください。