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

  • [アーティクル]

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

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

    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

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

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

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

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

Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

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

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

ストーリーボードがドキュメントのメイン機能である場合は、ドキュメントのメイン スコープ内にストーリーボードを作成します。このストーリーボードは、ドキュメントのメイン スコープ内のコントロールを操作しているユーザーによってトリガされます。Expression Blend でメイン ドキュメントのスコープ内にストーリーボードを作成すると、アプリケーション ウィンドウの読み込み時にストーリーボードを実行する新しいトリガが自動的に作成されます。トリガは、[組み合わせ] パネルの [トリガ] に表示されます。

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

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

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

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

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

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

  3. [トリガ] ウィンドウの下半分にあるドロップダウン メニューで、アニメーションをトリガするイベント (Window.Loaded) を変更します。たとえば、[Window.Loaded の発生時] を [textblock.MouseEnter の発生時] に変更します。

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

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

  1. ストーリーボードの作成時に Window.Loaded イベントの既定のトリガが作成された場合に、アプリケーションの起動時にストーリーボードが実行されないようにするには、[トリガ] で Window.Loaded を選択し、次のいずれかの操作を行います。

    • [トリガ] ウィンドウの下半分に複数のアクションが表示されている場合は、目的のストーリーボードを制御するアクション (たとえば、Storyboard1.Begin) を選択し、横にある [このアクションの削除] Cc295328.ff0160a1-9732-42f1-a503-485887342711(ja-jp,Expression.10).png ボタンをクリックします。

    • ストーリーボードを制御するアクションのみが表示された場合は、[トリガの削除] Cc295328.d31907a6-867b-4e16-b860-f07c9531fbd7(ja-jp,Expression.10).png ボタンをクリックしてトリガ全体を削除することができます。

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

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

    Cc295328.alert_tip(ja-jp,Expression.10).gifヒント :

    マウス ポインタをイベント名の上に置くと、そのイベントの短い説明が表示されます。ツールヒントは、イベントの説明を表示します。使用可能なイベントとその説明の一覧については、「WPF イベント クイック リファレンス」を参照してください。

  4. プログラミング ロジックの追加先のイベント (たとえば、MouseEnter イベント) を探します。

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

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

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

    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

    Expression Blend を構成することにより、Microsoft Visual Studio 2008 がインストールされている場合でもクリップボードを使用できます。[ツール] メニューの [オプション] をクリックし、[イベント ハンドラ] をクリックします。[使用したエディタ] で [クリップボードのみ] をクリックします。

  6. この時点で、Expression Blend によって次の 2 つの操作のいずれかが行われます。

    • Visual Studio 2008 Standard Edition 以降がインストールされている場合は、Expression Blend プロジェクトが Visual Studio 2008 で開き、コードビハインド ファイルが自動的に開いて、このファイルに空のイベント ハンドラ メソッドが貼り付けられます。

      Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

      Visual Studio 2008 と Visual Studio 2005 の両方がインストールされている場合、Visual Studio のバージョン選択ツールで Visual Studio 2008 ではなく、Visual Studio 2005 を開こうとすると、エラーが発生することがあります。これは、Expression Blend で作成された Visual Studio 2008 プロジェクトを Visual Studio 2005 で開くことができないためです。この場合、プロジェクトを Visual Studio 2008 で開いてから、Expression Blend の [プロパティ] パネルでイベント ハンドラを作成します。

    • Visual Studio 2008 Standard Edition 以降がインストールされていない場合は、Expression Blend によって空のイベント ハンドラ メソッドがクリップボードにコピーされ、次に実行できる操作を説明するポップアップ ウィンドウが表示されます。この場合、別のテキスト エディタでコードビハインド ファイルを手動で開いて、次に示すように、ウィンドウのクラス定義内にメソッドを貼り付けることができます。

      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
    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

    .cs または .vb のファイル拡張子にアプリケーション (メモ帳など) を関連付けている場合は、[プロジェクト] パネルの [ファイル] でファイル名をダブルクリックして、コードビハインド ファイルを手動で開くことができます。この場合は、Expression Blend 内から該当アプリケーションを起動してファイルを表示できます。

    .cs または .vb のファイル拡張子にアプリケーションを関連付けていない場合、Expression Blend から直接外部ファイルを開くことはできません。ファイルを開くには、Windows エクスプローラで該当ファイルを見つけ (Expression Blend でプロジェクトを保存した場合は、[プロジェクト] メニューの [プロジェクトの探索] をクリックし)、変更する .cs ファイルまたは .vb ファイルを右クリックして [プログラムから開く] を選択し、[メモ帳] (または他の編集アプリケーション) を選択します。その後、Expression Blend の [プロジェクト] パネルからコードビハインド ファイルを手動で開けるようになります。

  7. コードビハインド ファイルを開き、イベント ハンドラ メソッドを貼り付けたら、次のコードのうち太字の行をイベント ハンドラ メソッドに追加します。

    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

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

    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

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

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

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

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

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

    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

    スタイルまたはテンプレートを使用するかどうかの判断方法については、「スタイルとテンプレートの概要」を参照してください。
    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

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

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

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

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

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

    • Expression Blend に付属の簡易スタイルを変更するには、ツールボックスから [アセット ライブラリ] Cc295328.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png を開き、[コントロール] タブの [簡易スタイル] リソース ディクショナリをクリックします。次に、あらかじめスタイルが設定されたコントロールを選択し、そのコントロールをアートボード上で描画して、Simple Styles.xaml リソース ディクショナリを [リソース] パネルで使用できるようにしてから、前述のいずれかのオプションを使用して簡易スタイルまたはテンプレートを開きます。現在のプロジェクトで Simple Styles.xaml リソース ディクショナリを変更しても、現在のプロジェクトから別のプロジェクトに Simple Styles.xaml ファイルをコピーしない限り、別のプロジェクトの Simple Styles.xaml リソース ディクショナリには影響しません。

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

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

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

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

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

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

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

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

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

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

    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

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

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

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

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

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

    Cc295328.alert_caution(ja-jp,Expression.10).gif重要 :

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

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

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

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

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

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

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

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

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

  3. 「Storyboards in the main scope of your document」に記載されているタスクのいずれかで、イベント トリガまたはイベント ハンドラ メソッドを使用してアニメーションを制御できます。

    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

    [コントロールの作成] コマンドでオブジェクトをユーザー コントロールに変換する前にオブジェクトのイベント トリガをオブジェクトに作成した場合、ユーザー コントロールのスコープ内でイベント トリガを再作成する必要があります。これは、メイン ドキュメントのスコープ内とユーザー コントロールのスコープ内とで使用可能なイベントが異なるためです。たとえば、[UserControl.MouseDown の発生時] などのイベントは、Storyboard1.Begin などのアクションで構成できます。[コントロールの作成] コマンドを使用すると、リソースおよびアニメーションは新しいコントロールにリファクタリングされるため、再作成の必要はありません。
    Cc295328.alert_note(ja-jp,Expression.10).gifメモ :

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

Silverlight 1.0 アプリケーション内のストーリーボード

Silverlight 1.0 アプリケーション内のストーリーボードはリソースであり、Windows Presentation Foundation アプリケーションのようにキーで識別するのではなく、Silverlight 1.0 のすべてのリソースと同様に名前で識別されます。

Silverlight 1.0 アプリケーションでストーリーボードを制御するには

Silverlight 2 アプリケーション内のストーリーボード

Silverlight 2 アプリケーション内のストーリーボードは、イベント ハンドラまたは状態を使用して制御できます。

Silverlight 2 アプリケーションでストーリーボードを制御するには

  • イベント ハンドラ メソッドで、次のコードを使用します。

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

  • 状態で、状態の変化後に再生するアニメーションを追加します (「状態の変更後に再生されるアニメーションの追加」を参照)。

関連項目

概念

ストーリーボードの作成、変更、または削除

単純なアニメーションの作成