WPF:TabControl 和动态 TabItems [英] WPF: TabControl and dynamic TabItems

问题描述

我正在尝试使用 C# 中的 WPF 为我当前的项目创建一个 GUI.我想要标签(在运行时动态创建)，每个标签应该打开一个具有相同列标题但内容不同的表格.

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?

谢谢凯泽

推荐答案

我已经创建了一个示例项目 DynamicTabs.构造函数中的一些示例上下文:

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;

示例上下文的类:

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 的 Content.

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

这篇关于WPF:TabControl 和动态 TabItems的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！