CODEWITHSUNDEEP
c#wpfxamltabcontroltabitem
Desnoxav
Desnoxav

Reputation: 354

Dynamic TabControl in WPF MVVM

I started using WPF (in C#) some weeks ago and now i need help for some advanced use of tabcontrol.

Fisrt of all, I'm using a MVVM (Model View ViewModel) pattern for designing my application, and I have a constraint that is to try to not add code in code behind file (that inititalise xaml files).

Now my issue is to create dynamically new tabItems in my MainWindow View (Window) that shows an instance of my Detail View (Page) when I click on a button ("New Tab" button for example).

I have found a lot off stuff about dynamic creation off tabitem on the web but often with modifications in code behind files. I though using binding but I don't know how can I use binding to this kind of stuff.

Upvotes: 2

Views: 16777

Answers (3)

Mare Infinitus
Mare Infinitus

Reputation: 8192

MVVM will help you out.

Create a ViewModel for your MainWindow View. There you can have a collection of DetailViewModels. Just use an ObservableCollection of DetailViewModels here.

In your View, bind the ItemsSource of the TabControl to that Collection.

Your AddTab Button can have a Command Binding. That Command can be a ICommand derived class, that is published in the MainWindowViewModel. Pressing the button then ends up in the MainWindow ViewModel, adding another DetailViewModel and updating the View that way.

Have a look to this excellent video tuturial on MVVM here: Jason Dollinger on MVVM

He explains how that can be made, with examples for Main and Detail ViewModel and commands.

The sourcecode that he develops in his video is available here: Sourcecode on Lab49

Perhaps it even easier for you to create a ViewModel that is just used by the TabControl. Set the DataContext of the TabControl to that TabControlViewModel then. Publish that TabControlViewModel in your MainWindowViewModel as a public property, to accomplish that.

Your code-behind will be empty, except some InitializeComponent perhaps.

Upvotes: 3

Vale
Vale

Reputation: 3298

You can bind to ItemsSource property of a TabControl which represents collection of tab items. Then you can manipulate the collection from your ViewModel.

Upvotes: 1

vadim
vadim

Reputation: 1726

Great set of articles about MVVM by Sacha Barber contains downloadable application where he expose they way of dynamic view creation using tab control. You can download demo application attached to article to see how to use dynamic tab control. Example:

You need where you would bind collection of workspaces that represent data model for tab content and if needed addition properties for tab e.g. closable or not, disabled or not, Name and so on. This can be your ViewModelBase. Create you tab item template to support your view model.

<TabControl x:Name="tabControl"
                 IsSynchronizedWithCurrentItem="True" 
                 ItemsSource="{Binding Path=Workspaces}" 
                 Template="{StaticResource DynamicTabControlTemplate}">         
</TabControl>

Init collection of workspaces for example like this

Workspaces = new ObservableCollection();

And after you adding new item to collection tab control will be changed too.

Upvotes: 2

Related Questions