PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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

GotoStateActionアクションを使ってトリガーを指定する | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。