WPF: TabControl и dynamic TabItems

Question

Я пытаюсь создать графический интерфейс для моего текущего проекта, используя WPF в C#. Я хотел бы иметь вкладки (динамически создаваемые во время выполнения), и каждая вкладка должна открывать таблицу с одинаковыми заголовками столбцов, но с другим содержимым.

Я знаю, что я мог бы реализовать вкладки и таблицы, как это:

<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> 

Как я могу создать представление, как это с кодом позади? Я не привык к Bindings и тому подобное, поэтому, может быть, кто-нибудь может показать мне короткий пример?

Благодаря Катце

Answer 1

Пожалуйста, обратитесь следующие ссылки:

1. Add/Remove Tabs Dynamically in WPF
2. How to dynamically create a datagrid in WPF?
3. Set WPF TabControl to show the same Content for every tab

Answer 2

С некоторыми незначительными обновлениями в код-позади, вы должны быть способный d o это с:

<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> 

Просто замените свойства в привязках в соответствии с вашими потребностями.

Answer 3

Я создал образец проекта DynamicTabs. Некоторые контекст образца в конструкторе:

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; 

Классы для контекста образца:

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; } 
} 

И 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 для заголовка части TabPage и ContentTemplate для Содержание каждой вкладки.