Syncfusion Wpf Tab Splitter

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:

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

C# namespace:

using Syncfusion.Windows.Tools.Controls;

When to Use This Skill

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

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

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

<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

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

Vertical split layout

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

Key Properties