syncfusion-wpf-tabcontrol
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing WPF TabControl (TabControlExt)
实现WPF TabControl (TabControlExt)
The (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.
TabControlTabControlWhen 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
核心属性
| Property | Type | Purpose |
|---|---|---|
| Collection | Collection of TabItemExt objects |
| TabItemExt | Currently selected tab item |
| Dock | Tab position (Top, Bottom, Left, Right) |
| CloseButtonType | Close button display mode |
| bool | Show/hide new tab button |
| bool | Enable tab list navigation menu |
| bool | Enable built-in context menu |
| Visibility | Show/hide navigation scroll buttons |
| 属性 | 类型 | 用途 |
|---|---|---|
| Collection | TabItemExt对象集合 |
| TabItemExt | 当前选中的标签项 |
| Dock | 标签位置(Top、Bottom、Left、Right) |
| CloseButtonType | 关闭按钮显示模式 |
| bool | 显示/隐藏新建标签按钮 |
| bool | 启用标签列表导航菜单 |
| bool | 启用内置上下文菜单 |
| Visibility | 显示/隐藏导航滚动按钮 |
Key Events
核心事件
| Event | Purpose |
|---|---|
| Fires when selected tab changes |
| Fires when new tab button is clicked |
| Fires before tab item closes |
| Fires after tab item closes |
| 事件 | 用途 |
|---|---|
| 选中标签变化时触发 |
| 点击新建标签按钮时触发 |
| 标签项关闭前触发 |
| 标签项关闭后触发 |
Common Use Cases
常见用例
- Document Editor Interface - Multiple open documents as tabs with close buttons
- Settings Dashboard - Different settings categories organized as tabs
- Multi-View Application - Switch between different data views or modules
- Tool Palettes - Different tool options grouped in tabs
- Properties Panel - Different property categories in collapsible tabs
- 文档编辑器界面 - 多个打开的文档作为带关闭按钮的标签页
- 设置面板 - 不同设置类别按标签页组织
- 多视图应用 - 在不同数据视图或模块之间切换
- 工具面板 - 不同工具选项按标签页分组
- 属性面板 - 不同属性类别放在可折叠标签页中