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