ユーザー操作に対応する状態の変更

ユーザー コントロールを作成するときに、状態と状態グループを追加して、ユーザー コントロールがその状態に応じて外観が変わるように設定できます。ユーザーの操作 (マウスのクリックなど) によって状態が変わるようにするには、GoToState メソッドを呼び出すイベント ハンドラー メソッドを追加します。

詳細については、MSDN の「VisualStateManager.GoToState メソッド 」を参照してください。

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

クリックしたときに状態が変わるようにするには

状態を変更するには、GoToStateAction ビヘイビアーを使用するか、イベント ハンドラー メソッドを使用します。

ビヘイビアーの使用の詳細については、「オブジェクトへのビヘイビアーの追加」参照してください。

次に、状態を変更するイベント ハンドラー メソッドを追加する方法を示します。

1. 状態グループまたは状態をまだ作成していない場合は、ユーザー コントロールの各状態と切り替え効果を定義します。たとえば、次の図は、カード ゲームのカードを表すユーザー コントロールを示しています。[SideDisplayed] 状態グループには、カードの表を表示する状態 ([FaceUp]) とカードの裏を表示する状態 ([FaceDown]) が含まれています。

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

   

2. [状態] の [ベース] を選択し、状態の記録をオフにします。

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

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

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

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

   

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

   Enter キーを押すと、Microsoft 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
   

   詳細については、「分離コード ファイルの変更」を参照してください。

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 2010 で "ソリューションを読み込めません" というエラーが表示される場合は、Visual Studio 2010 用の Silverlight ツールがインストールされていない可能性があります。このツールをインストールし、Expression Blend の [イベント ] パネルで名前を入力してみてください。

  詳細については、「Visual Studio 2010 用 Microsoft Silverlight Tools 」を参照してください。

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

• アプリケーションのビルドに問題がある場合は、Silverlight の正しいバージョンがインストールされていない可能性があります。

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

次のステップ

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

• Expression Community Web サイト  には、状態と状態グループを使用した実例を参照できるチュートリアルのビデオが掲載されています。

Copyright ©2011 by Microsoft Corporation. All rights reserved.