ストーリーボードの実行タイミングの制御

  • [アーティクル]

ストーリーボードを Microsoft Expression Blend アプリケーションで実行するタイミングを次の方法で制御できます。

  • ストーリーボードを制御するのに使うオブジェクトにビヘイビアーをドラッグします。[ControlStoryboardAction] ビヘイビアーを使用するか、状態を使ってアニメーションを作成する場合は、[GoToStateAction] ビヘイビアーを使用できます。詳細については、「オブジェクトへのビヘイビアーの追加」を参照してください。

  • ボタン クリックなどのイベントの発生時、またはストーリーボードがコントロール テンプレート内にある場合はプロパティの変更時にストーリーボードを実行するトリガーを作成する。

    Noteメモ :

    Microsoft Silverlight プロジェクトでは、トリガーを使用できません。

  • ストーリーボードの Begin メソッドを呼び出す分離コード ファイル内にイベント ハンドラー メソッドを作成します。

これらのメソッドを使用して、ストーリーボードを停止、一時停止、再開、削除するタイミングやストーリーボードの末尾にスキップするタイミングを制御することもできます。

これらのメソッドは、作業しているスコープによって若干異なります。

Noteメモ :

次の手順はビジュアル アニメーションが含まれているストーリーボードの場合を示していますが、この手順をオーディオまたはビデオのストーリーボードにも適用できます。詳細については、「作業中のドキュメントへのオーディオまたはビデオ ファイルの挿入」を参照してください。

ドキュメントのメイン スコープ内のストーリーボード

ストーリーボードがドキュメントのメイン機能である場合は、ドキュメントのメイン スコープ内にストーリーボードを作成します。このストーリーボードは、ドキュメントのメイン スコープ内のコントロールを操作しているユーザーによってトリガーされます。

イベント ハンドラー メソッドを使用して、ドキュメントのメイン スコープ内でストーリーボードを制御するには

  1. 開いているすべてのストーリーボードを閉じます。詳細については、「ストーリーボードを開くまたは閉じる」を参照してください。

  2. WPF プロジェクトで作業している場合は、ストーリーボードで作成した Window.Loaded イベント用に作成した既定のトリガーを削除します。詳細については、「WPF コントロールのトリガーの追加と削除」を参照してください。

  3. [オブジェクトとタイムライン] パネルで、ユーザーの操作に反応してストーリーボードを実行するオブジェクトを選択します。たとえば、ユーザーがマウス ポインターをテキスト ブロックに合わせたときにストーリーボードを実行する場合は、テキスト ブロックを選択します。

  4. [プロパティ] パネルの [イベント] Cc295328.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ja-jp,Expression.40).png をクリックします。選択したオブジェクトに使用できるすべてのイベントの一覧がアルファベット順に表示されます。

    tip noteヒント :

    イベントの説明を見るには、イベントの名前の上にポインターを置きます。イベントのツールヒントが表示されます。

  5. プログラミング ロジックの追加先のイベント (MouseEnter イベントなど) を探します。

  6. 空のイベント ハンドラー メソッドを生成する方法は 2 つあります。

    • イベント名の横にあるテキスト ブロック内をダブルクリックします。Expression Blend によってイベント ハンドラー メソッド用に既定の名前が生成され、テキスト ブロックに入力されます。空のメソッドのコードも生成されます。

    • イベント名の横にあるテキスト ブロックに名前を入力して Enter キーを押すか、テキスト ブロックの外部をクリックしてテキスト ブロックからフォーカスを外します。イベント メソッド名の先頭は、文字にする必要があります。指定したメソッド名が分離コード ファイル内で使用されていない場合は、Expression Blend によって空のメソッドのコードが生成され、その名前が使用されます。

  7. 分離コード ファイルが開き、空のイベント ハンドラー メソッドが貼り付けられます。

    private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{

}

    Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)

End Sub

  8. 分離コード ファイルを開いた状態で、イベント ハンドラー メソッドを貼り付けたら、次のコードのうち太字の行をイベント ハンドラー メソッドに追加します。

    private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
    Storyboard myStoryboard;   
    myStoryboard = (Storyboard)this.Resources["Storyboard1"];   
    myStoryboard.Begin(this);   
}

    Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim myStoryboard As New Storyboard   
    myStoryboard = CType(Me.Resources("Storyboard1"), Storyboard)   
    myStoryboard.Begin(Me)   
