How to create tab in WPF / C #?

Question

I have a TabControl in my WPF application. I want my application to basically support multiple "instances" within the same program. For example, think about web browsers, they allow you to have multiple instances of websites on different tabs, I want to achieve similar functionality, where my application contains several instances of "routines".

The problem that I am facing right now is that I have to copy the same XAML to each tab, because each tab has exactly the same layout and user interface, but different data. Another problem is that I need the functionality to dynamically create these tabs.

Here is a screenshot of my application in its current state. As you can see, in the upper part there are 2 tabs, and the second is a transparent background, since it is inactive.

So, how to create a tab system in which the tab user interface remains the same for each tab, and I only need to develop using one XAML interface and duplicate it for each tab?

Requirements:

• Each tab has the same interface.
• Each tab has different data for user interface elements.
• As a developer, I want to work on the XAML tab only once and directly in Visual Studio.

Ideally, I would like a simple simple example of a project / code in which there is one control with an unsecured contribution, and the application dynamically creates 2-n tabs at startup, all of which have the same interface, but with different data.

Answer 1

As noted in another answer, there may be many ways to do this, but here is my simple way:

Define a DataTemplate that defines the contents of each of your identical tabs. The controls in the data template will be bound to the presentation model of the currently selected tab. In my example, I put one TextBlock, but you can easily expand this.

using this xaml:

 <Page.DataContext> <Samples:TabBindingViewModels /> </Page.DataContext> <Grid> <Grid.Resources> <DataTemplate x:Key="ContentTemplate" DataType="{x:Type Samples:TabBindingViewModel}"> <TextBlock Text="{Binding Content}"/> </DataTemplate> </Grid.Resources> <TabControl ContentTemplate="{StaticResource ContentTemplate}" DisplayMemberPath="Header" ItemsSource="{Binding Items}" /> </Grid> 

and this view model code:

 public class TabBindingViewModels { public TabBindingViewModels() { Items = new ObservableCollection<TabBindingViewModel> { new TabBindingViewModel(1), new TabBindingViewModel(2), new TabBindingViewModel(3), }; } public IEnumerable<TabBindingViewModel> Items { get; private set; } } public class TabBindingViewModel { public TabBindingViewModel() : this(0) { } public TabBindingViewModel(int n) { Header = "I'm the header: " + n.ToString(CultureInfo.InvariantCulture); Content = "I'm the content: " + n.ToString(CultureInfo.InvariantCulture); } public string Header { get; set; } public string Content { get; set; } } 

we get:

I really like the tutorial for styling a tab control. You can easily add more complex content to tab headers as well as content.

You should study the full tab control template to get an idea of ​​how this works. Use Blend or VS11 beta to extract the template.

To dynamically add / remove tabs, now all you have to do is add / remove elements in the ObservableCollection model for viewing.

Answer 2

This can actually turn into a pretty big answer, because there are many different paths you could take.

It is important to understand that TabControl is an ItemsControl , which means that it can contain a collection of objects, such as UserControls, that each module makes. Thus, you can start by binding the Items property to the ObservableCollection {T} of some UserControl objects that live inside some module project that implements the Prism IModule interface. The interface defines the starting point of any module that can be loaded on the tab. Since the modules are requested, you simply load the assembly and add a tab containing a link to the area defined in the module.

This is actually not very difficult, but I would recommend you read Prism , because it will handle a lot of hard work for you. Recently, I have developed an interface similar to the one you describe using Prism.

Answer 3

Take a look at Caliburn.Micro for an MVVM based solution. The exact question you ask is solved in one of the typical solutions.

http://caliburnmicro.codeplex.com/

Answer 4

Without further information, my approach would be to start the MVVM provider inside the ApplicationDomain for each instance or tab. When you kill / close a tab, unload the application domain.