次の方法で共有

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

  • [アーティクル]

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

次の手順ではボタンを使用していますが、Microsoft Expression Blend のシステム コントロールや、Control クラスを継承するインポート済みの Microsoft Silverlight コントロールであれば、どのようなコントロールでもカスタマイズできます。

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

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

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

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

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

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

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

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

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

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

  5. MouseOver 状態になったときのボタンのサイズを変更するには、[オブジェクトとタイムライン] パネルの [Grid] をクリックします。

    tip noteヒント :

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

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

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

トラブルシューティング

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

    バインドされたプロパティには、テンプレート内で黄色い枠が付きます。テンプレートにバインドされたプロパティを変更する場合は、まず、プロパティの横にある [詳細オプション] Dd185522.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,Expression.40).png をクリックしてから、[リセット] をクリックします。

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

  • システム コントロールのテンプレートに、カスタムの状態や状態グループを追加することはできません。ただし、カスタム ユーザー コントロールを作成してから、カスタムの状態を定義し、ユーザーの操作によって状態が変わるようにコードを追加することはできます。

    詳細については、次のトピックを参照してください。

  • アプリケーションをブラウザーで表示するときに問題が発生した場合は、Silverlight ランタイムが正しくインストールされていない可能性があります。

    詳細については、「Silverlight ツールとランタイムのインストール」を参照してください。

次のステップ

  • マウス ポインターをボタンの上に移動したときのボタンの拡大表示にかかる時間を変更できます。詳細については、「状態の切り替え時間の変更」を参照してください。

  • マウス ポインターをボタンの上に移動したときにボタンが回転するようなアニメーションを追加できます。詳細については、「状態の変更後に再生されるアニメーションの追加」を参照してください。

  • このテンプレートをプロジェクト内の別のボタンに適用したり、テンプレートが既に割り当てられている新しいボタンを描画したりできます。詳細については、「スタイル リソースの適用」を参照してください。

関連項目

タスク

プロジェクトにおけるコントロールの描画
状態の切り替え時間の変更
システム コントロールのスタイル処理のための再利用可能なテンプレートの作成

Copyright ©2011 by Microsoft Corporation. All rights reserved.