OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-tab-splitter
Implement Syncfusion WPF TabSplitter for VS 2008-style split tab views with top and bottom panel sections. Use this when building split tab layouts, dual-pane views, or side-by-side tabbed views in WPF. Covers SplitterPage, TopPanelItems, BottomPanelItems, TabSplitterItem, and collapsible split panel configuration.
npx skills add syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-tab-splitter
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.WPFSyncfusion.Shared.WPFXAML namespace:
C# namespace:
| 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 |
📄 Read: references/getting-started.md
📄 Read: references/items-and-panels.md
📄 Read: references/orientation-and-layout.md
📄 Read: references/appearance.md
Minimal TabSplitter with one split tab (XAML):
C# equivalent:
| 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 |
<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>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>