How I can dynamically create new TabItems with views and viewModels for a TabControl in Silverlight with the MVVM Light Toolkit?

Question

Hello everybody, I’m a starter with Silverlight and the MVVM Light Toolkit and I don’t know how to proper solve the following scenario:

I have the following views with their corresponding viewModels:

• MainView , the Deault Startpage
• TabControlView, view with a single Tabcontrol, placed on the MainView…
• AllBugsGridView, datagrid with all bugs.
• BugDetailView, view where the details of a single bug is showed, or a new bug can be added.. (datafields, labels, etc)

Now my target is the following:
I want to have a tabitem with an AllBugsGridView as content. (No Problem) Now when a user is making a double click on an item in the datagrid it should create a new tabItem with a bugDetailView inside showing the Details of the Grid Item. It Should be possible to have as many open tabitems as the user wants .

Further the user can add a new Bug over a button and a new tab opens with an empty bugDetailView.

Has anybody a proper solution for that. I don’t know how I can dynamically create new Views and ViewModels and wire them together.

Thank you very much for your answers.

Best regards

Hans

Answer 1

Take a look at my sample project here. While it's not using MVVM Light, it can be easily modified to work with it. The main idea is that the tab is defined as a "region" and you have a region manager that understands how to work with tab controls. Then, you simply route the view to the region and let it take care of the rest.

http://csharperimage.jeremylikness.com/2010/06/advanced-silverlight-applications-using.html

Answer 2

If you bind your TabControls source to your viewmodel's property of type ObservableCollection of ViewModelBase you can add new ViewModels to your collection or remove as needed. This keeps the ViewModels only seeing themselves and not the views. For the view side beyond binding the source to the collection you also set the Views and ViewModels as datatemplate and adorner pairs...

<Window.Resources>
    <DataTemplate DataType="{x:Type VM:ChangePasswordVM}">
        <AdornerDecorator>
            <localUserControls:ChangePasswordView />
        </AdornerDecorator>
    </DataTemplate>
</Window.Resources>