[Silverlight]フィルター

ListView, DataGrid, ListBoxなどに対し、絞り込みを行いたい場合は、CollectionViewSource を使おう。WPF と若干使い方が違うっぽい。


TextBox に入力したもので ListBox のアイテムを絞り込んでみる。

まずは XAML。

   <TextBox Text="{Binding Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

<ListBox ItemsSource="{Binding ViewSource.View}" />

続いて ViewModel 側。

        public CollectionViewSource ViewSource { get; set; }

        public ObservableCollection<Entity> LeftItems { get; set; }

        private string filter = "";

        public string Filter

        {

            get { return filter; }

            set

            {

                filter = value;

                if (this.ViewSource != null)

                {

                    this.ViewSource.View.Refresh();

                }

            }

        }

        public ViewModel()

        {

            this.LeftItems = new ObservableCollection<Entity>(list);

            this.ViewSource = new CollectionViewSource();

            this.ViewSource.Source = this.LeftItems;

            this.ViewSource.Filter += new FilterEventHandler(view_Filter);

        }

        void view_Filter(object sender, FilterEventArgs e)

        {

            var entity = e.Item as Entity;

            if (entity != null)

            {

                e.Accepted = entity.Data.Contains(this.filter);

            }

        }

ListBox の ItemsPanel に以下のビヘイビアを設定していると、フィルタ時にどや顔が出来る。

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

<ItemsPanelTemplate x:Key="ItemsPanelTemplate">

<StackPanel>

<i:Interaction.Behaviors>

<ei:FluidMoveBehavior AppliesTo="Children" Tag="DataContext">

<ei:FluidMoveBehavior.EaseY>

<CircleEase EasingMode="EaseOut"/>

</ei:FluidMoveBehavior.EaseY>

<ei:FluidMoveBehavior.EaseX>

<CircleEase EasingMode="EaseOut"/>

</ei:FluidMoveBehavior.EaseX>

</ei:FluidMoveBehavior>

</i:Interaction.Behaviors>

</StackPanel>

</ItemsPanelTemplate>