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

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

<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

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