syncfusion-wpf-tabcontrol

实现 WPF TabControl（TabControlExt）

TabControl（TabControlExt）是一个功能强大的组件，可将应用程序内容组织到多个选项卡中。它提供选项卡方向、可编辑页眉、固定/取消固定功能、上下文菜单和可自定义关闭按钮等功能，帮助开发者创建灵活且井然有序的选项卡式界面。

何时使用此技能

• 创建选项卡式界面： 需要将多个内容区域组织为基于选项卡的布局时
• 选项卡管理： 需要处理选项卡项的创建、删除、选择和操作时
• 用户交互： 需要响应选项卡选择更改、关闭或导航时
• 自定义： 需要设置选项卡样式（方向、位置、主题）、配置关闭按钮或添加图标时
• 数据绑定： 需要将选项卡项绑定到数据源或可观察集合时
• 高级功能： 需要实现上下文菜单、拖放排序、固定/取消固定或键盘导航时

组件概览

主要功能：

• 选项卡方向 - 将选项卡水平（顶部/底部）或垂直（左侧/右侧）放置
• 灵活关闭 - 配置关闭按钮的显示方式（Common、Individual、Both、Extended、Hidden）
• 选项卡选择 - 支持鼠标、键盘（Ctrl+Tab、方向键）和程序化选择
• 可编辑页眉 - 允许用户交互式编辑选项卡页眉
• 固定/取消固定 - 快速访问常用选项卡
• 上下文菜单 - 内置和自定义上下文菜单支持
• 数据绑定 - 将选项卡项绑定到数据源
• 拖放 - 通过拖动重新排序选项卡
• 导航 - 提供选项卡列表菜单和滚动按钮以便导航
• 主题 - 提供丰富的内置主题和自定义选项

导航指南

入门

📄 阅读： references/getting-started.md

• 安装和程序集引用
• 创建基础 TabControl（XAML 和 C# 方法）
• 添加包含页眉和内容的 TabItem
• 选项卡位置和方向选项
• 程序集依赖项

选项卡交互与选择

📄 阅读： references/tab-interactions.md

• 选项卡选择（鼠标、键盘、程序化）
• 使用 SelectedItemChangedEvent 监控更改
• 键盘导航（Ctrl+Tab、方向键）
• 用于快速导航的选项卡列表上下文菜单
• 获取所选项属性

关闭选项卡与按钮配置

📄 阅读： references/closing-tabs.md

• CloseButtonType 选项和显示模式
• 单独关闭按钮与通用关闭按钮
• 禁用特定选项卡的关闭功能（CanClose）
• 隐藏特定选项卡的关闭按钮
• 关闭按钮可见性状态

自定义与样式

📄 阅读： references/customization.md

• 可编辑选项卡页眉
• 选项卡方向和位置变化
• 布局模式（SingleLine、MultiLine、MultiLineWithFillWidth）
• 固定/取消固定功能
• 选项卡滚动配置
• 内置主题和主题支持

数据绑定

📄 阅读： references/data-binding.md

• 将 TabControl 项绑定到数据源
• 根据数据集合创建 TabItem
• 页眉和内容模板
• 可观察集合模式
• TabItem 数据绑定

高级功能

📄 阅读： references/advanced-features.md

• 自定义上下文菜单（选项卡级别和项级别）
• 自定义菜单项和处理程序
• 通过拖放重新排序选项卡
• 新建按钮功能（IsNewButtonEnabled）
• 使用导航按钮滚动选项卡
• 本地化支持
• 新建选项卡按钮事件

快速入门示例

基础 XAML TabControl

<Window x:Class="TabControlApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="TabControl Example" Height="450" Width="800">

    <Grid>
        <syncfusion:TabControlExt Name="tabControl" Height="100" Width="280">
            <syncfusion:TabItemExt Header="Tab 1">
                <TextBlock Text="Content of Tab 1" />
            </syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="Tab 2">
                <TextBlock Text="Content of Tab 2" />
            </syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="Tab 3">
                <TextBlock Text="Content of Tab 3" />
            </syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
    </Grid>
</Window>

基础 C# 创建方式

using Syncfusion.Windows.Tools.Controls;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();

        // Create TabControl instance
        TabControlExt tabControlExt = new TabControlExt();
        tabControlExt.Height = 100;
        tabControlExt.Width = 280;

        // Create and add TabItems
        TabItemExt tabItem1 = new TabItemExt() 
        {
            Header = "Tab 1",
            Content = new TextBlock() { Text = "Content of Tab 1" }
        };

        TabItemExt tabItem2 = new TabItemExt() 
        {
            Header = "Tab 2",
            Content = new TextBlock() { Text = "Content of Tab 2" }
        };

        tabControlExt.Items.Add(tabItem1);
        tabControlExt.Items.Add(tabItem2);

        this.Content = tabControlExt;
    }
}

常见模式

模式 1：响应选项卡选择更改

// Handle tab selection changes
tabControl.SelectedItemChangedEvent += TabControl_SelectedItemChangedEvent;

private void TabControl_SelectedItemChangedEvent(object sender, SelectedItemChangedEventArgs e)
{
    var newTabItem = e.NewSelectedItem.Header;
    var oldTabItem = e.OldSelectedItem?.Header ?? "None";
    MessageBox.Show($"Changed from {oldTabItem} to {newTabItem}");
}

模式 2：配置关闭按钮

<syncfusion:TabControlExt CloseButtonType="Both" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" CanClose="False" />
</syncfusion:TabControlExt>

模式 3：更改选项卡方向

<syncfusion:TabControlExt TabStripPlacement="Bottom" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" />
</syncfusion:TabControlExt>

模式 4：添加新建选项卡按钮

<syncfusion:TabControlExt IsNewButtonEnabled="True" 
                          NewButtonClick="TabControl_NewButtonClick"
                          Name="tabControl" />

private void TabControl_NewButtonClick(object sender, EventArgs e)
{
    TabItemExt newItem = new TabItemExt() 
    {
        Header = $"Tab {tabControl.Items.Count + 1}",
        Content = new TextBlock() { Text = "New tab content" }
    };
    tabControl.Items.Add(newItem);
}

模式 5：启用滚动按钮导航

<syncfusion:TabControlExt TabScrollButtonVisibility="Visible"
                          TabScrollStyle="Extended"
                          Name="tabControl" />

关键属性

• Items — TabItemExt 对象集合
• SelectedItem — 当前选中的选项卡
• TabStripPlacement — 位置（顶部、底部、左侧、右侧）
• CloseButtonType — 关闭按钮显示模式
• IsNewButtonEnabled — 显示/隐藏新建选项卡按钮
• ShowTabListContextMenu — 选项卡列表导航菜单

关键事件

• SelectedItemChangedEvent — 选项卡选择已更改
• TabItemClosing — 选项卡关闭前（可取消）
• TabItemClosed — 选项卡关闭后