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

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

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

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

Orientation and Layout

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

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

Appearance and Themes

📄 Read: references/appearance.md

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

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

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>

Start with bottom panel collapsed

xml

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

Vertical split layout

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

syncfusion-wpf-tab-splitter

NPX Install

Tags

SKILL.md Content