読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

リストボックスに生成されたアイテムをロード時にアニメーションさせる。

Silverlight WindowsPhone7 Expression Blend

リストボックの中身を作ったときにアニメーションさせたいんだけど、どうやるの?って聞かれたのでやってみた。
1.まず、ButtonとListBoxを作ります。
2.ListBoxの名前をlistにしました。

3.とりあえずRectangleを作ります。

4.作ったRectangleを右クリックしてUserControl作成をクリックします。(UserControl1.xaml)

5.適当にアニメーション(Storyboard1)をつけます。
ぽんっとおおきくなるようにつけてみました。

6.UserControl1.xamlの中のrectangleにビヘイビアのControlStorybiardActionをドラッグします。

7.ビヘイビアのプロパティにEventNameをLoaded、ControlStoryboardOptionをPlay、StoryboardをStoryboard1にします。

8.Buttonにイベントハンドラをつけて、MainPage.xaml.csにイベントを書きます。

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: ここにイベント ハンドラーのコードを追加します。
            UserControl1 UCListItem = new UserControl1();
            UCListItem.Width = 100;
            UCListItem.Height = 100;
            UCListItem.Margin = new Thickness(10);
            list.Items.Add(UCListItem);
        }

これで、Buttnを押すと、(UserControl1の)Rectangleがアニメーションして表示されるようになりました。

でも、これだといけません。
Buttonを連打してスクロールすると、スクロールするたびにアニメーションしてしまいます。
これは、ListBoxで表示されていないオブジェクトはパフォーマンスをよくするためにロードしないという構造になっているからです。

9.なので、アニメーションを一工夫します。デフォルトサイズを小さくします

10.0秒目のキーフレームを削除します。こうすると、アニメーションが始まる前の状態からアニメーションが実行されるので、見た目アニメが動いていないようにみえます。


11.最後にlistに作った[UserControl1]を削除します。完成!実機だととてもなめらかなので、ぜひデプロイしてください。

アニメーションはエミュじゃちょっと辛いときがありますが、実機だと綺麗に動きました。
プロジェクトファイル:http://eidwinds.com/mitsuba/contents/listanime.zip