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

2011年1月25日(火)
PROJECT KySS

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

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

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

図1: 5枚の画像がアコーディオンのように展開されていく(クリックで拡大)

今回のサンプルは以下よりダウンロードできます。
→ 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というフォルダを作成して、画像も追加しておきます。ダウンロードされたサンプル・ファイルには画像は追加済みです。

図2: XAMLコード内の要素を要素に置き換える

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

ツールボックスから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)。

図3: 5個の Imageコントロールに画像を表示させた(クリックで拡大)

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

各ImageのCanvas.Leftの値
ImageのName Canvas.Leftの値
Image1 34
Image2 200
Image3 366
Image4 532
Image5 698

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

図4: 2個のButtonを1つに、5枚のImageを1つに重ねた

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

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

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

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

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

図5: 「状態(S)」パネルの「状態グループの追加」アイコンをクリックする

図6: 「状態の追加」アイコンをクリックする

図7: 「ImageSlideIn」という名前を入力する(クリックで拡大)

図8: タイムラインを表示する(クリックで拡大)

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

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

図9: 再生ヘッドが「0」の位置で「キーフレームの記録」アイコンをクリックする

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

図10: Image2を選択した状態で、Leftの値に「200」を入力する(クリックで拡大)

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

図11: Image3~Image5までのLeftの値を指定(クリックで拡大)

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

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

図12: Go_Buttonの再生ヘッドが「1」の状態で、プロパティのVisibilityにCollapsedを指定する(クリックで拡大)

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

図13: 0秒時点に巻き戻して「再生」し、作成途中段階のアニメーションの動作を確認する(クリックで拡大)

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

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

図14: 「状態の追加」アイコンをクリックする

図15: 「ImageSlideOut」と入力する

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています