The selected tab changes with templated WPF TabControls inside an outer TabControl

Question

I have a WPF UI with an outer TabControl whose TabItems contain inner TabControls like this:

<TabControl>
    <TabItem Header="Tab1">
        <TabControl>
            <TabItem Header="TabA">
            </TabItem>
            <TabItem Header="TabB">
            </TabItem>
        </TabControl>
    </TabItem>
    <TabItem Header="Tab2">
        <TabControl>
            <TabItem Header="TabC">
            </TabItem>
            <TabItem Header="TabD">
            </TabItem>
        </TabControl>
    </TabItem>
</TabControl>

When switching from Tab1 to Tab2 on the outer TabControl, the inner TabControls remember their selection. Example: Select Tab1, select TabB, select Tab2, select Tab1 and you'll find TabB still selected.

This consistency falls apart when I change the TabControl templates. In fact, the selected tab on the inner TabControls appears to randomly change when you move from Tab1 to Tab2 on the outer TabControl. Here are some sample templates:

<Window.Resources>
    <ControlTemplate x:Key="TabControlTemplate1" TargetType="{x:Type TabControl}">
        <DockPanel>
            <StackPanel Orientation="Vertical" DockPanel.Dock="Left" IsItemsHost="True"/>
            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
        </DockPanel>
    </ControlTemplate>
    <ControlTemplate x:Key="TabControlTemplate2" TargetType="{x:Type TabControl}">
        <DockPanel>
            <UniformGrid Rows="1" DockPanel.Dock="Top" IsItemsHost="True"/>
            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
        </DockPanel>
    </ControlTemplate>
</Window.Resources>
<TabControl Template="{DynamicResource TabControlTemplate1}">
    <TabItem Header="Tab1">
        <TabControl Template="{DynamicResource TabControlTemplate2}">
            <TabItem Header="TabA">
            </TabItem>
            <TabItem Header="TabB">
            </TabItem>
        </TabControl>
    </TabItem>
    <TabItem Header="Tab2">
        <TabControl Template="{DynamicResource TabControlTemplate2}">
            <TabItem Header="TabC">
            </TabItem>
            <TabItem Header="TabD">
            </TabItem>
        </TabControl>
    </TabItem>
</TabControl>

How can I template the outer and inner tab controls and maintain the selected tab state on the inner tab controls?

CodeWarrior CodeWarrior · Accepted Answer · 2011-06-22T15:16:12

Have you tried controlling tab selection through a ViewModel? If you are using the ViewModel pattern, it would not be too terribly hard to bind the SelectedItem attribute to an underliying property to update it when the selection changes.

I have used this before on ListViews where I changed ItemTemplates at run time to secure the selected Item. I dont see why it would not work in this instance too.

The selected tab changes with templated WPF TabControls inside an outer TabControl

1 Answers