ブラウザ上で複数の画像を自動的に並び替える

FluidMoveBehaviorとRemoveElementActionを設定する

キーがWrapPanelTemplate内にレイアウトした要素にFluidMoveBehaviroビヘイビアを設定します。WrapPanelTemplate内にレイアウトした要素は、通常の状態では、「オブジェクトとタイムライン（B）」に表示されておりません。表示させるには下記の手順に従います。

まず、ListBoxを選択し、マウスの右クリックで表示されるメニューから、「追加テンプレートの編集（D）／アイテムのレイアウトの編集（ItemsPanel）／現在のテンプレートの編集（U）」と選択します（図11）。

すると、図12のようにWrapPanelTemplate内にレイアウトしていた、要素が、「オブジェクトとタイムライン（B）」内に表示されます。

「アセット」パネルから「ビヘイビア」を選択し、FluidMoveBehaviorビヘイビアを「オブジェクトとタイムライン（B）」内の[WrapPanel]上にドラッグ&ドロップします（図13）。

［WrapPanel］要素の子としてFluidMoveBehaviorが追加されます（図14）。

今追加したFluidMoveBehaviorのプロパティを設定します。[共通プロパティ]のAppliesToプロパティにはChildrenを指定します。AppliesToプロパティにはビヘイビアーを適用するオブジェクトを選択します。Childrenは、指定したオブジェクトのすべての子に、ビヘイビアーが適用されます。次にEaseXとEaseYをドロップダウンリストから選択します。EaseXプロパティには水平方向のイージング機能を指定します。ここでは、要素（画像）が削除された時、逆の動きを伴って残りの要素（画像）が並び替わるよう、BackInOutを指定しています。EaseYプロパティには垂直方向のイージング機能を指定します。ここではBackInOutを指定しています。Amplitudeプロパティは、アニメーションに関連付けられた収縮の振幅を設定します。デフォルトの1のままにしておきます。

[タグプロパティ]内のInitialTagとTagプロパティはデフォルトの「Element」のままにしています。

InitialTagプロパティには、要素の派生元のように見せるタグを指定します。スタンドアロンでは「Element」を選択し、データバインドされている時は「DataConText」を選択します。

Tagプロパティには、データストアの読み取りと書き込みの対象となるデータの種類を指定します。スタンドアロンでは「Element」、データバインドされている時は「DataContext」を指定します。

WrapPanelにはデータバインドを使用していませんので、InitialTagとTagにはデフォルトの「Element」のままにしています（図15）。

ListBoxに表示されている画像の一覧から、任意の画像を削除するには、「アセット」パネルから「ビヘイビア」を選択し、RemoveElementActionアクションを使用します。ツリーから要素を容易に削除できます。

まず、キーがListBoxTemplate内にレイアウトした要素を「オブジェクトとタイムライン（B）」に表示させます。ListBoxを選択し、マウスの右クリックで表示されるメニューから、「追加テンプレートの編集（D）／生成されたアイテムの編集（ItemTemplate）／現在のテンプレートの編集（U）」と選択します（図16）。

「オブジェクトとタイムライン（B）」内にImageが表示されますので、「アセット」パネルから「ビヘイビア」を選択し、RemoveElementActionをImage上にドラッグ&ドロップします。表示されるプロパティの設定は、デフォルトのままで構いません。「トリガー」のEventNameにMouseLeftButtonDownが自動的に選択されています（図17）。

以上でBlend4の設定は全部完了です。

Blend4のメニューから「プロジェクト（P）／プロジェクトの実行（R）」と選択して実行してみましょう。いかがですか？うまくアニメーションされましたか。

Blend4の操作を終わり、VS2010に戻ります。VS2010上からも実行して動作を確認してください。

書き出されるXAMLコードはリスト6のようになります。

リスト6: 書き出されたXAMLコード（MaiPage.xaml）