? MIX09 Day 2 Keynote | Main | PDC 2009 Keynote Roundup: Day 1 ?
April 26, 2009
Keeping the WPF Tab Control from destroying its children
Someone posted to the wpf-disciples group the other day asking if there’s a way to keep the TabControl from continually throwing away the “selected” visual every time the selection changes. The primary use case for this is if you have content whose visuals are very complex or heavyweight – the churn of visuals can become very nonperformant.
One solution I offered was one we did on Messenger where we used a combination of a TabControl and ListBox to achieve the desired behavior.
- TabControl retemplated to remove the ContentPresenter where it normally shows the selected content
- ListBox with a Grid as the ItemsPanel
- both controls bound to the same data source with IsSynchronizedWithCurrentItem=”True”
This solution works well, but it’s kind of klunky. So I dug through Reflector at the TabControl and found that it wouldn’t seem to take much to make a TabControl subclass which did what we needed. So I pressed on. ;)
The upshot to the solution is the following:
- subclass TabControl.
- override OnApplyTemplate and find the template part which is the Panel (named “PART_ItemsHolder”, normally a Grid) that will house all the potential selected content items.
- as the selection changes (or items are added), create a ContentPresenter to house the selected content. Add it to the PART_ItemsHolder.
- as items in the control change (OnItemsChanged), remove any ContentPresenters from PART_ItemsHolder that correspond to removed tab items.
- when an item is selected, the content is made Visible; when deselected, it’s Collapsed.
This solution seems to work pretty well, and it allows us to keep the ability to databind the ItemsSource or add TabItems directly. It also is non-greedy in that it doesn’t create child ContentPresenters unless an item actually becomes selected.
You can find a sample project here. When you run it, there are 3 panes: the left pane is the “old” solution with the TabControl+ListBox; the middle pane is the “new” solution with databound items; and the right pane is the “new” solution with TabItems added directly.
Comments appreciated!
Posted by eburke at April 26, 2009 10:09 PM
Comments
Hi Eric,
Thanks allot for your sample project. Saved my bacon.
I am having a problem: the initial Tab Page never loads its content. I am adding view models in the app.cs OnStartup().
Is this because of your implementation?
Thanks again.
Eli
Looks good but what you do mean by the tab control throws away the “selected item” when tabing away? I have a listbox in tab1 and another in tab2 selecting an item in tab1 and tabing away then coming back still retains the original selected item?
Posted by: sp on May 9, 2009 9:06 AM EDTThanks