GotoStateActionアクションを使ってトリガーを指定する

GoToStateActionアクションを使用することで、指定の表示状態をアクティブにするトリガーを適用できます。

では、まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。

ページが表示されると5枚の画像が、アコーディオンのように展開表示されます（図1）。[実行]ボタンが[リセット]に替わります。[リセット]ボタンをクリックすると、画像が折りたたまれていきます。コードは一行も記述する必要はありません。すべてBlend4内での操作で自動的にコードが生成されます。

今回のサンプルは以下よりダウンロードできます。
→　SL4_GotoStateAction.zip

新規プロジェクトの作成と依存関係の設定

早速サンプルを作っていきましょう。

VS 2010のメニューから[ファイル（F）／新規作成（N）／プロジェクト（P）]を選択します。本稿では開発言語にVisual Basicを用います。次に、「Silverlight アプリケーション」を選択して、「名前（N）」に任意のプロジェクト名を指定します。ここでは「SL4_GotoStateAction」という名前を付けています。

ソリューションエクスプローラー内のプロジェクト名を選択して、マウスの右クリックで表示されるショートカットメニューから、「プロジェクト依存関係（S）」の設定も忘れないようにしてください。詳細については「これからはじめるSilverlight 4」の連載を参照してください。

まず、MainPage.xamlの要素のWidthに900、Heightに600を指定します。次に、XAML内の要素をに置き換えてください。レイアウトするImageコントロールのCanvas.Leftの値を使用しますので、に置き換える必要があります（図2）。のままだとMargin属性が追加されます。

ソリューションエクスプローラー内にImageというフォルダを作成して、画像も追加しておきます。ダウンロードされたサンプル・ファイルには画像は追加済みです。

コントロールのレイアウト

ツールボックスからTextBlockを1個とImageを5個、Buttonコントロールを2個レイアウトします。TextBlockコントロールのText、FontSize、FontWeightプロパティを設定します。左のButton（NameはReset_Button）のContentプロパティに「リセット」と指定し、右のButton（NameがGo_Button）のContentプロパティには「実行」と指定します。

ImageコントロールのWidthに160、Heightに120と指定します。[共通]を展開して表示されるプロパティ内の、Sourceプロパティに、Imageフォルダに取り込んだ画像を指定します。Sourceプロパティの横にある[…]ボタンをクリックすると、「イメージの選択」画面が表示され、Imageフォルダ内の画像が表示されます。画像を選択し、[OK（O）]ボタンをクリックするとImageコントロールに画像が表示されます（図3）。

この時XAMLコード内に書き出される、各ImageのCanvas.Leftの値を控えておいてください。後ほど使用します。値は、以下の表のようになっています。

次に、[実行]ボタンを[リセット]ボタンの上に重ねます。画像もImage1の上にImage2～Image5までの画像を重ねます（図4）。

ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く（X）」を選択し、Blend4を起動します。

Expression Blendでの「状態」の追加とアニメーションの作成

「状態（S）」パネルの「状態グループの追加」アイコンをクリックし（図5）、「状態の追加」アイコンをクリックします（図6）。

「●VisualState状態 記録オン」に変わり、アートボード上の画面全体が赤の枠線で囲まれます。この状態でタイムラインの記録が可能になります。

「ImageSlideIn」という名前を入力します （図7）。「タイムラインを表示する」アイコンをクリックして、タイムラインを表示します（図8）。

5枚の画像が順次表示されるアニメーションの作成

状態を作成します。「オブジェクトとタイムライン（B）」内のImage2～Image5をすべて選択します。黄色の再生ヘッドが「0」の位置で、楕円下に＋マークの付いた「キーフレームの記録」アイコンをクリックします。Image2～Image5の再生ヘッドに楕円のマークが表示されます（図9）。

次に、黄色の再生ヘッドを「1」までドラッグし、Image2を選択した状態で、Image2のプロパティの[レイアウト]内のLeftの値に「200」を入力します。（図10）

同様な手順で、表1を参考にImage3～Image5までのLeftの値を指定します（図11）。

次に、画像がすべて表示されたら、[実行]ボタン（Go_Button）を非表示にして、[リセット]ボタン（Reset_Button）を表示させます。これら2つのボタンは重なっているだけですので、[実行]ボタン（Go_Button）を非表示にするだけで、[リセット]ボタン（Reset_Button）が表示されます。

「オブジェクトとタイムライン（B）」から、Go_Buttonを選択し、再生ヘッドが「1」の状態で、表示されるプロパティの[外観]のVisibilityの値をCollapsedに指定します（図12）。「オブジェクトとタイムライン（B）」内のGo_Buttonを展開すると中にVisibilityプロパティが追加されています。

ここで一度、動作を確認しておきましょう。「オブジェクトとタイムライン（B）」の「先頭のフレームに移動」アイコンをクリックして0秒時点に巻き戻し、「再生」アイコンをクリックして（図13　左図）、タイムラインの動きを確認します（図13右図）。図13の「●ImageSlideIn 記録オン」の先頭の赤いマークをクリックして、記録をオフにします。

次に、「Reset_Button」がクリックされた時に、表示されている画像が折りたたまれていく、状態を作成します。

「状態の追加」アイコンをクリックし（図14）、「ImageSlideOut」という名前を入力します （図15）。タイムラインは表示されたままになっていると思います。もし、間違ってタイムラインを閉じた場合は、図8を参考にタイムラインを表示してください。