Blend で状態の切り替え時間を変更する

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

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

ヒント

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

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

1. システム コントロール (Button コントロール など) に対応する再利用可能なテンプレートを作成します。

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

   

3. 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 ランタイムが正しくインストールされていない可能性があります。 詳細については、「Blend 用の Silverlight ツールとランタイムのインストール」を参照してください。

次の手順

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

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

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

参照

処理手順

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

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

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