syncfusion-wpf-tab-splitter

实现 WPF TabSplitter

TabSplitter 控件提供类似 Visual Studio 2008 的选项卡组拆分视图。它会在每个选项卡项中将内容分为顶部和底部面板，适用于拆分编辑器布局（例如 XAML + 设计视图）、双窗格内容查看器以及并排的选项卡面板。

所需程序集：

• Syncfusion.Tools.WPF
• Syncfusion.Shared.WPF

XAML 命名空间：

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

C# 命名空间：

using Syncfusion.Windows.Tools.Controls;

---

何时使用此技能

场景	使用 TabSplitter
拆分编辑器，显示 XAML + 设计视图	✅ 是
在选项卡中显示双窗格内容	✅ 是
多个选项卡组各自包含拆分面板	✅ 是
简单选项卡控件（不拆分）	❌ 使用标准 TabControl
水平导航侧边栏	❌ 使用 GroupBar 或 TreeNavigator

---

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 程序集和 NuGet 设置
• 通过 XAML 和 C# 添加 TabSplitter
• 添加包含内容的 TabSplitterItem
• 将 SplitterPage 添加到 TopPanelItems 和 BottomPanelItems
• 通过 SfSkinManager 应用主题

项目与面板结构

📄 阅读： references/items-and-panels.md

• TabSplitterItem：Header、TopPanelItems、BottomPanelItems
• SplitterPage：Header、内容、IsSelectedPage
• 折叠/展开底部面板（IsCollapsedBottomPanel）
• 设置 BottomPanelHeight
• 仅有一个子项时隐藏选项卡标题（HideHeaderOnSingleChild）
• 在一个 TabSplitter 中使用多个 TabSplitterItem

方向与布局

📄 阅读： references/orientation-and-layout.md

• 每个项的水平或垂直方向
• 交换、折叠和展开行为概览

外观与主题

📄 阅读： references/appearance.md

• MouseOverBackground、MouseOverForeground
• SelectedBackground、SelectedForeground
• SfSkinManager 内置主题
• 使用 ThemeStudio 创建自定义主题

---

快速入门示例

包含一个拆分选项卡的最简 TabSplitter（XAML）：

<Window x:Class="MyApp.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="MainWindow" Height="450" Width="800">
    <Grid>
        <syncfusion:TabSplitter Name="tabSplitter" Height="300" Width="500">
            <syncfusion:TabSplitterItem Header="Window1.xaml">
                <syncfusion:TabSplitterItem.TopPanelItems>
                    <syncfusion:SplitterPage Header="XAML">
                        <TextBlock Text="XAML View" HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                    </syncfusion:SplitterPage>
                </syncfusion:TabSplitterItem.TopPanelItems>
                <syncfusion:TabSplitterItem.BottomPanelItems>
                    <syncfusion:SplitterPage Header="Design">
                        <TextBlock Text="Design View" HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                    </syncfusion:SplitterPage>
                </syncfusion:TabSplitterItem.BottomPanelItems>
            </syncfusion:TabSplitterItem>
        </syncfusion:TabSplitter>
    </Grid>
</Window>

对应的 C# 示例：

TabSplitter tabSplitter = new TabSplitter();

SplitterPage topPage = new SplitterPage() { Header = "XAML" };
SplitterPage bottomPage = new SplitterPage() { Header = "Design" };

TabSplitterItem item = new TabSplitterItem() { Header = "Window1.xaml" };
item.TopPanelItems.Add(topPage);
item.BottomPanelItems.Add(bottomPage);

tabSplitter.Items.Add(item);
grid.Children.Add(tabSplitter);

---

常见模式

多个选项卡组

<syncfusion:TabSplitter>
    <syncfusion:TabSplitterItem Header="Window1.xaml">
        <syncfusion:TabSplitterItem.TopPanelItems>
            <syncfusion:SplitterPage Header="XAML" />
        </syncfusion:TabSplitterItem.TopPanelItems>
        <syncfusion:TabSplitterItem.BottomPanelItems>
            <syncfusion:SplitterPage Header="Design" />
        </syncfusion:TabSplitterItem.BottomPanelItems>
    </syncfusion:TabSplitterItem>
    <syncfusion:TabSplitterItem Header="Window2.xaml">
        <syncfusion:TabSplitterItem.TopPanelItems>
            <syncfusion:SplitterPage Header="XAML" />
        </syncfusion:TabSplitterItem.TopPanelItems>
        <syncfusion:TabSplitterItem.BottomPanelItems>
            <syncfusion:SplitterPage Header="Design" />
        </syncfusion:TabSplitterItem.BottomPanelItems>
    </syncfusion:TabSplitterItem>
</syncfusion:TabSplitter>

启动时折叠底部面板

<syncfusion:TabSplitterItem Header="Window1.xaml" IsCollapsedBottomPanel="True">
    ...
</syncfusion:TabSplitterItem>

垂直拆分布局

<syncfusion:TabSplitterItem Header="Window1.xaml" Orientation="Vertical">
    ...
</syncfusion:TabSplitterItem>

---

关键属性

属性	所属对象	类型	说明
Header	TabSplitterItem	object	选项卡标题文本
TopPanelItems	TabSplitterItem	集合	顶部面板中的页面
BottomPanelItems	TabSplitterItem	集合	底部面板中的页面
Orientation	TabSplitterItem	Orientation	Horizontal（默认）或 Vertical
IsCollapsedBottomPanel	TabSplitterItem	bool	折叠底部面板（默认值：false）
Header	SplitterPage	object	页面的选项卡标题
IsSelectedPage	SplitterPage	bool	将此页面设为选中状态
BottomPanelHeight	TabSplitter	double	底部面板的高度
HideHeaderOnSingleChild	TabSplitter	bool	仅有一个项时隐藏选项卡标题
SelectedBackground	TabSplitter	Brush	选中选项卡的背景
SelectedForeground	TabSplitter	Brush	选中选项卡的前景色
MouseOverBackground	TabSplitter	Brush	悬停时的背景
MouseOverForeground	TabSplitter	Brush	悬停时的前景色