ユーザー操作への応答でのステートの変更

ユーザー コントロールを作成するとき、ステートとステート グループを追加して、ユーザー コントロールのステートに応じてその外観を変更できます。ユーザー操作 (マウス クリックなど) への応答でこれらのステートを変更するには、GoToState メソッドを呼び出すイベント ハンドラ メソッドを追加します。

メモ :
ボタンなどのシステム コントロールのテンプレートを変更するときは、ユーザー操作へのコントロールの応答に加え、既定のステートが既に定義されています。既定のステートは、追加または削除することができません。しかし、異なるステートでコントロールの外観を変更したり、次の手順を使用してステートを変更できます。

マウス クリックへの応答でステートを変更するには

1. ステート グループとステートをまだ作成していない場合は、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」を実行できます。たとえば、次のイメージは、カード ゲームのカードを表すユーザー コントロールを示しています。SideDisplayed ステート グループには、カードの表を表示するステート (FaceUp) とカードの裏を表示するステート (FaceDown) が含まれています。

   

2. [ステート] の [ベース] をクリックし、ステートの記録をオフにします。

3. [オブジェクトとタイムライン] で UserControl オブジェクトを選択し、ユーザー コントロール全体の表面領域上で行なわれるアクションに応答するイベントをフックします。

4. [プロパティ] パネルで [イベント]  ボタンをクリックし、プロパティ ビューからイベント ビューに切り替えます。

   ヒント :
   [プロパティ] パネルをプロパティ ビューに戻すには、[プロパティ]  ボタンをクリックします。

5. MouseLeftButtonDown イベントの横に、「goClick」など、イベント ハンドラ メソッドの名前を入力します。

   

   ヒント :
   または、イベント テキスト ボックス内をダブルクリックし、イベント ハンドラ メソッドの既定の名前を生成することもできます。

   Enter キーを押すと、Microsoft Visual Studio 2008 がインストールされている場合は、Microsoft Expression Blend によってプロジェクトが Microsoft Visual Studio 2008 で開かれます。コード エディタがインストールされていない場合は、Expression Blend によってイベント ハンドラ メソッドのコードがクリップボードにコピーされるので、ユーザー コントロールのコードビハインド ファイルをテキスト エディタで開き、クリップボードからコードを貼り付けることができます。

   private void goClick(object sender, MouseButtonEventArgs e)
   {
   
   }
   

   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
   
   End Sub
   

   Visual Studio 2008 と Expression Blend の相互運用性の詳細については、「コードビハインド ファイルの編集」を参照してください。

6. ユーザー コントロールのステートを変更するには、ステートの名前とともに GoToState メソッドを呼び出します。たとえば、以下の太字のコードをコードビハインド ファイルに貼り付けます。

   private bool isFaceUp = false;
   
   private void goClick(object sender, MouseButtonEventArgs e)
   {
     if (isFaceUp)  {    VisualStateManager.GoToState(this, "FaceDown", true);  }  else  {    VisualStateManager.GoToState(this, "FaceUp", true);}  isFaceUp = !isFaceUp;
   }
   

   Private isFaceUp As Boolean = False
   
   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
     If isFaceUp Then    VisualStateManager.GoToState(Me, "FaceDown", True)  Else    VisualStateManager.GoToState(Me, "FaceUp", True)  End If  isFaceUp = Not (isFaceUp)
   End Sub
   

7. プロジェクトをビルドします (Ctrl + Shift + B キー)。

8. プロジェクトをテストし (F5)、ユーザー コントロールをクリックして、ステートが変化するか確認します。

トラブルシューティング

• Expression Blend の [イベント] パネルに名前を入力するとき、"コードビハインド ファイルを変更できません。次のクラスが見つかりません" というエラーが発生する場合は、外部のコード エディタ (通常は Microsoft Visual Studio) に切り替えて、ソリューションの再読み込みが必要となることがあります。再読み込みにより、不足するクラスを定義する新しいファイルがインクルードされます。Visual Studio 2008 でエラー "Cannot load the solution" が発生する場合は、Visual Studio 2008 用 Microsoft Silverlight Tools がインストールされていない可能性があります。このツールをインストールし、Expression Blend の [イベント] パネルで名前を入力してみてください。

• プロジェクトのテスト (F5) でユーザー コントロールが表示されず、ブラウザでエラーが示されていない場合は、開始ドキュメントでユーザー コントロールのインスタンスを描画していない可能性があります。開始ドキュメントとは、アプリケーションを実行したときに表示される最初のドキュメントです。別の文書にユーザー コントロールを作成した場合は、プロジェクトをビルドし (Ctrl + Shift + B キー)、開始文書 (通常は Page.xaml) を開き、アセット ライブラリ  を開きます。次に、[カスタム コントロール] タブでユーザー コントロールを選択し、ユーザー コントロールをアートボード上に描画します。

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

次の手順

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

• Expression コミュニティの Web サイト (英語の可能性あり) にある使用方法のビデオ チュートリアルで、ステートとステート グループを使用する実際のシナリオを見ることができます。