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

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

次の手順ではボタンを使用しますが、Microsoft Expression Blend 2 に付属のすべてのシステム コントロールまたは、Control クラスを継承するインポートされた Silverlight 2 のカスタム コントロールをカスタマイズすることもできます。

ヒント :
ユーザー コントロールの状態や切り替え時間を変更することもできます。詳細については、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」を参照してください。

状態の切り替え時間を変更するには

1. Button コントロールなどのシステム コントロールに再利用できるテンプレートを作成します (「システム コントロール用の再利用可能なテンプレートの作成」を参照)。

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

   

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

   

   [CommonStates] の隣に、0 秒の値 ("0s") が設定されたテキスト ボックスがあります。これは、その状態グループの状態間の切り替え効果すべてに適用される切り替え時間の既定値です。たとえば、ある状態から Normal 状態に切り替えるには、0 秒かかります。この既定の切り替え時間を変更できます。

   

   MouseOver 状態や Pressed 状態に切り替えるときは、この値は "0.1s" で上書きされます。星印と矢印は、"ある状態からこの状態へ" ということを示しています。

   

4. [状態] の下の MouseOver 状態の [切り替え効果の追加] ボタンをクリックし、[MouseOver → Normal] 切り替え効果をクリックします。

   

5. [MouseOver → Normal] 切り替え効果の新しい行で、テキスト ボックスの値を「0s」から「0.5s」に変更します。

   

6. 編集内容を保存し (Ctrl + S)、F5 キーを押してアプリケーションをビルドおよびテストします。アプリケーションがブラウザのウィンドウに開いたら、ボタンの上でマウス ポインタを動かしてみます。マウス ポインタがボタンの外に移動したときに、切り替え効果が以前の状態に戻るまでどの程度時間がかかるかを確認してください。

トラブルシューティング

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

次のステップ

• さまざまな状態のボタンの外観を変更します。詳細については、「さまざまな状態に応じたシステム コントロールの外観の変更」を参照してください。

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

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

関連項目

概念

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

状態の変更後に再生されるアニメーションの追加