ListBox のアイテム追加/削除のときにアニメーションする

(2017/05/16 8:15:17 created.)

(2017/05/24 17:00:48 modified.)

ListBox コントロールに動的にアイテムを追加または削除したとき、ほわっとアニメーションして表示/非表示されると視覚的に楽しいアプリになります。

ItemsControl クラスから派生している ListBox コントロールなどは、与えられたアイテムを羅列するとき、各アイテムを格納したコンテナを表示しています。ここでは、このコンテナにカスタムコントロールを使用するようにし、このカスタムコントロールでアニメーションを実現します。

そういうわけで、カスタムコントロールとして次のような AnimatedContainer コントロールを定義します。

Generic.AnimatedContainer.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                    xmlns:local="clr-namespace:Tips_AnimatedListBoxItem">

    <Style TargetType="{x:Type local:AnimatedContainer}">

```
        <Setter Property="Template">
```
```
            <Setter.Value>
```

                <ControlTemplate TargetType="{x:Type local:AnimatedContainer}">

                    <Border Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}">

```
                        <StackPanel>
```

                            <Button x:Name="PART_DeleteButton" />

                            <ContentPresenter />

```
                        </StackPanel>
```
```
                    </Border>
```
```
                </ControlTemplate>
```
```
            </Setter.Value>
```
```
        </Setter>
```
```
    </Style>
```
```
</ResourceDictionary>
```

Generic.AnimatedContainer.xaml.cs

```
namespace Tips_AnimatedListBoxItem
```
```
{
```
```
    using System;
```
```
    using System.Windows;
```
```
    using System.Windows.Controls;
```
```
    using System.Windows.Input;
```

    using System.Windows.Media.Animation;

```
 
```
```
    /// <summary>
```

    /// アニメーションを含むコンテナを表します。

```
    /// </summary>
```

    [TemplatePart(Name = PART_DeleteButton, Type = typeof(Button))]

    public class AnimatedContainer : ContentControl

```
    {
```
```
        #region TemplatePart
```
```
        /// <summary>
```

        /// 削除ボタンに対する名前

```
        /// </summary>
```

        private const string PART_DeleteButton = "PART_DeleteButton";

```
 
```
```
        private Button _deleteButton;
```
```
        /// <summary>
```

        /// 削除ボタンを取得または設定します。

```
        /// </summary>
```
```
        private Button DeleteButton
```
```
        {
```

            get { return this._deleteButton; }

```
            set
```
```
            {
```

                if (this._deleteButton != null)

```
                {
```

                    this._deleteButton.Click -= OnDeleteButtonClick;

```
                }
```

                this._deleteButton = value;

                if (this._deleteButton != null)

```
                {
```

                    this._deleteButton.Click += OnDeleteButtonClick;

```
                }
```
```
            }
```
```
        }
```
```
 
```
```
        /// <summary>
```

        /// テンプレートを適用します。

```
        /// </summary>
```

        public override void OnApplyTemplate()

```
        {
```
```
            base.OnApplyTemplate();
```
```
 
```

            this.DeleteButton = this.Template.FindName(PART_DeleteButton, this) as Button;

```
        }
```
```
        #endregion TemplatePart
```
```
 
```
```
        #region コンストラクタ
```
```
        /// <summary>
```

        /// 静的なコンストラクタを表します。

```
        /// </summary>
```
```
        static AnimatedContainer()
```
```
        {
```

            DefaultStyleKeyProperty.OverrideMetadata(typeof(AnimatedContainer), new FrameworkPropertyMetadata(typeof(AnimatedContainer)));

```
        }
```
```
 
```
```
        /// <summary>
```

        /// 新しいインスタンスを生成します。

```
        /// </summary>
```
```
        public AnimatedContainer()
```
```
        {
```
```
            this.Opacity = 0;
```
```
 
```

            #region InAnimation 初期化

```
 
```

            this._heightInAnimation = new DoubleAnimation()

```
            {
```
```
                From = 0,
```

                Duration = TimeSpan.FromMilliseconds(200),

```
            };
```

            Storyboard.SetTargetProperty(this._heightInAnimation, new PropertyPath("Height"));

```
 
```

            this._widthInAnimation = new DoubleAnimation()

```
            {
```
```
                From = 0,
```

                Duration = TimeSpan.FromMilliseconds(200),

