Problem with WPF dynamic nested controls selected item

See more:

.NET3.5

C#

.NET

WPF

user-controls

, +

I'm having a real problem with WPF not maintaining the current Selected Item when I create a data-bound user control dynamically. The easiest way to explain it is to show you a stripped-down example.

In this simple example I have a WPF window that contains a TabControl named OuterTabs in the XAML markup. The TabControl has a DataTemplate for a local DummyClass, so that it will display a User Control named InnerTabs whenever it has DummyClass as its content.

Here is my MainWindow.xaml:

<Window x:Class="SubTabTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SubTabTest"
        Loaded="Window_Loaded"
        Title="WPF Selection Problem" Height="250" Width="350">
    <TabControl x:Name="OuterTabs">
        <TabControl.Resources>
            <DataTemplate DataType="{x:Type local:DummyClass}">
                <local:InnerTabs Margin="10" DataContext="{Binding}" />
            </DataTemplate>
        </TabControl.Resources>
    </TabControl>
</Window>

Here is my InnerTabs.xaml, the user control:

<UserControl x:Class="SubTabTest.InnerTabs"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TabControl>
        <TabItem Header="Inner Tab 1">
            <TabItem.Content>
                <StackPanel Orientation="Horizontal" Margin="20">
                    <TextBlock Text="SubTab of "></TextBlock>
                    <TextBlock Text="{Binding DummyMember}"></TextBlock>
                </StackPanel>
            </TabItem.Content>
        </TabItem>
        <TabItem Header="Inner Tab 2">
            <TabItem.Content>
                <StackPanel Orientation="Horizontal" Margin="20">
                    <TextBlock Text="SubTab of "></TextBlock>
                    <TextBlock Text="{Binding DummyMember}"></TextBlock>
                </StackPanel>
            </TabItem.Content>
        </TabItem>
    </TabControl>
</UserControl>

InnerTabs.xaml has no significant code behind (just InitializeComponent() in the constructor)

Finally here is my MainWindow.xaml.cs code behind. When the window is loaded, it dynamically creates 2 tabs. For this simple example, the DummyClass is just defined in the MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;

namespace SubTabTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            TabItem tiNew = new TabItem()
            {
                Header = "Outer Tab 1",
                Content = new DummyClass()
                {
                    DummyMember = 1
                }
            };

            OuterTabs.Items.Add(tiNew);

            tiNew = new TabItem()
            {
                Header = "Outer Tab 2",
                Content = new DummyClass()
                {
                    DummyMember = 2
                }
            };

            OuterTabs.Items.Add(tiNew);
        }
    }

    public class DummyClass
    {
        public int DummyMember
        {
            get;
            set;
        }
    }
}

To demonstrate the bug, follow these steps:

1) Run the app
2) Switch from 1 outer tab to the other outer tab
3) Notice they both have SubTab 1 selected
4) Now switch the current selection of one Inner Tab to the 2nd tab
5) Now change the outer tab selection
6) Notice that its current tab is also now the 2nd tab, but when you last left this tab, it had the 1st tab selected. So when you changed the current tab on the 1st outer tab, it had the effect of ALSO changing the current tab on the 2nd outer tab!

This has also been observed when each Outer Tab contains a Calendar control. If I change the date on Tab 1, it automatically also changes the date on Tab 2! I want both tabs to be able to independently keep their UI state including all selections, etc.

Thank you everyone for your help with this issue.