Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: .NET3.5 C# 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.
Posted 4-Jun-10 7:44am
Edited 4-Jun-10 8:26am
v4
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

The problem I think is that your tiNew variable is being reallocated, so the program has the same tab twice. You sholud write a method that creates a new TabItem and sets all the appropriate properties, and returns the TabItem to be added to the TabControl.Items collection.
  Permalink  
v2
Comments
HugeHugh at 4-Jun-10 13:55pm
   
Thanks for your reply, John.
 
I modified my Window_Loaded code as follows, but the bug is still persisting:
 
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);
            
            TabItem tiNew2 = new TabItem()
            {
                Header = "Outer Tab 2",
                Content = new DummyClass()
                {
                    DummyMember = 2
                }
            };
 
            OuterTabs.Items.Add(tiNew2);
        }
 
I am using a new and different variable for the 2nd tab, tiNew2, which has no relationship to the 1st tiNew. It still has the same problem.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

I have developed a workaround for this issue.
 
Using a DataTemplate and letting Binding automatically instantiate the User Control seems to be the problem.
 
I was able to get it to work by:
A) Do not use a DataTemplate
B) Set the Content of the TabItem to be a new InnerTabs usercontrol, and directly set the DataContext of that usercontrol to the underlying class.
 
Here is the modified 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" />
</Window>
 
And here is the new function that dynamically loads the tabs:
 
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            TabItem tiNew = new TabItem()
            {
                Header = "Outer Tab 1",
                Content = new InnerTabs()
                {
                    DataContext = new DummyClass()
                    {
                        DummyMember = 1
                    }
                }
            };
            OuterTabs.Items.Add(tiNew);
            
            tiNew = new TabItem()
            {
                Header = "Outer Tab 2",
                Content = new InnerTabs()
                {
                    DataContext = new DummyClass()
                    {
                        DummyMember = 2
                    }
                }
            };
            OuterTabs.Items.Add(tiNew);
        }
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web03 | 2.8.1411022.1 | Last Updated 4 Jun 2010
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100