syncfusion-wpf-tabcontrol

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing WPF TabControl (TabControlExt)

实现WPF TabControl (TabControlExt)

The
TabControl
(TabControlExt) is a powerful component for organizing application content into multiple tabs. It provides features like tab orientation, editable headers, pin/unpin functionality, context menus, and customizable close buttons, enabling developers to create flexible, organized tabbed interfaces.
TabControl
(TabControlExt)是一款功能强大的组件,可将应用内容组织到多个标签页中。它提供标签方向、可编辑标题、固定/取消固定功能、上下文菜单和可自定义关闭按钮等特性,让开发者能够创建灵活、有条理的标签页界面。

When to Use This Skill

何时使用此技能

  • Creating tabbed interfaces: When you need to organize multiple content areas into a tab-based layout
  • Tab management: For handling tab item creation, deletion, selection, and manipulation
  • User interactions: When you need to respond to tab selection changes, tab closing, or tab navigation
  • Customization: For styling tabs (orientation, placement, themes), configuring close buttons, or adding icons
  • Data binding: When binding tab items to data sources or observable collections
  • Advanced features: For implementing context menus, drag-drop reordering, pin/unpin, or keyboard navigation
  • 创建标签页界面: 当你需要将多个内容区域组织成基于标签页的布局时
  • 标签管理: 用于处理标签项的创建、删除、选择和操作
  • 用户交互: 当你需要响应标签选择变化、标签关闭或标签导航时
  • 自定义配置: 用于设置标签样式(方向、位置、主题)、配置关闭按钮或添加图标
  • 数据绑定: 当你需要将标签项绑定到数据源或可观察集合时
  • 高级功能: 用于实现上下文菜单、拖放重排、固定/取消固定或键盘导航

Component Overview

组件概述

Key Capabilities:
  • Tab Orientation - Position tabs horizontally (top/bottom) or vertically (left/right)
  • Flexible Closing - Configure close button display (Common, Individual, Both, Extended, Hidden)
  • Tab Selection - Support for mouse, keyboard (Ctrl+Tab, Arrow keys), and programmatic selection
  • Editable Headers - Allow users to edit tab headers interactively
  • Pin/Unpin - Enable quick access to frequently used tabs
  • Context Menus - Built-in and custom context menu support
  • Data Binding - Bind tab items to data sources
  • Drag and Drop - Reorder tabs by dragging
  • Navigation - Tab list menu and scroll buttons for navigation
  • Theming - Rich set of built-in themes and customization options
核心功能:
  • 标签方向 - 水平(顶部/底部)或垂直(左侧/右侧)放置标签
  • 灵活关闭 - 配置关闭按钮显示模式(通用、独立、两者兼具、扩展、隐藏)
  • 标签选择 - 支持鼠标、键盘(Ctrl+Tab、方向键)和程序化选择
  • 可编辑标题 - 允许用户交互式编辑标签标题
  • 固定/取消固定 - 快速访问常用标签
  • 上下文菜单 - 内置和自定义上下文菜单支持
  • 数据绑定 - 将标签项绑定到数据源
  • 拖放功能 - 通过拖动重新排列标签
  • 导航功能 - 标签列表菜单和滚动按钮用于导航
  • 主题支持 - 丰富的内置主题和自定义选项

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Installation and assembly references
  • Basic TabControl creation (XAML and C# approaches)
  • Adding TabItems with headers and content
  • Tab placement and orientation options
  • Assembly dependencies
📄 阅读: references/getting-started.md
  • 安装和程序集引用
  • 基础TabControl创建(XAML和C#两种方式)
  • 添加带标题和内容的TabItems
  • 标签位置和方向选项
  • 程序集依赖

Tab Interactions & Selection

标签交互与选择

📄 Read: references/tab-interactions.md
  • Tab selection (mouse, keyboard, programmatic)
  • SelectedItemChangedEvent for monitoring changes
  • Keyboard navigation (Ctrl+Tab, Arrow keys)
  • Tab list context menu for quick navigation
  • Getting selected item properties
📄 阅读: references/tab-interactions.md
  • 标签选择(鼠标、键盘、程序化)
  • 用于监控变化的SelectedItemChangedEvent
  • 键盘导航(Ctrl+Tab、方向键)
  • 用于快速导航的标签列表上下文菜单
  • 获取选中项属性

Tab Closing & Button Configuration

标签关闭与按钮配置

📄 Read: references/closing-tabs.md
  • CloseButtonType options and display modes
  • Individual vs common close buttons
  • Disabling close on specific tabs (CanClose)
  • Hiding close buttons for particular tabs
  • Close button visibility states
📄 阅读: references/closing-tabs.md
  • CloseButtonType选项和显示模式
  • 独立关闭按钮与通用关闭按钮对比
  • 禁用特定标签的关闭功能(CanClose)
  • 隐藏特定标签的关闭按钮
  • 关闭按钮可见性状态

Customization & Styling

自定义与样式设置

📄 Read: references/customization.md
  • Editable tab headers
  • Tab orientation and placement variations
  • Layout modes (SingleLine, MultiLine, MultiLineWithFillWidth)
  • Pin/unpin functionality
  • Tab scrolling configuration
  • Built-in themes and theming support
📄 阅读: references/customization.md
  • 可编辑标签标题
  • 标签方向和位置变体
  • 布局模式(SingleLine、MultiLine、MultiLineWithFillWidth)
  • 固定/取消固定功能
  • 标签滚动配置
  • 内置主题和主题支持

Data Binding

数据绑定

📄 Read: references/data-binding.md
  • Binding TabControl items to data sources
  • Creating TabItems from data collections
  • Header and content templates
  • Observable collection patterns
  • TabItem data binding
📄 阅读: references/data-binding.md
  • 将TabControl项绑定到数据源
  • 从数据集合创建TabItems
  • 标题和内容模板
  • 可观察集合模式
  • TabItem数据绑定

Advanced Features

高级功能

📄 Read: references/advanced-features.md
  • Context menu customization (tab-level and item-level)
  • Custom menu items and handlers
  • Tab reordering via drag and drop
  • New button feature (IsNewButtonEnabled)
  • Tab scrolling with navigation buttons
  • Localization support
  • New tab button events
📄 阅读: references/advanced-features.md
  • 上下文菜单自定义(标签级和项级)
  • 自定义菜单项和处理程序
  • 通过拖放重新排列标签
  • 新建按钮功能(IsNewButtonEnabled)
  • 带导航按钮的标签滚动
  • 本地化支持
  • 新建标签按钮事件

Quick Start Example

快速入门示例

Basic XAML TabControl

基础XAML TabControl

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

Basic C# Creation

基础C#创建方式

csharp
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;
    }
}
csharp
using Syncfusion.Windows.Tools.Controls;

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

        // 创建TabControl实例
        TabControlExt tabControlExt = new TabControlExt();
        tabControlExt.Height = 100;
        tabControlExt.Width = 280;

        // 创建并添加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;
    }
}