```
            };
```

            Storyboard.SetTargetProperty(this._widthInAnimation, new PropertyPath("Width"));

```
 
```

            this._opacityInAnimation = new DoubleAnimation()

```
            {
```
```
                From = 0,
```
```
                To = 1,
```

                BeginTime = TimeSpan.FromMilliseconds(240),

                Duration = TimeSpan.FromMilliseconds(200),

```
            };
```

            Storyboard.SetTargetProperty(this._opacityInAnimation, new PropertyPath("Opacity"));

```
 
```

            this._inStoryboard = new Storyboard();

            this._inStoryboard.Completed += (_, __) => this._isAnimated = false;

```
 
```

            #endregion InAnimation 初期化

```
 
```

            #region OutAnimation 初期化

```
 
```

            this._heightOutAnimation = new DoubleAnimation()

```
            {
```
```
                To = 0,
```

                BeginTime = TimeSpan.FromMilliseconds(240),

                Duration = TimeSpan.FromMilliseconds(200),

```
            };
```

            Storyboard.SetTargetProperty(this._heightOutAnimation, new PropertyPath("Height"));

```
 
```

            this._widthOutAnimation = new DoubleAnimation()

```
            {
```
```
                To = 0,
```

                BeginTime = TimeSpan.FromMilliseconds(240),

                Duration = TimeSpan.FromMilliseconds(200),

```
            };
```

            Storyboard.SetTargetProperty(this._widthOutAnimation, new PropertyPath("Width"));

```
 
```

            this._opacityOutAnimation = new DoubleAnimation()

```
            {
```
```
                From = 1,
```
```
                To = 0,
```

                Duration = TimeSpan.FromMilliseconds(200),

```
            };
```

            Storyboard.SetTargetProperty(this._opacityOutAnimation, new PropertyPath("Opacity"));

```
 
```

            this._outStoryboard = new Storyboard();

            this._outStoryboard.Completed += (_, __) =>

```
            {
```

                this._isAnimated = false;

                if (this.DeletedCommand != null)

```
                {
```

                    if (DeletedCommand.CanExecute(this.DataContext))

```
                    {
```

                        DeletedCommand.Execute(this.DataContext);

```
                    }
```
```
                }
```
```
            };
```
```
 
```

            #endregion OutAnimation 初期化

```
 
```

            this.SizeChanged += OnSizeChanged;

```
        }
```

        #endregion コンストラクタ

```
 
```

        #region DeletedCommand 依存関係プロパティ

```
 
```
```
        /// <summary>
```

        /// DeletedCommand 依存関係プロパティを定義します。

```
        /// </summary>
```

        public static DependencyProperty DeletedCommandProperty = DependencyProperty.Register("DeletedCommand", typeof(ICommand), typeof(AnimatedContainer), new PropertyMetadata(null));

```
 
```
```
        /// <summary>
```

        /// 削除ボタンクリック後に実行されるコマンドを取得または設定します。

```
        /// </summary>
```
```
        public ICommand DeletedCommand
```
```
        {
```

            get { return (ICommand)GetValue(DeletedCommandProperty); }

            set { SetValue(DeletedCommandProperty, value); }

```
        }
```
```
 
```

        #endregion DeletedCommand 依存関係プロパティ

```
 
```

        #region Direction 依存関係プロパティ

        public static readonly DependencyProperty DirectionProperty = DependencyProperty.Register("Direction", typeof(SizeToContent), typeof(AnimatedContainer), new PropertyMetadata(SizeToContent.Height));

```
 
```
```
        public SizeToContent Direction
```
```
        {
```

            get { return (SizeToContent)GetValue(DirectionProperty); }

            set { SetValue(DirectionProperty, value); }

```
        }
```

        #endregion Direction 依存関係プロパティ

```
 
```

        #region イベントハンドラ

```
 
```
```
        /// <summary>
```

        /// 削除ボタンクリックイベントハンドラ

```
        /// </summary>
```

        /// <param name="sender">イベント発行元</param>

        /// <param name="e">イベント引数</param>

        private void OnDeleteButtonClick(object sender, RoutedEventArgs e)

```
        {
```
```
            BeginOutAnimation();
```
```
        }
```
```
 
```
```
        /// <summary>
```

        /// SizeChanged イベントハンドラ

