To create tab item dynamically with different user control using WPF MVVM, we need to follow below steps :
1. Create ITabViewModel Interface :
public interface ITabViewModel
{
String Header { get; set; }
}
2. Create three View model as follows :
// ViewModelA
public class ViewModelA:ITabViewModel
{
public string Header { get; set; }
public ViewModelA()
{
}
}
// ViewModelB
public class ViewModelB:ITabViewModel
{
public string Header { get; set; }
public ViewModelB()
{
}
}
// ViewModelC
public class ViewModelC:ITabViewModel
{
public string Header { get; set; }
public ViewModelC()
{
}
}
3. Create three user control like :
// First user control ViewAUserControl.xaml
<UserControl x:Class="WPFTestApp.View.ViewAUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button Content="A" Height="30" Width="100"></Button>
</Grid>
</UserControl>
1. Create ITabViewModel Interface :
public interface ITabViewModel
{
String Header { get; set; }
}
2. Create three View model as follows :
// ViewModelA
public class ViewModelA:ITabViewModel
{
public string Header { get; set; }
public ViewModelA()
{
}
}
// ViewModelB
public class ViewModelB:ITabViewModel
{
public string Header { get; set; }
public ViewModelB()
{
}
}
// ViewModelC
public class ViewModelC:ITabViewModel
{
public string Header { get; set; }
public ViewModelC()
{
}
}
3. Create three user control like :
// First user control ViewAUserControl.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button Content="A" Height="30" Width="100"></Button>
</Grid>
</UserControl>
// Second user control ViewBUserControl.xaml
<UserControl x:Class="WPFTestApp.View.ViewBUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button Content="B" Height="30" Width="100"></Button>
</Grid>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button Content="B" Height="30" Width="100"></Button>
</Grid>
</UserControl>
// Third user control ViewCUserControl.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button Content="C" Height="30" Width="100"></Button>
</Grid>
</UserControl>
4. Create TabViewModel to use with Tab Window as follows :
public class TabViewModel
{
public ObservableCollection
public TabViewModel()
{
TabViewModels = new ObservableCollection
TabViewModels.Add(new ViewModelA { Header = "Tab A" });
TabViewModels.Add(new ViewModelB { Header = "Tab B" });
TabViewModels.Add(new ViewModelC { Header = "Tab C" });
}
}
5. Create one Tab Window to use user control code look like :
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WPFTestApp.View"
xmlns:vm="clr-namespace:WPFTestApp.ViewModel"
Title="TabWindow" Height="300" Width="300">
<Grid>
<Grid.Resources>
<vm:TabViewModel x:Key="TabVM"></vm:TabViewModel>
</Grid.Resources>
<TabControl x:Name="MyTabControl"
ItemsSource="{Binding TabViewModels}" DataContext="{StaticResource TabVM}"
SelectedItem="{Binding SelectedTabViewModel}" >
<TabControl.Resources>
<DataTemplate DataType="{x:Type vm:ViewModelA}">
<my:ViewAUserControl />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:ViewModelB}">
<my:ViewBUserControl />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:ViewModelC}">
<my:ViewCUserControl />
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Header}" />
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</Grid>
</Window>
Here we are using data template to add different view model.
Output will look like :