syncfusion-wpf-tabbedwindow

实现 Syncfusion WPF 选项卡窗口

本指南全面介绍如何实现 Syncfusion WPF 选项卡窗口控件。该控件将 SfChromelessWindow 与 SfTabControl 结合，可用于构建专业的文档型应用程序，并提供高级选项卡管理、分离窗口和跨窗口合并选项卡等功能。

何时使用此技能

适用于包含多个选项卡、浏览器风格界面、分离窗口、选项卡合并和 MVVM 绑定的文档型应用程序。涵盖设置、窗口模式、选项卡管理、数据绑定、浮动窗口和自定义。

组件概览

选项卡窗口是 SfChromelessWindow 与 SfTabControl 的强大组合，可用于构建专业的文档型应用程序，并提供以下功能：

• 拖放重新排序 - 可直观地在选项卡栏内或不同窗口之间重新排列选项卡
• 分离窗口 - 将选项卡拖出窗口边界，即可创建浮动窗口
• 选项卡合并 - 通过验证在多个 TabbedWindow 实例之间移动选项卡
• 灵活的选项卡管理 - 动态添加、移除和选择选项卡，并提供关闭/新建选项卡按钮
• MVVM 支持 - 通过 ItemsSource 实现完整的数据绑定，适用于数据驱动场景
• 窗口类型模式 - 选项卡模式（集成到窗口框架）或普通模式（基于内容）
• 内容自定义 - 支持自定义标题、图标和内容的模板
• 事件驱动架构 - 为所有选项卡操作提供全面的事件

所需的主要程序集：

• Syncfusion.SfChromelessWindow.WPF
• Syncfusion.Shared.WPF

命名空间：

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

文档与导航指南

入门

📄 阅读： references/getting-started.md

适用于以下情况：

• 安装并引用所需程序集
• 在 XAML 或代码隐藏中创建第一个选项卡窗口
• 了解窗口类型模式（选项卡模式与普通模式）
• 为应用程序选择合适的模式
• 创建基本选项卡项
• 配置必要属性

主要主题： 安装、基本窗口设置、WindowType 属性、选项卡模式与普通模式对比、程序集引用、命名空间导入

---

选项卡管理

📄 阅读： references/tab-management.md

适用于以下情况：

• 为选项卡添加关闭按钮
• 启用新建选项卡（+）按钮
• 处理 NewTabRequested 事件以动态创建选项卡
• 自定义新建选项卡按钮的外观
• 实现键盘快捷键（Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+T）
• 支持鼠标中键单击关闭选项卡
• 以编程方式添加、移除或选择选项卡

主要主题： CloseButtonVisibility、EnableNewTabButton、NewTabRequested 事件、NewTabButtonStyle、键盘快捷键、选项卡选择

---

数据绑定（MVVM）

📄 阅读： references/data-binding.md

适用于以下情况：

• 将选项卡绑定到 ViewModel 集合
• 在选项卡窗口中实现 MVVM 模式
• 在数据驱动的选项卡场景中使用 ItemsSource
• 创建选项卡模型和 ViewModel
• 通过模板自定义选项卡标题和内容
• 配置 ItemTemplate 和 ContentTemplate
• 使用 ItemContainerStyle 设置选项卡样式
• 使用 ObservableCollection 处理动态集合更新

主要主题： MVVM 模式、ItemsSource 绑定、ItemTemplate、ContentTemplate、ItemContainerStyle、ObservableCollection、选项卡模型

---

标签合并和浮动窗口

📄 阅读： references/merge-tabs.md

在需要以下操作时：

• 启用拖出功能以创建浮动窗口
• 了解标签如何变为独立窗口
• 将浮动标签重新附加到主窗口
• 在多个窗口之间合并标签
• 使用 PreviewTabMerge 事件验证合并操作
• 控制哪些标签可以移动
• 在合并操作期间转换项目
• 处理多窗口工作区场景

主要主题： 拖出窗口、拖出窗口边界的行为、浮动窗口生命周期、PreviewTabMerge 事件、TabMergePreviewEventArgs、跨窗口合并、合并验证

---

自定义和样式设置

📄 阅读： references/customization.md

在需要以下操作时：

• 应用 Syncfusion 主题
• 自定义窗口边框外观
• 设置标签页眉和内容区域的样式
• 创建自定义页眉和内容模板
• 自定义关闭按钮外观
• 配置拖放视觉反馈
• 设置颜色、字体和间距
• 实现响应式设计
• 遵循专业外观的最佳实践

