syncfusion-wpf-tab-splitter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF TabSplitter

实现WPF TabSplitter

The TabSplitter control provides a Visual Studio 2008-style split view of tabbed groups. It divides content into top and bottom panels within each tab item — ideal for split editor layouts (e.g., XAML + Design views), dual-pane content viewers, and side-by-side tabbed panels.

Assemblies required:

```
Syncfusion.Tools.WPF
```
```
Syncfusion.Shared.WPF
```

XAML namespace:

xml

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

C# namespace:

csharp

using Syncfusion.Windows.Tools.Controls;

TabSplitter控件提供Visual Studio 2008风格的标签组拆分视图。它将每个标签项内的内容划分为上下两个面板——非常适合拆分编辑器布局（如XAML + 设计视图）、双窗格内容查看器和并排标签面板。

所需程序集：

```
Syncfusion.Tools.WPF
```
```
Syncfusion.Shared.WPF
```

XAML命名空间：

xml

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

C#命名空间：

csharp

using Syncfusion.Windows.Tools.Controls;

When to Use This Skill

何时使用该控件

Scenario	Use TabSplitter
Split editor with XAML + Design views	✅ Yes
Dual-pane content within a tab	✅ Yes
Multiple tabbed groups each with split panels	✅ Yes
Simple tab control (no split)	❌ Use standard TabControl
Horizontal navigation sidebar	❌ Use GroupBar or TreeNavigator

场景	是否使用TabSplitter
包含XAML + 设计视图的拆分编辑器	✅ 是
标签内的双窗格内容	✅ 是
每个都带拆分面板的多组标签	✅ 是
简单标签控件（无拆分）	❌ 使用标准TabControl
水平导航侧边栏	❌ 使用GroupBar或TreeNavigator

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly and NuGet setup
Adding TabSplitter via XAML and C#
Adding TabSplitterItem with content
Adding SplitterPages to TopPanelItems and BottomPanelItems
Applying themes via SfSkinManager

📄 阅读： references/getting-started.md

程序集与NuGet设置
通过XAML和C#添加TabSplitter
添加带内容的TabSplitterItem
向TopPanelItems和BottomPanelItems添加SplitterPages
通过SfSkinManager应用主题

Items and Panel Structure

项与面板结构

📄 Read: references/items-and-panels.md

TabSplitterItem: Header, TopPanelItems, BottomPanelItems
SplitterPage: Header, content, IsSelectedPage
Collapsing/expanding the bottom panel (IsCollapsedBottomPanel)
Setting BottomPanelHeight
Hiding the header tab when only one child (HideHeaderOnSingleChild)
Multiple TabSplitterItems in one TabSplitter

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

TabSplitterItem：Header、TopPanelItems、BottomPanelItems
SplitterPage：Header、内容、IsSelectedPage
折叠/展开底部面板（IsCollapsedBottomPanel）
设置BottomPanelHeight
仅含一个子项时隐藏标签头（HideHeaderOnSingleChild）
单个TabSplitter中的多个TabSplitterItem

Orientation and Layout

方向与布局

📄 Read: references/orientation-and-layout.md

Horizontal vs Vertical orientation per item
Swap, collapse, and expand behaviors overview

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

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

Appearance and Themes

外观与主题

📄 Read: references/appearance.md

MouseOverBackground, MouseOverForeground
SelectedBackground, SelectedForeground
SfSkinManager built-in themes
ThemeStudio custom theme creation

📄 阅读： references/appearance.md

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

Quick Start Example

快速入门示例

Minimal TabSplitter with one split tab (XAML):

xml

<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# equivalent:

csharp

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);

带一个拆分标签的最简TabSplitter（XAML）：

xml

<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#代码：

csharp

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);

Common Patterns

常见模式

Multiple tab groups

多标签组

xml

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

xml

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

Start with bottom panel collapsed

初始状态下底部面板折叠

xml

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

xml

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

Vertical split layout

垂直拆分布局

xml

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

xml

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

Key Properties

关键属性

Property	On	Type	Description
`Header`	`TabSplitterItem`	`object`	Tab header label
`TopPanelItems`	`TabSplitterItem`	collection	Pages in the top panel
`BottomPanelItems`	`TabSplitterItem`	collection	Pages in the bottom panel
`Orientation`	`TabSplitterItem`	`Orientation`	`Horizontal` (default) or `Vertical`
`IsCollapsedBottomPanel`	`TabSplitterItem`	`bool`	Collapse the bottom panel (default: `false` )
`Header`	`SplitterPage`	`object`	Tab label for the page
`IsSelectedPage`	`SplitterPage`	`bool`	Set this page as selected
`BottomPanelHeight`	`TabSplitter`	`double`	Height of the bottom panel
`HideHeaderOnSingleChild`	`TabSplitter`	`bool`	Hide tab header if only one item
`SelectedBackground`	`TabSplitter`	`Brush`	Background of selected tab
`SelectedForeground`	`TabSplitter`	`Brush`	Foreground of selected tab
`MouseOverBackground`	`TabSplitter`	`Brush`	Background on hover
`MouseOverForeground`	`TabSplitter`	`Brush`	Foreground on hover

属性	所属对象	类型	描述
`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`	鼠标悬停时的前景色