实现TabControl标签页缓存

The problem

Usually WPF developers use the TabControl in two ways:

1. Hard code TabItems in the XAML with a specific UI controls as the content. Each TabItem can have its own different content:

1
2
3
4
5
6
7
8
9
10
<TabControl>
  <TabControl.Items>
    <TabItem Header="Tab 1">
      <TextBlock Text="Tab Item Content 1"/>
    </TabItem>
    <TabItem Header="Tab 2">
      <TextBlock Text="Tab Item Content 2"/>
    </TabItem>
  </TabControl.Items>
</TabControl>

1. Instead of hard code the UI content, bind or set ItemsSource to a collection and let the control generate content based on ContentTemplate/ContentTemplateSelector

1
2
3
4
5
6
7
8
9
10
11
12
<TabControl ItemsSource="{Binding DataSource}">
  <TabControl.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Header}"/>
    </DataTemplate>
  </TabControl.ItemTemplate>
  <TabControl.ContentTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Content}"/>
    </DataTemplate>
  </TabControl.ContentTemplate>  
</TabControl>

There’s a difference between the two modes by design:

1. directly set the Content property of the TabItem, thus the content would be created and cached. When switching to another tab, the associated TabItem’s Content would replace the TabControl.SelectedContent and be rendered immediately, no delays.
2. With ContentTemplate/ContentTemplateSelector kicks in, the TabItem’s Content property it the data item, and TabControl.SelectedContent would also be the data item first, and the UI content would be re-generated by ContentTemplate/ContentTemplateSelector of the ContentPresenter every time TabControl.SelectedContent is set. This may not be what we want sometimes because when the template is complex, it would be slow if tab switching happens frequently.

#2 has been indeed a problem as most of the time developers would choose to drive the TabControl content by data template, however there’s no way provided by TabControl to solve this problem.

Solutions out there are many. Third party control libraries is one option, like Telerik RadTabControl has a IsContentPreserved property, other ways like subclass TabControl also works but not idea, as it would not work for existing controls derived from TabControl (derive from WPF controls is usually not a good practice but that’s the reality).

This article demonstrates a non-intrusive and simple solution to this problem, let’s get started:

Analysis

If you first hard code UI content for the TabItems and use Snoop to inspect the Visual Tree, you can see that the TabItem.Content is the UI control already; Do the same for the ContentTemplate way you’ll find out TabItem.Content is the data item.

So if we can somehow generate the UI control based on the ContentTemplate/ContentTemplateSelector and set it to TabItem.Content in advance and make the TabControl skip the process of applying template, the problem would be solved. Of cause we still want the usage to be as simple as:

1
2
3
<TabControl ItemsSource="{Binding ...}" TabContentPreservation.IsContentPreserved="True">
  ...
</TabControl>

It is exactly the case as the rest of this article shows.

Solution

Let’s start with writing an attached behavior TabContentPreservation with only one attached boolean property IsContentPreserved and a value changed callback to create a TabContentManager which will do the real work that we’ll be discussing next.

Note: codes are simplified for demo purpose, please read the source code for complete implementations.

1
2
3
4
5
6
7
8
9
10
private static void OnIsContentPreservedChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
  var tc = obj as TabControl;
  if ((bool)e.NewValue)
  {
    var manager = new TabContentManager(tc);
    manager.Start();
    SetTabContentManager(tc, manager);
  }
}

The first thing TabContentManager does is handling the DataContextChanged event of the tab control for preparations, see comments (again codes are simplified for demonstration purpose).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
void HandleTabDataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
  var tc = (TabControl)sender;
  var coll = (INotifyCollectionChanged)tc.Items;
  if (e.NewValue != null)
  {
    if (tc.Items.Count > 0)
    {
      ////There's Items already, which means the TabControl already has UI controls, we stop here
      var firstTab = tc.Items[0] as DependencyObject;
      if (firstTab != null)
      {
        throw new InvalidOperationException(string.Format("Content type of {0} is already preserved", tc.Items[0]));
      }
    }

    ////Save a copy of the ContentTemplate and clear it from the TabControl, so the TabControl would not use it generate the content
    _contentTemplate = tc.ContentTemplate;
    tc.ContentTemplate = null;

    ////SelectionChanged event is where we're going to do one-time realization the UI content for each tab when it becomes selected
    tc.SelectionChanged += HandleTabSelectionChanged;

    ////We also need to handle CollectionChanged in case items are removed/cleared in the TabControl.Items
    coll.CollectionChanged += HandleDataItemCollectionChanged;
  }
}

There’s no need to realize the content for all of the tabs immediately, we delay the creation of the UI content to the first time the tab is selected and only create the UI content once per tab.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
void HandleTabSelectionChanged(object sender, SelectionChangedEventArgs e)
{
  var tc = (TabControl)sender;

  if (e.AddedItems.Count > 0)
  {
    var dataItem = e.AddedItems[0];
    var tabItem = (TabItem)tc.ItemContainerGenerator.ContainerFromItem(dataItem);
    if (tabItem != null)
    {
      ////Check to see if we already have a realized UI content, if not, create one
      var contentControl = GetRealizedContent(dataItem);
      if (contentControl == null)
      {
        ////This is where we do the job for the TabControl, while TabControl reuse the same content presenter for all of the tabs, we create and cache the ContentControl for each tab
        var template = _contentTemplate;
        if (template != null)
        {
          contentControl = new ContentControl
          {
            DataContext = dataItem,
            ContentTemplate = template,
            ContentTemplateSelector = tc.ContentTemplateSelector
          };

          contentControl.SetBinding(ContentControl.ContentProperty, new Binding());
          
          SetRealizedContent(dataItem, contentControl);
          ////Delay a little bit to update TabItem.Content to the realized UI content
          tc.Dispatcher.BeginInvoke((Action)(() => tabItem.Content = contentControl));
        }
      }
    }
  }
}

The CollectionChanged handler part is quite simple, it’s just to update the cache when items are removed/cleared (added is ignored because we want HandleTabSelectionChanged to handle it, after all a tab maybe added but never gets selected by the user), please refer to the codes for more details.

Conclusion

It would be great if TabControl can provide this functionality out of box but it’s also understandable that its behavior covers most of the usages, for more complex scenarios people might as well be using third party control libraries anyway, with those libraries, advanced features like Tab content caching are likely to be included. The up side is that the WPF framework is designed to be so flexible that developers can always come up with tactical solutions like this, and they’re also elegant enough.