WPF: TabControl and dynamic TabItems

Question

I am trying to create a GUI for my current project using WPF in C#. I would like to have tabs (dynamically created at runtime) and each tab should open a table with the same column headers but different contents.

I know I could realize tabs and tables like this:

<Grid>
    <TabControl  x:Name="tabControl"  TabStripPlacement="Left">
        <TabItem Header="Example 1" x:Name="tabItem" >
            <DataGrid ItemsSource="{Binding TagCollection.Tags}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                    <DataGridTextColumn Header="Description" Binding="{Binding Description}" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" />                                              
                </DataGrid.Columns>
            </DataGrid>
        </TabItem>
        <TabItem Header="Example 2" x:Name="tabItem1" >
            <DataGrid ItemsSource="{Binding TagCollection.Tags}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                    <DataGridTextColumn Header="Description" Binding="{Binding Description}" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
                </DataGrid.Columns>
            </DataGrid>
        </TabItem>

    </TabControl>

</Grid>

How can I produce a view like that with code behind? I am not used to Bindings and such things yet, so perhaps someone could show me a short example?

Thanks KatZe

Do a little googling on "MVVM TabControl" ... that should help you get going. MVVM will make this very easy once you get it going. — KornMuffin, Sep 22 '15 at 12:21

score 12 · Answer 1 · edited Jun 13 '17 at 08:41

I have create a sample project DynamicTabs. Some sample context in constructor:

var tabs = new ObservableCollection<MyTab>();
int tabsCount = 5;
for (var i = 1; i <= tabsCount; i++)
{
    var tab = new MyTab() {Header = "Tab " + i};
    tab.Data.Add(new MyTabData() {Column1 = "col1" + i, Column2 = "col2" + i, Column3 = "col3" + i});
    tabs.Add(tab);
}
DataContext = tabs;

Classes for sample context:

public class MyTab
{
    public string Header { get; set; }

    public ObservableCollection<MyTabData> Data { get; } = new ObservableCollection<MyTabData>();
}

public class MyTabData
{
    public string Column1 { get; set; }
    public string Column2 { get; set; }
    public string Column3 { get; set; }
}

And XAML:

<Window x:Class="DynamicTabs.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:DynamicTabs"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<TabControl ItemsSource="{Binding}">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="local:MyTab">
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="local:MyTab">
            <DataGrid ItemsSource="{Binding Data}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Column 1" Binding="{Binding Column1}" />
                    <DataGridTextColumn Header="Column 2" Binding="{Binding Column2}" />
                    <DataGridTextColumn Header="Column 3" Binding="{Binding Column3}" />
                </DataGrid.Columns>
            </DataGrid>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

ItemTemplate is for Header part of TabPage and ContentTemplate for Content of each TabPage.

thanks this works good! the only problem that is left is that there are created all columns 2 times now. First with Header names and second with Binding names — Kat Ze, Sep 22 '15 at 13:49

score 2 · Answer 2 · edited May 23 '17 at 12:14

2

Please Refer Following Links :

edited May 23 '17 at 12:14

Community

1
1

answered Sep 22 '15 at 12:22

Amol Bavannavar

2,062
2
15
36

score -1 · Answer 3 · edited Jun 13 '17 at 08:42

With some minor updates to your code-behind, you should be able to do this with :

<TabControl  x:Name="tabControl"  TabStripPlacement="Left" ItemsSource="{Binding Path=TableCollection}">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="{x:Type YourTableType}">
          <TabItem Header={Binding TableName}>
            <DataGrid ItemsSource="{Binding Rows}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                    <DataGridTextColumn Header="Description" Binding="{Binding Description}" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
                </DataGrid.Columns>
            </DataGrid>
          </TabItem>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

Simply replace the properties in bindings according to your own needs.

WPF: TabControl and dynamic TabItems

3 Answers3

Linked