End Sub

  9. すべてのファイルを保存し、F5 キーを押してアプリケーションをビルドおよびテストします。たとえば、実行中のアプリケーションでテキスト ブロックの上にマウス ポインターを移動して、アニメーションが開始するかどうかを確認します。

    Noteメモ :

    テキスト ブロック上に再度マウス ポインターを移動してもアニメーションが開始点を返さない場合、0 秒のマークでキーフレームを設定していないことが原因である可能性があります。

イベント トリガーを使用して、ドキュメントのメイン スコープ内でストーリーボードを制御するには (WPF のみ)

Expression Blend で、Windows Presentation Foundation (WPF) プロジェクトのメイン ドキュメントのスコープ内にストーリーボードを作成すると、アプリケーション ウィンドウの読み込み時にストーリーボードを実行する新しいトリガーが自動的に作成されます。トリガーは、[トリガー] パネルに表示されます。

ストーリーボードの作成時に Expression Blend で設定される既定のトリガー

Cc295328.daa5d5de-713b-4d58-9f98-4ef65b217e9d(ja-jp,Expression.40).png

このトリガーをそのままにした場合、ストーリーボードはアプリケーションの起動時にすぐに実行されます。または、この動作を変更する場合は、次の手順に従います。

  1. 開いているすべてのストーリーボードを閉じます。詳細については、「ストーリーボードを開くまたは閉じる」を参照してください。

  2. ストーリーボードの作成時に Window.Loaded イベントの既定のトリガーを作成した場合、アプリケーションの起動時にストーリーボードが実行されないようにするには、[トリガー] パネルで [Window.Loaded] を選択します。それ以外の場合は、[イベント トリガーの追加] Cc295328.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.40).png をクリックして、新しい既定のイベント トリガーを作成します。

  3. [オブジェクトとタイムライン] パネルで、ユーザーの操作に反応してストーリーボードを実行するオブジェクトを選択します。たとえば、ユーザーがマウス ポインターをテキスト ブロックに合わせたときにストーリーボードを実行する場合は、テキスト ブロックを選択します。

  4. [トリガー] パネルにあるドロップダウン メニューで、アニメーションをトリガーするイベント (Window.Loaded) を変更します。たとえば、When Window.Loaded is raised を When textblock.MouseEnter is raised に変更します。

  5. イベントがトリガーされたときに発生するアクションを定義します。アクションが表示されない場合は、[新しいアクションの追加] Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。アクションが目的のストーリーボード名 ("Storyboard1" など) に設定されていること、および呼び出すメソッドが Begin であることを確認します。または、ストーリーボードで有効な任意のメソッドを選択することもできます。詳細については、「WPF コントロールのトリガーの追加と削除」を参照してください。

コントロール テンプレートおよびスタイル内のストーリーボード

コントロール テンプレートの変更時にプロパティ トリガーまたはイベント トリガーにアクションを追加する場合などに、Microsoft Expression Blend でストーリーボードが自動作成される場合があります。スタイルとテンプレートの使用方法の詳細については、「テンプレートを使用するコントロールのスタイルの設定」を参照してください。

Noteメモ :

次に、WPF プロジェクトで行う操作を示します。Silverlight プロジェクトでは、状態を使用してストーリーボードを制御できます。詳細については、「ユーザー操作に対応する状態の変更」および「状態の変更後に再生されるアニメーションの追加」を参照してください。