Common Patterns

常见模式

Pattern 1: Responding to Tab Selection Changes

模式1:响应标签选择变化

csharp
// 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}");
}
csharp
// 处理标签选择变化
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}");
}

Pattern 2: Configuring Close Buttons

模式2:配置关闭按钮

xml
<!-- Enable close buttons on both TabControl and TabItems -->
<syncfusion:TabControlExt CloseButtonType="Both" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" CanClose="False" />
</syncfusion:TabControlExt>
xml
<!-- 在TabControl和TabItems上都启用关闭按钮 -->
<syncfusion:TabControlExt CloseButtonType="Both" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" CanClose="False" />
</syncfusion:TabControlExt>

Pattern 3: Changing Tab Orientation

模式3:更改标签方向

xml
<!-- Position tabs at the bottom -->
<syncfusion:TabControlExt TabStripPlacement="Bottom" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" />
</syncfusion:TabControlExt>
xml
<!-- 将标签放置在底部 -->
<syncfusion:TabControlExt TabStripPlacement="Bottom" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" />
</syncfusion:TabControlExt>

Pattern 4: Adding a New Tab Button

模式4:添加新建标签按钮

xml
<syncfusion:TabControlExt IsNewButtonEnabled="True" 
                          NewButtonClick="TabControl_NewButtonClick"
                          Name="tabControl" />
csharp
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);
}
xml
<syncfusion:TabControlExt IsNewButtonEnabled="True" 
                          NewButtonClick="TabControl_NewButtonClick"
                          Name="tabControl" />
csharp
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);
}

Pattern 5: Enabling Navigation with Scroll Buttons

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

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

Key Properties

核心属性

PropertyTypePurpose
Items
CollectionCollection of TabItemExt objects
SelectedItem
TabItemExtCurrently selected tab item
TabStripPlacement
DockTab position (Top, Bottom, Left, Right)
CloseButtonType
CloseButtonTypeClose button display mode
IsNewButtonEnabled
boolShow/hide new tab button
ShowTabListContextMenu
boolEnable tab list navigation menu
ShowTabItemContextMenu
boolEnable built-in context menu
TabScrollButtonVisibility
VisibilityShow/hide navigation scroll buttons
属性类型用途
Items
CollectionTabItemExt对象集合
SelectedItem
TabItemExt当前选中的标签项
TabStripPlacement
Dock标签位置(Top、Bottom、Left、Right)
CloseButtonType
CloseButtonType关闭按钮显示模式
IsNewButtonEnabled
bool显示/隐藏新建标签按钮
ShowTabListContextMenu
bool启用标签列表导航菜单
ShowTabItemContextMenu
bool启用内置上下文菜单
TabScrollButtonVisibility
Visibility显示/隐藏导航滚动按钮

Key Events

核心事件

EventPurpose
SelectedItemChangedEvent
Fires when selected tab changes
NewButtonClick
Fires when new tab button is clicked
TabItemClosing
Fires before tab item closes
TabItemClosed
Fires after tab item closes
事件用途
SelectedItemChangedEvent
选中标签变化时触发
NewButtonClick
点击新建标签按钮时触发
TabItemClosing
标签项关闭前触发
TabItemClosed
标签项关闭后触发

Common Use Cases

常见用例

  1. Document Editor Interface - Multiple open documents as tabs with close buttons
  2. Settings Dashboard - Different settings categories organized as tabs
  3. Multi-View Application - Switch between different data views or modules
  4. Tool Palettes - Different tool options grouped in tabs
  5. Properties Panel - Different property categories in collapsible tabs
  1. 文档编辑器界面 - 多个打开的文档作为带关闭按钮的标签页
  2. 设置面板 - 不同设置类别按标签页组织
  3. 多视图应用 - 在不同数据视图或模块之间切换
  4. 工具面板 - 不同工具选项按标签页分组
  5. 属性面板 - 不同属性类别放在可折叠标签页中