Rendering issues with items in ItemsControl

Question

I'll keep it concise. I have a ListBox that implements an ItemTemplate. The DataTemplate contains a checkbox. I load about 2000 items. I check the first 5 items, scroll to the bottom and select the last 5 items. I then scroll up to the top item and noticed that my first 5 check items have been modified.

    <Window 
        x:Class="CheckItems.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CheckItems"
        Title="Window1" Height="300" Width="300"
        >
        <DockPanel>
            <StackPanel DockPanel.Dock="Bottom" >
                <Button Content="Test" Click="Button_Click"/>
            </StackPanel>
            <ListBox DockPanel.Dock="Left"
                x:Name="users"
                ItemsSource="{Binding Path=Users}"
                >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <CheckBox>
                            <TextBlock Text="{Binding Path=Name}"/>
                        </CheckBox>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DockPanel>
    </Window>



    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Windows;
    namespace CheckItems
    {
        public partial class Window1 : Window
        {
            ViewModel controller;

            public Window1()
            {
                DataContext = controller = new ViewModel();
                InitializeComponent();
                controller.Users = LoadData();
            }

            private List<User> LoadData()
            {
                var newList = new List<User>();
                for (var i = 0; i < 2000; ++i)
                    newList.Add(new User { Name = "Name" + i, Age = 100 + i });
                return newList;
            }

            private void Button_Click(object sender, RoutedEventArgs e)
            { }
        }

        public class User
        {
            public string Name { get; set; }
            public int Age { get; set; }
        }


        public class ViewModel : INotifyPropertyChanged
        {
            private List<User> users;
            public event PropertyChangedEventHandler PropertyChanged;

            public List<User> Users
            {
                get { return users; }
                set { users = value; NotifyChange("Users"); }
            }

            protected void NotifyChange(string propertyName)
            {
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Hopefully there is a good explanation for this besides - it's a MS bug. This occurs in .NET 3.5 and 4.0. When VirtualingStackPanel.IsVirtualizing is set to false, this behavior does not occur, but in a real world situo, loading without virtualization is painful.

Some insight would be nice.

Thanks in advance,

Andres Olivares

score 2 · Answer 1 · answered Jan 05 '12 at 14:21

2

A panel that is Virtualizing re-uses the Controls in it and simply replaces the DataContext behind the controls when scrolling. This means that when you scroll, the state of the control (such as IsChecked) gets reset unless that state is bound to something in the DataContext.

For example, if only 10 items of your 2000 are visible at a time, then WPF will only render about 14 of them (extra items for scroll buffer), and simply re-use those 14 items when you scroll and replace the DataContext behind the controls.

If you disable virtualization, you are disabling this recycling behavior. This means that WPF will render 2000 items instead of 14, which is why the performance is so bad. It also means that CheckBoxes will stay checked because their state is not reset.

To fix this problem, I'd recommend adding an IsSelected property to your User object and binding the CheckBox.IsChecked to it.

answered Jan 05 '12 at 14:21

Rachel

130,264
66
304
490

Thank you for the explanation Rachel. As far as your suggestion, I really do not like that it is an accepted pattern to put a property on the model that describes behavior on the UI. I understand that this suggesstion is extremely popular but I do not think this is a reasonable solution. Based on the explanation you provided, I would much rather prefer a solution where lost of DataContext during scrolling is not lost or restored. I will post more about this effort, which should explain my dilema a bit more, but thank you so much for your attention. – Andres Olivares Jan 05 '12 at 19:42
@AndresOlivares You could create a class that contains properties for `IsSelected` and the `User` object, then create a List of those objects instead of using a `List` in your ViewModel. Another alternative I've used in the past is binding the `IsChecked` to the `ListBoxItem.IsSelected` property, allowing the ListBox to select multiple items, and hiding the selection features of the ListBox. This would only work if you're not using the Selection feature for anything else though. – Rachel Jan 05 '12 at 20:04

Rendering issues with items in ItemsControl

1 Answers1