テンプレートのスコープ内のストーリーボードを制御するには

  1. 次のいずれかの方法で、変更するスタイルまたはテンプレートを開きます。

    Noteメモ :

    スタイルまたはテンプレートを使用するかどうかの判断方法については、「テンプレートを使用するコントロールのスタイルの設定」を参照してください。
    Noteメモ :

    パス オブジェクトなどのオブジェクトは、テンプレートをサポートしていません。Button や RadioButton などのコントロールは、テンプレートをサポートしません。

    • 新しいテンプレートを作成するには、アートボードまたは [オブジェクトとタイムライン] パネルでオブジェクトを選択し、[オブジェクト] メニューの [スタイルの編集] をクリックし、[コピーして編集] を選択します。[スタイル リソースの作成] ダイアログ ボックスが表示されます。リソースを定義する場所を選択し、[OK] をクリックします。詳細については、「スタイルの作成」を参照してください。

    • 新しいスタイルを作成するには、アートボードまたは [オブジェクトとタイムライン] パネルでオブジェクトを選択し、[オブジェクト] メニューの [スタイルの編集] をクリックし、[コピーして編集] を選択します。[スタイル リソースの作成] ダイアログ ボックスが表示されます。リソースを定義する場所を選択し、[OK] をクリックします。詳細については、「スタイルの作成」を参照してください。

    • 既存のテンプレートを開くには、[リソース] パネルでスタイルの横にある [リソースの編集] Cc295328.1f87709f-f24b-42f7-8da8-da155afd912f(ja-jp,Expression.40).png をクリックし、[オブジェクトとタイムライン] パネルに表示される [Style] 要素を右クリックします。次に、[テンプレートの編集] をクリックし、[現在のテンプレートの編集] を選択します。または、カスタム スタイルを適用済みのコントロールを選択し、[オブジェクト] メニューの [テンプレートの編集] をクリックして、[現在のテンプレートの編集] を選択します。

    • 既存のスタイルを開くには、[リソース] パネルでスタイルの横にある [リソースの編集] Cc295328.1f87709f-f24b-42f7-8da8-da155afd912f(ja-jp,Expression.40).png をクリックします。または、カスタム スタイルを適用済みのコントロールを選択し、[オブジェクト] メニューの [スタイルの編集] をクリックして、[現在のスタイルの編集] を選択します。

    • Expression Blend に組み込まれている Simple スタイルの 1 つを変更するには、[ツール] パネルで [アセット] Cc295328.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,Expression.40).png、[スタイル] カテゴリ、[Simple Styles] リソース ディクショナリの順にクリックします。次に、あらかじめスタイルが設定されたコントロールを選択し、そのコントロールをアートボードに描画して、Simple Styles.xaml リソース ディクショナリを [リソース] パネルで選択できるようにしてから、上のいずれかのオプションを使用して Simple スタイルまたはテンプレートを開きます。現在のプロジェクトで Simple Styles.xaml リソース ディクショナリを変更しても、現在のプロジェクトから別のプロジェクトに Simple Styles.xaml ファイルをコピーしない限り、別のプロジェクトの Simple Styles.xaml リソース ディクショナリには影響しません。

  2. スタイルまたはテンプレートの編集スコープ内では、アートボード上部の新しい Expression Blend 階層リンク バーを確認します。

    テンプレート編集モード選択時の階層リンク バー

    Cc295328.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(ja-jp,Expression.40).png

    階層リンク バーのボタンをクリックすることで、選択済みのオブジェクトに対するテンプレート編集モード、スタイル編集モード、およびオブジェクト編集スコープを簡単に切り替えることができます。階層リンク バーは、選択したオブジェクトにカスタム スタイルまたはテンプレートが適用されている場合に表示されます。

  3. [オブジェクトとタイムライン] パネルの [新規作成] Cc295328.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,Expression.40).png をクリックします。

    Cc295328.e2e87d8d-17b7-443b-a608-8c5ae681fce8(ja-jp,Expression.40).png

    [ストーリーボード リソースの作成] ダイアログ ボックスが表示されます。

    Cc295328.ee0efe60-655f-44cf-bea6-30830185b4c0(ja-jp,Expression.40).png

  4. 名前を入力して [OK] をクリックします。[ストーリーボード リソースの作成] ダイアログ ボックスが閉じ、Expression Blend がタイムライン記録モードになります。

  5. 編集中のスタイルまたはテンプレート内のオブジェクトのみに適用されるアニメーションを作成します。

    Noteメモ :

    変更中のテンプレートまたはスタイルの外部にあるオブジェクトをアニメーション化することはできませんただし、スタイルまたはテンプレート内の既存のオブジェクトはアニメーション化できます。また、テンプレートを変更するときに、テンプレート ノード内の項目をレイアウト パネル (Grid など) にグループ化し、そのレイアウト パネルにオブジェクトを追加してアニメーション化することもできます。

  6. 次のいずれかの方法で、新しいストーリーボードをトリガーします。

    • ストーリーボードを既存のプロパティ トリガーに追加するには、まず、[トリガー] パネルでトリガーを選択します。次に、トリガーがアクティブになったときとアクティブでなくなったときのどちらでストーリーボードを実行するかに応じて、[トリガー] パネルの下半分にある [アクティブ化する際のアクション] または [非アクティブ化する際のアクション] の横の [新しいアクションの追加] Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。トリガーがアクティブになったときに発生するアクションとして、新しいストーリーボードが自動的に追加されます。

    • ストーリーボードを新しいプロパティ トリガーに追加するには、[プロパティ トリガーの追加] Cc295328.9871399d-14aa-4955-9934-04f33700f273(ja-jp,Expression.40).png をクリックし、[トリガー] パネルの下半分で、既定の target-element.IsCancel = False を目的のプロパティと値 (target-element.IsPressed = True など) に変更して、[新しいアクションの追加] Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。イベントが発生したときに発生するアクションとして、新しいストーリーボードが自動的に追加されます。

    • ストーリーボードに新しいイベント トリガーを追加するには、[イベント トリガーの追加] Cc295328.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.40).png をクリックし、[トリガー] パネルの下半分で、既定の When target-element.Loaded is raised を目的のイベント (When target-element.Click is raised など) に変更して、[新しいアクションの追加] Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。イベントが発生したときに発生するアクションとして、新しいストーリーボードが自動的に追加されます。

    important note重要 :

    テンプレートの一般的な変更を行う前に、常に [既定] トリガーを選択してトリガー記録モードをオフにしてください。そうしないと、誤って既存のトリガーを変更する可能性があります。
    Caution note注意 :

    スタイルおよびテンプレートの変更時には、スタイルまたはテンプレートの適用先のシステム コントロールの機能を損なう可能性があります。注意事項の一覧については、「テンプレートを使用するコントロールのスタイルの設定」の「ベスト プラクティス」を参照してください。

  7. すべてのファイルを保存し、F5 キーを押してアプリケーションをビルドおよびテストします。

    テンプレートの具体的な変更例については、「試してみよう: ボタンへのアニメーションの追加」を参照してください。