```
        /// </summary>
```

        /// <param name="sender">イベント発行元</param>

        /// <param name="e">イベント引数</param>

        private void OnSizeChanged(object sender, SizeChangedEventArgs e)

```
        {
```
```
            if (this._isAnimated)
```
```
                return;
```
```
 
```

            this._heightInAnimation.To = e.NewSize.Height;

            this._widthInAnimation.To = e.NewSize.Width;

```
            BeginInAnimation();
```
```
        }
```
```
 
```

        #endregion イベントハンドラ

```
 
```
```
        #region アニメーション
```
```
        /// <summary>
```

        /// 表示開始アニメーションを開始します。

```
        /// </summary>
```
```
        private void BeginInAnimation()
```
```
        {
```

            this._inStoryboard.Children.Clear();

```
            switch (this.Direction)
```
```
            {
```

                case SizeToContent.Height:

                    this._inStoryboard.Children.Add(this._heightInAnimation);

```
                    break;
```
```
 
```

                case SizeToContent.Manual:

```
                    break;
```
```
 
```

                case SizeToContent.Width:

                    this._inStoryboard.Children.Add(this._widthInAnimation);

```
                    break;
```
```
 
```

                case SizeToContent.WidthAndHeight:

                    this._inStoryboard.Children.Add(this._heightInAnimation);

                    this._inStoryboard.Children.Add(this._widthInAnimation);

```
                    break;
```
```
            }
```

            this._inStoryboard.Children.Add(this._opacityInAnimation);

```
 
```
```
            this._isAnimated = true;
```

            this.BeginStoryboard(this._inStoryboard);

```
        }
```
```
 
```
```
        /// <summary>
```

        /// 非表示アニメーションを開始します。

```
        /// </summary>
```

        private void BeginOutAnimation()

```
        {
```

            this._outStoryboard.Children.Clear();

```
            switch (this.Direction)
```
```
            {
```

                case SizeToContent.Height:

                    this._outStoryboard.Children.Add(this._heightOutAnimation);

```
                    break;
```
```
 
```

                case SizeToContent.Manual:

```
                    break;
```
```
 
```

                case SizeToContent.Width:

                    this._outStoryboard.Children.Add(this._widthOutAnimation);

```
                    break;
```
```
 
```

                case SizeToContent.WidthAndHeight:

                    this._outStoryboard.Children.Add(this._heightOutAnimation);

                    this._outStoryboard.Children.Add(this._widthOutAnimation);

```
                    break;
```
```
            }
```

            this._outStoryboard.Children.Add(this._opacityOutAnimation);

```
 
```
```
            this._isAnimated = true;
```

            this.BeginStoryboard(this._outStoryboard);

```
        }
```

        #endregion アニメーション

```
 
```
```
        #region private フィールド
```
```
 
```
```
        /// <summary>
```

        /// アニメーション中かどうかを判別します。

```
        /// </summary>
```
```
        private bool _isAnimated;
```
```
 
```
```
        /// <summary>
```

        /// 表示されるときのアニメーション用ストーリーボード

```
        /// </summary>
```

        private Storyboard _inStoryboard;

```
 
```
```
        /// <summary>
```

        /// 表示されるときの高さアニメーション

```
        /// </summary>
```

        private DoubleAnimation _heightInAnimation;

```
 
```
```
        /// <summary>
```

        /// 表示されるときの幅アニメーション

```
        /// </summary>
```

        private DoubleAnimation _widthInAnimation;

```
 
```
```
        /// <summary>
```

        /// 表示されるときの透明度アニメーション

```
        /// </summary>
```

        private DoubleAnimation _opacityInAnimation;

```
 
```
```
        /// <summary>
```

        /// 非表示になるときのアニメーション用ストーリーボード

```
        /// </summary>
```

        private Storyboard _outStoryboard;

```
 
```
```
        /// <summary>
```

        /// 非表示になるときの高さアニメーション

```
        /// </summary>
```

        private DoubleAnimation _heightOutAnimation;

```
 
```
```
        /// <summary>
```

        /// 非表示になるときの幅アニメーション

```
        /// </summary>
```

        private DoubleAnimation _widthOutAnimation;

```
 
```
```
        /// <summary>
```

        /// 非表示になるときの透明度アニメーション

