さまざまな状態に応じたシステム コントロールの外観の変更

  • [アーティクル]

このページは Silverlight 2 プロジェクトにのみ適用されます

コントロールは、どのような状態にあるかによって外観が変化します。たとえば、ボタンは、マウス ポインタでその上を移動したときに、わずかに色が変わります。"MouseOver" は、ボタンの状態の一種です。システム コントロールのさまざまな状態に合わせて、外観をカスタマイズできます。

次の手順ではボタンを使用していますが、Microsoft Expression Blend 2 に組み込まれているすべてのシステム コントロール、および Control クラスから継承する、インポートしたすべてのカスタム Silverlight 2 コントロールをカスタマイズできます。

さまざまな状態に応じたボタンの外観を変更するには

  1. Button Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,Expression.10).pngコントロールなどのシステム コントロールに再利用できるテンプレートを作成します (「システム コントロール用の再利用可能なテンプレートの作成」を参照)。

  2. テンプレート編集モードで表示していない場合は、アートボードのコントロールを右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。また、オブジェクトを選択して、階層リンク バーの [テンプレート] をクリックすることもできます。

    Dd185522.5bb586ea-6adc-4672-b316-0fab8215ff8c(ja-jp,Expression.10).png

  3. テンプレートの編集モードで表示している場合は、ボタンの状態 (Normal や MouseOver など) が、[組み合わせ] パネルの [状態] の下に表示されます。状態は、状態グループ (CommonStates や FocusStates など) にまとめられています。

    Dd185522.7740762c-1a9d-490f-898e-2886ac1cf541(ja-jp,Expression.10).png

    テンプレートの各パーツは、[オブジェクトとタイムライン] の下に表示されます。これらのパーツの外観を、選択した状態に合わせて変更できます。

    Dd185522.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(ja-jp,Expression.10).png

  4. [ステート] の下の [MouseOver] をクリックします。アートボードの上部に赤い円が表示され、状態の記録がオンになったことが示されます。これにより、選択した状態について、プロパティの変更が記録されます。[オブジェクトとタイムライン] では、展開ボタンの周囲に赤い円が表示され、Base を選択したときとは異なる設定のプロパティを持つテンプレートのパーツが示されます。

    Dd185522.a95c671a-5639-40b9-83db-1e6b214330d5(ja-jp,Expression.10).png

  5. MouseOver 状態のボタンのサイズを変更するには、[オブジェクトとタイムライン] の [グリッド] をクリックします。

    Dd185522.alert_tip(ja-jp,Expression.10).gifヒント :

    [グリッド] Dd185522.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(ja-jp,Expression.10).png は、水平方向、垂直方向、および余白に従って子オブジェクトを整列させるレイアウト パネルです。レイアウト パネルの詳細については、「レイアウトの概要」および「グリッド パネル」を参照してください。

  6. [プロパティ] パネルの [変換] で、[拡大縮小] Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(ja-jp,Expression.10).png タブをクリックします。X および Y の値を、1.1 に変更します。

  7. 作業内容を保存し (Ctrl + S)、F5 キーを押して、アプリケーションをビルドおよびテストします。ブラウザ ウィンドウにアプリケーションが開いたら、マウス ポインタをボタンの上に移動し、ボタンが拡大表示されるかどうかを確認します。

トラブルシューティング

  • 一部のテンプレート パーツには、テンプレート外部の値にバインドされるプロパティがあります。たとえば、Background パーツの Fill プロパティは、ボタンの Background プロパティに "テンプレート バインド" されます。これは、このテンプレートを使用するボタンを描画するときに、テンプレートでは、ボタン自体に設定した値が使用されることを意味します。テンプレート バインドを使用すると、カスタマイズされたコントロールをデザインすることができますが、アプリケーション内にコントロールを組み込むときに、何らかの変更が生じる場合があります。

    テンプレート内では、バインドされたプロパティはオレンジ色の境界ボックスで示されます。テンプレート バインドされたプロパティを変更する場合は、最初に、プロパティの隣にある [詳細プロパティ オプション] Dd185522.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(ja-jp,Expression.10).png ボタンをクリックして、[リセット] をクリックします。

    Dd185522.31f58be3-51bc-4806-af37-e32422465e8c(ja-jp,Expression.10).png

  • システム コントロールのテンプレートに、カスタムの状態や状態グループを追加することはできません。ただし、カスタム ユーザー コントロールを作成してから、カスタムの状態を定義しコードを追加して、ユーザー操作に基づいて状態を変更することはできます。詳細については、「Silverlight 2 プロジェクトでの新しいユーザー コントロールの作成」、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」、および「ユーザー操作への応答でのステートの変更」を参照してください。

  • アプリケーションをブラウザで表示するときに問題が発生した場合は、Silverlight 2 ランタイムを適切にインストールできなくなる可能性があります。詳細については、「Silverlight 2 ツールとランタイムのインストール」を参照してください。

次の手順

関連項目

概念

Silverlight 2 プロジェクトにおけるコントロールの描画

システム コントロール状態の切り替え時間の変更