ユーザー コントロール内のストーリーボード

ストーリーボードをユーザー コントロール内に配置することにより、オブジェクトおよびストーリーボードをカプセル化して、1 つの XAML ドキュメントおよび分離コード ファイル内でこれらのオブジェクトをアニメーション化することができます。ユーザー コントロールを他のドキュメント内で複数回インスタンス化できます。

ユーザー コントロール内のストーリーボードを制御するには

  1. 次のいずれかの方法で、編集するユーザー コントロールを作成して開きます。

  2. アニメーション ストーリーボードを作成し、ユーザー コントロール内のオブジェクトの一部をアニメーション化します。

  3. 「ドキュメントのメイン スコープ内のストーリーボード」にあるタスクのいずれかを行って、イベント トリガーまたはイベント ハンドラーでアニメーションを制御できるようになります。

    Noteメモ :

    [UserControl の作成] コマンドでオブジェクトをユーザー コントロールに変換する前にオブジェクトのイベント トリガーをオブジェクトに作成した場合は、ユーザー コントロールのスコープ内でイベント トリガーを再作成する必要があります。これは、メイン ドキュメントのスコープ内とユーザー コントロールのスコープ内とで使用可能なイベントが異なるためです。たとえば、When UserControl.MouseDown is raised などのイベントを Storyboard1.Begin などのアクションで構成します。[UserControl の作成 ] コマンドを使用すると、リソースおよびアニメーションは新しいコントロールに組み込まれるので、再作成の必要はありません。
    Noteメモ :

    [UserControl コントロールの作成] コマンドでオブジェクトをユーザー コントロールに変換する前にオブジェクトのイベント ハンドラー メソッドを作成した場合は、メイン ドキュメントの分離コード ファイル内のイベント ハンドラー メソッド コードはユーザー コントロールの分離コード ファイルに移動しません。これは、同じイベント ハンドラー メソッドが他のオブジェクトで使用されている可能性があるためです。イベント ハンドラー メソッドをユーザー コントロールの分離コード ファイルにコピーして貼り付けることができます。

関連項目

タスク

ストーリーボードの作成、変更、または削除
単純なアニメーションの作成

Copyright ©2011 by Microsoft Corporation. All rights reserved.