```
        /// </summary>
```

        private DoubleAnimation _opacityOutAnimation;

```
 
```

        #endregion private フィールド

```
    }
```
```
}
```

外観を定義している XAML はカスタムコントロール作成時に自動生成されたコードからほとんど触っておらず、Border コントロールの中に Button コントロールと ContentPresenter コントロールを含む StackPanel コントロールを追加しただけとなっています。追加したコントロールについて特に何も設定していませんが、この AnimatedContainer コントロールを使うときは、ユーザー側が ControlTemplate を与えることで自分のアプリケーションに合ったレイアウトにしてもらうため、ここでは特に外観を定義することはありません。

コードビハインドのほうでは、用意されたボタンに対するクリックイベントを購読するようにしています。

やりたいことは、ListBox コントロールにアイテムが追加/削除されるときにアニメーションしたいということでした。まずアイテムが追加されるシーンを考えてみましょう。アイテムが追加されるということは、ListBox コントロールの中でコンテナが追加生成されるということになります。したがって、AnimatedContainer コントロールが生成されたときにアニメーションするようにすればアイテム追加時にアニメーションされるようになるでしょう。

コントロールが生成されるとき、Loaded イベントが発生し、コントロールのサイズが確定すると SizeChanged イベントが発生します。ここでは、コントロールのサイズを使用したアニメーションを使用するため、SizeChanged イベントを購読します。

コンストラクタの中でイベントを購読し、SizeChanged イベントのイベントハンドラでアニメーションを開始しています。ただし、private フィールドを使ってアニメーション中に再度実行されないようにしています。

次に、ListBox コントロールからアイテムを削除するときのアニメーションです。削除するときにアニメーションする場合、アイテムが削除されてしまうとそのコンテナが消えてしまうためアニメーションできません。つまり、アニメーションしてからアイテムを削除する、というように順序を逆にする必要があります。

ここでは、冒頭で用意したボタンの Click イベントハンドラで削除用のアニメーションを開始させます。

削除用のアニメーションが終了したら ListBox コントロールから実際にアイテムを削除する処理を実行しなければいけません。ここでは、その処理をこのコントロールに委譲できるように DeletedCommand 依存関係プロパティを追加し、これをアニメーション終了時に実行するようにします。また、アニメーション終了時に実行させるには、Storyboard クラスの Completed イベントを利用します。

このカスタムコントロールを使用したサンプルアプリケーションのコードを以下に掲載します。

MainViewModel.cs

namespace Tips_AnimatedListBoxItem.ViewModels

```
{
```
```
    using System;
```

    using System.Collections.ObjectModel;

```
    using System.ComponentModel;
```

    using System.Runtime.CompilerServices;

```
 
```

    internal class MainViewModel : INotifyPropertyChanged

```
    {
```

        private ObservableCollection<string> _stringCollection = new ObservableCollection<string>();

```
        /// <summary>
```

        /// コレクションデータを取得します。

```
        /// </summary>
```

        public ObservableCollection<string> StringCollection

```
        {
```

            get { return this._stringCollection; }

```
        }
```
```
 
```
```
        /// <summary>
```

        /// コレクションデータ数を取得します。

```
        /// </summary>
```
```
        public int Count
```
```
        {
```

            get { return this.StringCollection.Count; }

```
        }
```
```
 
```

        private DelegateCommand _addCommand;

```
        /// <summary>
```

        /// コレクション追加コマンドを取得します。

```
        /// </summary>
```

        public DelegateCommand AddCommand

