Proper databinding in WPF using TabControl and MVVM

Question

Just when I thought I was getting better at this, TabControl is now giving me problems. I have read relevant posts here on StackOverflow, but have been unable to get my simple demo application to work the way I want it to.

To keep things focused, I'll start with a single question about something I don't understand.

I have a TabControl whose TabItems each host the same UserControl. When I set the TabControl.ContentTemplate's DataTemplate to my UserControl, a rendering of that control appears, but it looks like it's the same control for each tab. Or perhaps it's not tied to any of the tabs at all.

MainWindow.xaml

Code-behind just sets the ViewModel as its DataContext:

namespace TabControlMvvm {
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new TabControlMvvm.ViewModels.MainViewModel();
        }
    }
}

The TabItem's Content should be another UserControl, PersonMainPanel.xaml:

Code-behind:

namespace TabControlMvvm.Views {
    /// 
    /// Interaction logic for PersonMainPanel.xaml
    /// 
    public partial class PersonMainPanel : UserControl {
        public PersonMainPanel()
        {
            InitializeComponent();
        }
    }
}

And the MainViewModel:

namespace TabControlMvvm.ViewModels {
    public class MainViewModel : ViewModelBase {
        public ICollectionView Tabs { get; set; }
        public int Selected { get; set; }

        public class Person
        {
            public string Name { get; set; }
        }

        public class DummyController {
            public List Persons { get; private set; }

            public DummyController()
            {
                Persons = new List {
                    new Person { Name = "Larry" },
                    new Person { Name = "Darryl" },
                    new Person { Name = "Other brother Darryl" }
                };
            }
        }

        public DummyController Controller { get; private set; }

        public RelayCommand HelloCommand { get; set; }

        public MainViewModel()
        {
            Controller = new DummyController();

            /*
            IEnumerable tabs = Enumerable.Range( 1, _controller.Persons.Count())
                                                  .Select( x => new TabItem { Header = String.Format( "Person {0}", x),
                                                                              Content = new PersonMainPanel() });
             */
            IEnumerable tabs = Enumerable.Range( 1, Controller.Persons.Count())
                                                  .Select( x => new TabItem { Header = String.Format( "Person {0}", x)});
            Tabs = CollectionViewSource.GetDefaultView( tabs.ToList());
            Tabs.MoveCurrentToFirst();

            InitializeCommands();
        }

        private void InitializeCommands()
        {
            HelloCommand = new RelayCommand( () => { MessageBox.Show( String.Format( "Hello, Person {0} named {1}!", 
                                                                      Selected, Controller.Persons[Selected].Name)); });
        }
    }
}

PersonMainPanel hosts another TabControl, where Tab 1's Content is MyTabItem.xaml:

Code-behind:

namespace TabControlMvvm.Views {
    /// 
    /// Interaction logic for MyTabItem.xaml
    /// 
    public partial class MyTabItem : UserControl {
        public MyTabItem()
        {
            InitializeComponent();
        }
    }
}

Which looks like this at runtime:

Issues I have so far:

When I enter Person 1's Name and then click the Person 2 tab, Person 1's Name is still visible, hence my assumption that the controls are not databound properly. I understand that ItemsControls do not pass their DataContext down to their children, but I am not sure how to fix this without associating the View in code-behind.
I would have expected to get databinding errors in the Output window because of the missing DataContext, but I don't get any errors. I assume the DataContext is null, but wouldn't this still result in a binding error?
How can I use Snoop effectively to debug problems like this?

Here's the sample solution: http://www.filedropper.com/tabcontrolmvvm

sTrenat · Accepted Answer

Here is solution:

In MainWindow modify your TabControl template, to bind Header from your Model:

In MyTabItem.xaml, set UpdateTrigger, because default one 'OnLostFocus' can sometimes not save your data:

In MainViewModel modify creating of your tabs, so it will have Name property too:

IEnumerable tabs = Enumerable.Range( 1, Controller.Persons.Count())
                                        .Select( x => new TabItem { Header = String.Format("Person {0}", x), Name = Controller.Persons[x-1].Name });

Also, the most important, create own TabItem class to contain some bounded data:

public class TabItem
{
    public string Name { set; get; }
    public string Header { set; get; }    
}

Proper databinding in WPF using TabControl and MVVM

Answers (1)

Related Questions