ホーム > Expression Blend > Expression Blend Tips

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

Expression Blend Tips
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年5月18日 from Atelier:Mitsuba

はじめに

リストボックスの中身を作ったときにアニメーションさせたいんだけど、どうやるの?って聞かれたのでやってみた。

ButtonとListBoxを作る

  1. まず、ButtonとListBoxを作ります。
  2. ListBoxの名前をlistにしました。
    20110402140823

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

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

アニメーションをつける

  1. 適当にアニメーション(Storyboard1)をつけます。

    ぽんっとおおきくなるようにつけてみました。
    20110402141001
    20110402140956

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

  3. ビヘイビアのプロパティにEventNameをLoaded、ControlStoryboardOptionをPlay、StoryboardをStoryboard1にします。
  4. 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);
            }
  5. これで、Buttonを押すと、(UserControl1の)Rectangleがアニメーションして表示されるようになりました。
    20110402141147

アニメーションを工夫する

でも、これだといけません。

Buttonを連打してスクロールすると、スクロールするたびにアニメーションしてしまいます。

これは、ListBoxで表示されていないオブジェクトはパフォーマンスをよくするためにロードしないという構造になっているからです。

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

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

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

さいごに

アニメーションはエミュじゃちょっと辛いときがありますが、実機だと綺麗に動きました。

プロジェクトファイル:https://eidwinds.com/mitsuba/contents/listanime.zip

次の記事

『Expression Blend Tips』最新記事

コメント

▲このページのトップへ