WPF中利用绑定数据动态生成TabControl页

明天过后

工程师 - 增材制造/机器人/工业软件

在一些使用场景中，需要根据选择的操作类型或功能动态生成TabControl不定数量的标签页及内部控件，WPF中使用绑定及数据模板可以很方便的实现这一复杂的功能。

TabControl标签页主要分为 页头标题 和 具体内容 两部分，风别在 TabControl.ItemTemplate 和 TabControl.ContentTemplate 中用两个数据模板（ DataTemplate ）实现定制。示例如下：

前端代码：

<Window x:Class="TabControl.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="400">
        <Canvas>
            <Button Canvas.Top="10" Canvas.Right="10" Width="60" Height="24" Content="添加" Click="Button_Click"/>
            <TabControl x:Name="tbcTest">
                <TabControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Width="40" Height="24" Text="{Binding Title}"/>
                    </DataTemplate>
                </TabControl.ItemTemplate>
                <TabControl.ContentTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding Values}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Margin="20" HorizontalAlignment="Left"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding}" Height="30" Width="100"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </TabControl.ContentTemplate>
            </TabControl>
        </Canvas>
    </Grid>
</Window>

后台代码：

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace TabControl
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
        public ObservableCollection<TestData> dataTest = new ObservableCollection<TestData>();
        public MainWindow()
            InitializeComponent();
            tbcTest.DataContext = dataTest;
            tbcTest.SetBinding(ItemsControl.ItemsSourceProperty, new Binding());
        private void Button_Click(object sender, RoutedEventArgs e)
            TestData testDataItem = new TestData();
            testDataItem.Title = (dataTest.Count + 1).ToString();
            for (int i = 0; i < dataTest.Count + 1; i++)
                testDataItem.Values.Add("第" + (dataTest.Count + 1).ToString() + "页 " + i.ToString());
            dataTest.Add(testDataItem);
            tbcTest.SelectedIndex = dataTest.Count-1;
    public class TestData
        private string title;