Improving binding performance in WPF?

Question

Hello All,

I realize this question could be boiled down to "Why is my code so slow?" but I'm hoping to get more out of that. Let me explain my code.

I have a class that implements INotifyPropertyChanged in order to do binding, and that class looks similar to this:

  public class Employee : INotifyPropertyChanged 
    { 
        string m_strName = "";
        string m_strPicturePath = "";
        public event PropertyChangedEventHandler PropertyChanged;

        public string Picture
        {
            get { return this.m_strPicturePath; }
            set { this.m_strPicturePath = value; 
            NotifyPropertyChanged("Picture"); }
        }

        public string Name
        {
            get { return this.m_strName; }
            set { this.m_strName = value;
            NotifyPropertyChanged("Name");
            }
        }

        private void NotifyPropertyChanged(String pPropName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(pPropName));
            }
        }
    }

In my XAML I've created a DataTemplate that binds to this object:

 <DataTemplate x:Key="EmployeeTemplate">
        <Border Height="45" CornerRadius="0" BorderBrush="Gray" BorderThickness="0" Background="Transparent" x:Name="bordItem">
            <Grid Width="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Path=Name}" VerticalAlignment="Center" Padding="10" HorizontalAlignment="Stretch" FontWeight="Bold" FontSize="20"/>
                <Image Grid.Column="1" Source="{Binding Path=Picture}"></Image>
            </Grid>
        </Border>
    </DataTemplate>

and then put this template on a ListBox:

<ListBox x:Name="lstEmployees" ItemTemplate="{DynamicResource EmployeeTemplate}" VirtualizingStackPanel.VirtualizationMode="Recycling" VirtualizingStackPanel.IsVirtualizing="True"></ListBox>

So in code it's set as:

lstEmployees.ItemsSource = this.m_Employees;

the "m_Employees" list gets hydrated at app startup from a database, and then after that happens I set the above line of code. The ListBox is on a TabControl.

Now, my actual problem: My "m_Employees" list is returning about 500+ employees from the database, so the collection is slightly big. I get a performance hit in WPF only when the application first starts up and someone navigates to that tab with the ListBox on it. The UI freezes for about 3 seconds, but only when the app first starts up - afterwards it's fine.

Could this be because:

• The code has to hit the hard drive to go find the image of each employee?
• I am doing Virtualizing incorrectly?
• EDIT
• WPF is doing the rendering using my DataTemplate once, only when someone navigates to that TabControl, and is suddenly trying to draw 500+ employee items? If so, is there any way to "preload" the ListView in WPF?

Any other suggestions for improving the above would be apprecated. Thanks for reading and for any advice ahead of time.

-R.

Answer 1

The perf of your query is definitely suspect. If you want it to perform better, you can do any number of lazy initialization techniques to get it to run faster.

The easiest option would be to start with an empty enumeration, and only populate it at a later time.

The obvious way to do this would be to add a "Query" or "Refresh" button, and only freeze up the app when the user clicks it.

Another simple option is to queue a background task/thread to do the refresh.

If you are more concerned about consistent perf/super-responsive UI, then you should try to do more granular queries.

I am not sure if WPF handles virtualization of the items (only pulls from the enumeration when each item comes into view), but if it does, you could do paging/yield returns to feed ItemsSource.

If WPF just grabs the whole enumeration at once, you could still do smaller lazy-eval/paging, if you can determine which items are in view. Just populate the object with "zombie" items, and when they come into view, perform the query, and update the properties on the individual item.

Answer 2

1. Wrap m_Employees with a public property (Employees)
2. Instead of setting your ItemsSource in the code like you do, set it with Binding and set IsAsync to True.

ItemsSource="{Binding Empolyess, IsAsync=True}"

You can also assign the Binding in the code.

Hope this helps.