次の方法で共有

Blend でユーザー操作に対応する状態を変更する

  • [アーティクル]

独自のユーザー コントロールを作成するとき、状態および状態グループを追加し、ユーザー コントロールの状態に対してさまざまな外観を定義することができます。 ユーザーの操作 (クリックなど) に応答してこれらの状態を変更するには、GoToState メソッドを呼び出すためのイベント ハンドラー メソッドを追加します。

注意

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

クリックしたときの状態の変化

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

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

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

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

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

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

    JJ170611.74c3b2ef-32ab-4aaa-839d-852741d9b2c2(ja-jp,VS.120).png

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

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

  4. [プロパティ] パネルで [イベント] JJ170611.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ja-jp,VS.120).png をクリックし、プロパティ ビューからイベント ビューに切り替えます。

    ヒント

    [プロパティ] パネルをプロパティ ビューに戻すには、[プロパティ]JJ170611.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ja-jp,VS.120).png をクリックします。

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

    ヒント

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

    Enter キーを押すと、Blend for Visual Studio でユーザー コントロールの分離コード ファイルが開き、イベント ハンドラー メソッドのコードが貼り付けられます。

    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 キーを押してプロジェクトをテストし、ユーザー コントロールをクリックして状態が変わることを確認します。

JJ170611.collapse_all(ja-jp,VS.120).gifトラブルシューティング

  • 次のエラーが表示されることがあります。"分離コード ファイルを変更できません。 次のクラスが見つかりません"。これは、Blend の [イベント] パネルに名前を入力したときに発生する可能性があります。この場合は、外部のコード エディター (通常は Microsoft Visual Studio) に切り替えて、ソリューションを再読み込みする必要が生じることがあります。 再読み込みすると、見つからないクラスを定義する新しいファイルが追加されます。

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

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

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

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

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

JJ170611.collapse_all(ja-jp,VS.120).gif次の手順