WPF: TabControl and dynamic TabItems
22,724
Solution 1
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.
Solution 2
Please Refer Following Links :
- Add/Remove Tabs Dynamically in WPF
- How to dynamically create a datagrid in WPF?
- Set WPF TabControl to show the same Content for every tab
Author by
Kat Ze
Updated on June 13, 2020Comments
-
Kat Ze about 4 years
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
-
KornMuffin almost 9 yearsDo a little googling on "MVVM TabControl" ... that should help you get going. MVVM will make this very easy once you get it going.
-
-
Kat Ze almost 9 yearsthanks 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
-
Spawn almost 9 years@Kat Ze, use property AutoGenerateColumns="False"