Different views/usercontrols on each tab of a TabControl

Question

I'm trying to write a program that uses tabs to hold different usercontrols. What I currently want to happen is the user clicks a find button, a new tab is created, and a find screen appears inside it. Using the find screen the user can select clients and these then open in their own new tabs allowing the user to edit them. So if the user went in and selected three clients, the screen would have four tabs, one for the find screen and three client tabs. It will also need to close the tab when the user clicks an exit button on the usercontrol in that tab.

My problem is that I'm not sure how to set this up in my program. I've created a TabControl and bound the ItemsSource to a collection of viewmodels (that I can add to whenever a user adds a new screen). I can use a DataTemplateSelector to select the DataTemplate that contains the right view, but I don't know how to set the resource of the view to my viewmodel.

I'm doing this in WPF and I'm currently using Bxf to put my viewmodels into the views, and this normally works but I'm unsure how it fits in with the TabControl.

I'm trying to stick to MVVM so having a list of views in my viewmodel is out.

Has anyone done something similar to this before?

Answer 1

I would make my main ViewModel look like this:

• ObservableCollection<ViewModelBase> OpenTabs
• ICommand AddTabCommand
• ICommand CloseTabCommand

In the Constructor, a new SearchViewModel is created and added to OpenTabs, and it's Search method gets hooks up to some method in the MainViewModel

The method in the MainViewModel that handles the Search command would create a new CustomerViewModel with the specified customer, set it's CloseCommand, and then add it to the OpenTabs

var vm = new CustomerViewModel(customer);
vm.CloseCommand = this.CloseTabCommand;
OpenTabs.Add(vm);

You could also use an event system such as PRISM's EventAggregator or Galasoft's Messenger to pass around AddTab/CloseTab events instead of hooking up the commands from the MainViewModel

And of course, you'd use DataTemplates to define how each OpenTab object would get displayed in the View

<TabControl ItemsSource="{Binding OpenTabs}">
    <TabControl.Resources>
        <DataTemplate DataType="{x:Type local:SearchViewModel}">
            <local:SearchView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:CustomerViewModel}">
            <local:CustomerView />
        </DataTemplate>
    </TabControl.Resources>
</TabControl>