状態の切り替え時間の変更

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

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

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

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

1. [Button] コントロール など、システム コントロール用に再利用可能なテンプレートを作成します。

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

   

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

   

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

   

4. [状態] の下で MouseOver の横にある [切り替え効果の追加] をクリックし、[MouseOver to Normal] をクリックします。

   

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

   

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

トラブルシューティング

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

次のステップ

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

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

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

関連項目

タスク

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

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

システム コントロールのスタイル処理のための再利用可能なテンプレートの作成