How to add a user control to a tab control in WPF

Question

The following article shows how to create dynamic tabs in WPF so that only one text field is added to each tab.

private TabItem AddTabItem() { int count = _tabItems.Count; // create new tab item TabItem tab = new TabItem(); tab.Header = string.Format("Tab {0}", count); tab.Name = string.Format("tab{0}", count); tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate; tab.MouseDoubleClick += new MouseButtonEventHandler(tab_MouseDoubleClick); // add controls to tab item, this case I added just a textbox TextBox txt = new TextBox(); txt.Name = "txt"; tab.Content = txt; // insert tab item right before the last (+) tab item _tabItems.Insert(count - 1, tab); return tab; } 

http://www.codeproject.com/Articles/493538/Add-Remove-Tabs-Dynamically-in-WPF

What can I do to add some complex controls so that their positions are fixed instead of a single text field? can i create a custom control for this purpose? so how can i add a user control to manage tabs?

Answer 1

Try the following:

• Add a custom control (say in ComplexControl.xaml)

   <UserControl ... > <Grid> <Rectangle Width="100" Height="100" Fill="Red"/> </Grid> </UserControl> 

• Create class

   Public myComplexContolClass { //.... } 

• Map them together, so when you have myComplexContolClass in your application, it will be UserControl with 1. The map can be executed with a DataTemplate:

   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ... xmlns:models="clr-namespace: ... .Model" xmlns:views="clr-namespace: ... .View" > <DataTemplate DataType="{x:Type models:myComplexContolClass}"> <views:ComplexControl/> </DataTemplate> </ResourceDictionary> 

or

  <Window ... xmlns:models="clr-namespace: ... .Model" xmlns:views="clr-namespace: ... .View" > <Window.Resources> <DataTemplate DataType="{x:Type models:myComplexContolClass}"> <views:ComplexControl/> </DataTemplate> </Window.Resources> // ... </Window> 

4. Add it to your code:

    private TabItem AddTabItem() { // ... myComplexContolClass control = new myComplexContolClass(); tab.Content = control; // ... }