WPF: TabControl and dynamic TabItems

本文关键字：dynamic TabItems and TabControl WPF | 更新日期: 2023-09-27 18:13:51

我试图在c#中使用WPF为我当前的项目创建一个GUI。我想有选项卡(在运行时动态创建)，每个选项卡应该打开一个表与相同的列标题，但不同的内容。

我知道我可以实现这样的选项卡和表:

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

我怎么能产生这样的代码后面的视图?我还不习惯绑定之类的东西，所以也许有人可以给我一个简短的例子?

谢谢卡茨

WPF: TabControl and dynamic TabItems

我已经创建了一个示例项目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的Header部分，而ContentTemplate用于每个TabPage的内容。

请参考以下链接:

  1. 在WPF中动态添加/删除标签
    2. 如何在WPF中动态创建数据网格?
  2. 设置WPF TabControl为每个选项卡显示相同的内容

对代码进行一些小的更新，您应该能够这样做:

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

只需根据自己的需要替换绑定中的属性。

相关文章：