日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。WinRTというプログラムのリクエストを受けたので作ってみました。響きだけ見てみると簡単そうなのですが、これが意外に厄介。克服しなければならない課題がいくつかあります。課題は主にListBoxのコレクションの仮想化に起因する問題になります。Loadedイベントでアニメーション(VSMの切替やStoryboardのキック)するとListBoxItem再利用時にアニメーションが実行されないListBoxのItemTemplateをUserControlに切り出してUserControlのDataContextの変更を監視して、アニメーションすると、新規追加じゃないアイテムでListBoxItemの再利用が行われるとアニメーションしてしまうということでやってみよう基本的なアプローチはListBoxのItemTemplateをUserControlに切り出してUserControlのDataContextの変更を監視する方法にします。再利用時に行われるアニメーションへの対応は、悲しいけどViewModelにフラグを持たせる方法で今回は対応しました。ViewModelの定義ViewModelといっても、今回のケースでは単に値の入れ物です。}}ポイントはAnimatedプロパティで、こいつがアニメーションされたかどうかのフラグになります。画面にListBoxを設置します。ListBoxは、ItemTemplateを追加しているだけで、特に目新しいことはしていません。その他のプロパティは単純に今回作った画面のレイアウトの都合で追加されたプロパティです。</ListBox.ItemTemplate></ListBox>ListBoxItemControl(自作UserControlの定義)次に自作のUserControlを定義します。このポイントはNormalとAddedとAnimatedという3つのVisualStateを定義して、それぞれアニメーション前、アニメーション、アニメーション後という状態を定義している点です。</StackPanel></UserControl>Rectangleの色をBlueからRedにアニメーションするようにしています。次に、コードビハインドです。コードビハインドではDataContextの変更を監視して、変更があった時の新しい値のAnimatedプロパティを確認してVisualStateを変更しています。DataContextの変更の監視は、WinRTにDataContextChagnedイベントが見当たらなかったために、MyDataContextという依存プロパティを定義して、それとDataContextをバインドしています。MyDataContextにプロパティ変更のコールバックを登録して、間接的にDataContextの変更を監視しています。これでなんとなく追加されたアイテムをアニメーションさせることができます。なんとなくというのは、UIの仮想化の関係でユーザが激しくスクロールしたりしたときにアイテムの追加がされたら、微妙にアニメーションされないでアニメーション完了状態にいってしまう要素がたまにあるかもしれません・・・。appで同じページで電話とパソコンの見た目を切り替える方法といったらVSMしかないでしょう。強引に#if~#endifで。C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。Blogの内容は個人の見解であり、所属する企業を代表するものではありません。)はてなブログをはじめよう!okazukiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。