WPF Rendering performance

Question

I have a WPF User control that binds to a DataTable and generates CheckBox and a masked EditBox for each row in a DataTable. I have several instances of this control on my form. The total number of CheckBoxes to be generated is over 200. I am seeing some rendering performance issues. The form loads with all of the static controls ( Text Boxes, Drop Downs) instantly, then several seconds later the CheckBoxes appear.

Any thoughts?

Thanks

Answer 1

Unless all the 200 items are visible on the screen, you should be using some kind of virtual layout that creates the visual tree only for the visible items. This will greatly improve your performance.

Answer 2

What is "generating" the checkboxes? You should be using an ItemsControl (or subclass) and binding the data that represents the checkboxes to it. Assuming you're doing that, then what you want to do is get that ItemsControl to use "virtualizing" by applying the VirtualizingStackPanel.IsVirtualizing property to the ItemsControl like so:

<ItemsControl VirtualizingStackPanel.IsVirtualizing="true" ... >

You might also want to turn on "container recycling" which will also help performance. This is also done with an attached property:

<ItemsControl VirtualizingStackPanel.VirtualizationMode="Recycling" ... >

Answer 3

Too many checkboxes surely cost a lot, if you look at templates of basic controls, they are also filled with lot of uielements.

I would suggest if you can divide your UI into Tabs or Accordins that will cause less visible items on one screen as well as it will help user navigate to items easily and faster as well.

VirtualizingStackPanel will help but if your binding isnt correct it may lead to unpredicted results.

1. Custom Control Template: You can also create your own custom checkbox template with least UIElements, like simple rectangle filled with different color on IsChecked property trigger. This will eliminate few animations etc that can surely imporve your rendering performance. I believe CheckBox is least important when it comes to animating UI.

2. When you are sure that you will be using "Text" as content, then simply create template with rectangle to show filled/empty value and put TextBlock with template binding to Content.

3. Try to give fixed width/height to your checkbox, whenever you fix the height/width of your controls/containers, it becomes eaiser for layout manager to render them, rather then keep on calculating and adjusting items.