```
        {
```
```
            get
```
```
            {
```

                return this._addCommand ?? (this._addCommand = new DelegateCommand(_ =>

```
                {
```
```
                    this._counter++;
```

                    Add(string.Format("私がアイテム No.{0} だ。", this._counter));

```
                }));
```
```
            }
```
```
        }
```
```
 
```

        private DelegateCommand _deleteCommand;

```
        /// <summary>
```

        /// コレクション削除コマンドを取得します。

```
        /// </summary>
```

        public DelegateCommand DeleteCommand

```
        {
```
```
            get
```
```
            {
```

                return this._deleteCommand ?? (this._deleteCommand = new DelegateCommand(p =>

```
                {
```

                    Delete(p as string);

```
                }));
```
```
            }
```
```
        }
```
```
 
```
```
        /// <summary>
```
```
        /// カウンタ
```
```
        /// </summary>
```
```
        private int _counter;
```
```
 
```
```
        /// <summary>
```
```
        /// 乱数発生器
```
```
        /// </summary>
```

        private Random _random = new Random();

```
 
```
```
        /// <summary>
```

        /// コレクションにアイテムを追加します。

```
        /// </summary>
```

        /// <param name="item">追加するアイテムを指定します。</param>

```
        private void Add(string item)
```
```
        {
```

            this.StringCollection.Insert(this._random.Next(0, this.StringCollection.Count), item);

            RaisePropertyChanged("Count");

```
        }
```
```
 
```
```
        /// <summary>
```

        /// コレクションからアイテムを削除します。

```
        /// </summary>
```
```
        /// <param name="item"></param>
```

        private void Delete(string item)

```
        {
```

            this.StringCollection.Remove(item);

            RaisePropertyChanged("Count");

```
        }
```
```
 
```

        #region INotifyPropertyChanged のメンバ

```
        /// <summary>
```

        /// プロパティ値変更時に発生します。

```
        /// </summary>
```

        public event PropertyChangedEventHandler PropertyChanged;

```
 
```
```
        /// <summary>
```

        /// PropertyChanged イベントを発行します。

```
        /// </summary>
```

        /// <param name="propertyName">プロパティ値が変更されたプロパティ名を指定します。</param>

        private void RaisePropertyChanged([CallerMemberName]string propertyName = null)

```
        {
```

            var h = this.PropertyChanged;

            if (h != null) h(this, new PropertyChangedEventArgs(propertyName));

```
        }
```

        #endregion INotifyPropertyChanged のメンバ

```
    }
```
```
}
```

MainView.xaml

<Window x:Class="Tips_AnimatedListBoxItem.Views.MainView"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="clr-namespace:Tips_AnimatedListBoxItem"

        Title="MainView" Height="300" Width="300">

```
    <Grid>
```
```
        <Grid.RowDefinitions>
```

            <RowDefinition Height="Auto" />

```
            <RowDefinition />
```
```
        </Grid.RowDefinitions>
```
```
 
```
```
        <StackPanel>
```

            <Button Content="Add" Command="{Binding AddCommand}" />

            <TextBlock Text="{Binding Count, StringFormat='{}アイテムが {0} 個登録されています。'}" />

```
        </StackPanel>
```
```
 
```

        <ListBox Grid.Row="1" ItemsSource="{Binding StringCollection}">

            <ListBox.ItemContainerStyle>

                <Style TargetType="{x:Type ListBoxItem}">

                    <Setter Property="Template">

```
                        <Setter.Value>
```

                            <ControlTemplate TargetType="{x:Type ContentControl}">

                                <Border Background="{TemplateBinding Background}">

                                    <local:AnimatedContainer DeletedCommand="{Binding DataContext.DeleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"

                                                             Direction="Height">

                                        <local:AnimatedContainer.Template>

                                            <ControlTemplate TargetType="{x:Type local:AnimatedContainer}">

                                                <StackPanel Orientation="Horizontal">

                                                    <Button x:Name="PART_DeleteButton"

                                                            Content="Delete" Margin="2"

/>

                                                    <TextBlock Text="{Binding .}" VerticalAlignment="Center" />

                                                </StackPanel>

                                            </ControlTemplate>

                                        </local:AnimatedContainer.Template>

                    </local:AnimatedContainer>

                                </Border>

                            </ControlTemplate>

```
                        </Setter.Value>
```
```
                    </Setter>
```
```
                    <Style.Triggers>
```

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Background" Value="LightGray" />

```
                        </Trigger>
```

                        <Trigger Property="IsSelected" Value="True">

                            <Setter Property="Background" Value="Plum" />

```
                        </Trigger>
```
```
                    </Style.Triggers>
```
```
                </Style>
```

            </ListBox.ItemContainerStyle>

```
        </ListBox>
```
```
    </Grid>
```
```
</Window>
```

Add ボタンを押すと ListBox コントロールにアイテムがランダムの順序で追加され、アイテム中の Delete ボタンを押すと該当するアイテムが削除されます。アイテム追加/削除されるときにはアニメーションが実行されるようになっています。