主要主题： 主题应用、样式自定义、模板自定义、视觉外观、AllowDragDrop、响应式设计、专业样式

---

快速入门示例

带关闭按钮的基本标签式窗口

XAML：

<syncfusion:SfChromelessWindow x:Class="TabbedWindowApp.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="Document Manager"
        WindowType="Tabbed"
        Height="600" 
        Width="900">
        
        <syncfusion:SfTabControl 
            AllowDragDrop="True"
            EnableNewTabButton="True"
            NewTabRequested="OnNewTabRequested">
            
            <syncfusion:SfTabItem 
                Header="Document 1" 
                CloseButtonVisibility="Visible">
                <TextBlock Text="Welcome to Document 1" 
                          Margin="20"/>
            </syncfusion:SfTabItem>
            
            <syncfusion:SfTabItem 
                Header="Document 2" 
                CloseButtonVisibility="Visible">
                <TextBlock Text="Welcome to Document 2" 
                          Margin="20"/>
            </syncfusion:SfTabItem>
            
        </syncfusion:SfTabControl>
            
</syncfusion:SfChromelessWindow> 

代码隐藏：

using Syncfusion.Windows.Controls;

public partial class MainWindow : SfChromelessWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
    {
        var tabCount = ((SfTabControl)sender).Items.Count;
        var newTab = new SfTabItem 
        { 
            Header = $"Document {tabCount + 1}",
            Content = new TextBlock 
            { 
                Text = $"New Document {tabCount + 1}",
                Margin = new Thickness(20)
            },
            CloseButtonVisibility = Visibility.Visible
        };
        
        e.Item = newTab;
    }
}

常见模式

模式 1：支持拖放和新建标签的文档编辑器

<syncfusion:SfChromelessWindow WindowType="Tabbed">
    <syncfusion:SfTabControl 
        AllowDragDrop="True"
        EnableNewTabButton="True"
        NewTabRequested="OnNewTabRequested">
        
    </syncfusion:SfTabControl>
</syncfusion:SfChromelessWindow>

模式 2：MVVM 数据绑定标签

<syncfusion:SfTabControl ItemsSource="{Binding OpenDocuments}">
    <syncfusion:SfTabControl.ItemContainerStyle>
        <Style TargetType="syncfusion:SfTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding Title}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </syncfusion:SfTabControl.ItemContainerStyle>
    
    <syncfusion:SfTabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </syncfusion:SfTabControl.ContentTemplate>
</syncfusion:SfTabControl>

主要属性和事件

核心属性

属性	类型	描述
WindowType	WindowType	Tabbed（集成在窗口边框中）或 Normal（基于内容）
AllowDragDrop	bool	启用拖放重新排序和拖出功能
EnableNewTabButton	bool	显示/隐藏新建标签（+）按钮
SelectedItem	object	当前活动标签
SelectedIndex	int	活动标签的索引
ItemsSource	IEnumerable	将标签绑定到集合（MVVM）
CloseButtonVisibility	Visibility	显示/隐藏每个标签的关闭按钮

重要事件

事件	描述
NewTabRequested	用户点击 + 按钮时触发；设置 e.Item 以创建标签
PreviewTabMerge	标签在窗口之间移动前触发；设置 e.Allow 以进行验证
SelectionChanged	活动标签更改时触发

样式属性

属性	描述
NewTabButtonStyle	新建标签按钮的样式
ItemTemplate	标签页眉的 DataTemplate
ContentTemplate	标签内容的 DataTemplate
ItemContainerStyle	SfTabItem 容器的样式

最佳实践

1. 选择合适的模式： 以文档为中心的应用使用 Tabbed 模式；标签作为次要导航时使用 Normal 模式
2. 启用拖放： 设置 AllowDragDrop="True"，以实现直观的重新排序和拖出功能
3. 处理 NewTabRequested： 当 EnableNewTabButton="True" 时，始终实现此事件处理程序
4. MVVM 模式： 在数据驱动场景中使用 ItemsSource 绑定，实现清晰的关注点分离
5. 验证合并： 使用 PreviewTabMerge 控制哪些标签可以在窗口之间移动
6. 键盘支持： 向用户说明键盘快捷键（Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+T）
7. 视觉反馈： 确保拖放操作提供清晰的视觉指示，方便用户操作