Tag Archives: icollectionview

Very simple MVVM demo application

The last couple of days, I’ve been busy writing an article about MVVM in French. I don’t know yet if I’ll translate it to English, but I’m sure I can share the demo application, and this is the goal of this post !

I think the best way to understand how things fit together is to explore the source code of the application.

It’s a very small demo because I wanted to demonstrate only a subset of MVVM facilities, so you’ll find:

  • an easy way to work with commands in MVVM using Josh Smith RelayCommand class
  • the power of the ICollectionView interface to implement navigation and search feature
  • empty code-behind file for my views
  • a base class for all my ViewModel objects (again, based on the work of Josh)

mvvm-demo-1

mvvm-demo-2

You can download the source code here. Enjoy :-)

Filtering with or without ICollectionView ?

In my “Why should I use MVVM pattern” post, I gave a link to a post explaining the ICollectionView interface.

This interface is very important in the MVVM methodology because it enables the possibility to track the selection of the user in ItemsControl based-controls (ListView, ListBox, ComboBox, TabControl…). The ICollectionView also enables the ViewModel to perfom Sorting, Grouping and Filtering very easily (basically by using the Sort, Group and Filter properties).

In my project at work, I have a “Library” which lets the user choose an item in it, and drop it somewhere else in the application. There is around 200 items in the ListView, and because I wanted to leverage the ICollectionView interface, I used the Filter property to enable search functionality.Unfortunately, the performance was pretty poor and until now I didn’t find out what goes wrong. Each item in the ListView is rendered using a simple DataTemplate made of one Image and several TextBlock. Because the filtering was slow, I found another solution which is much faster. And thanks to the MVVM methodology, I found one quickly !

I added a IsVisible property to the ViewModel objects that are in the ListView.

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
        /// <summary>
        /// Gets or sets a value indicating whether this item is visible in the collection
        /// </summary>
        public bool IsVisible
        {
            get { return this.isVisible; }
            set
            {
                this.isVisible = value;
                this.OnPropertyChanged("IsVisible");
            }
        }

This IsVisible property is toggled when the search is performed: I iterate over the ObservableCollection of items, and change the IsVisible property regarding whether the item match the search text or not. In the View, I setup a simple style for my ListViewItem that databound the IsVisible property to the visibility property (using the BooleanToVisiblity converter included in the framework).

1
2
3
4
5
6
7
<ListView ItemsSource="{Binding Items}">
    <ListView.ItemContainerStyle>
        <Style>
            <Setter Property="Visibility" Value="{Binding Path=IsVisible, Converter={StaticResource BooleanToVisibility}"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Now the filtering is much faster. I don’t know what could slow down the performance of the filtering using the ICollectionView interface.

If you have any idea, I’d be glad to know. If on the other hand you’re dealing with performance issue too, you might try my solution :)