Getting Started with WPF Tab Splitter

18 Nov 20187 minutes to read

This section explains how to create the WPF Tab Splitter control. The WPF Tab Splitter is implemented through the TabSplitter class.

Assembly deployment

Refer to the control dependencies section for the list of assemblies or NuGet packages that need to be added as references to use the control in an application.

Refer to this documentation for more information about installing NuGet packages in a WPF application.

Adding the WPF Tab Splitter control via XAML

Download demo application from GitHub

  1. Create a new WPF application via Visual Studio.

  2. Add the following assembly reference to this project.

    • Syncfusion.Shared.WPF
    • Syncfusion.Tools.WPF

  3. Import the Syncfusion WPF schema http://schemas.syncfusion.com/wpf, and declare the WPF Tab Splitter control on the XAML page.

    <Window x:Class="TabSplitter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:local="clr-namespace:TabSplitter"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
   
<Grid Name="grid">
        <syncfusion:TabSplitter Name="tabSplitter" Height="280" Width="400" />
</Grid>

Adding the WPF Tab Splitter control via C#

  1. Create a new WPF application via Visual Studio.

  2. Add the following required assembly references to the project.

    • Syncfusion.Shared.WPF
    • Syncfusion.Tools.WPF

  3. Include the required namespace.

    using Syncfusion.Windows.Tools.Controls;

  4. Create an instance of the WPF Tab Splitter control and add it to the window.

    //Instance of TabSplitter
TabSplitter tabSplitter = new TabSplitter();
tabSplitter.Height = 280;
tabSplitter.Width = 400;
   
//Add control into the window
grid.Children.Add(tabSplitter);

WPF Tab Splitter control

Adding TabSplitterItem

  1. You can add a TabSplitterItem to the WPF Tab Splitter control by using the Header property. TabSplitter items contain a collection of panel items. The panel items are TopPanelItems and BottomPanelItems. You can also split the pages in a TabSplitterItem by using the SplitterPage.

    <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>
    //Create an instances of splitter page
SplitterPage splitterPage = new SplitterPage();
splitterPage.Header = "XAML";
   
SplitterPage splitterPage1 = new SplitterPage();
splitterPage1.Header = "Design";
   
//Create the tab splitter item
TabSplitterItem tabSplitterItem1 = new TabSplitterItem();
tabSplitterItem1.Header = "MainWindow.XAML";
   
//Add the splitter page into the tabSplitterItem
tabSplitterItem1.TopPanelItems.Add(splitterPage);
tabSplitterItem1.BottomPanelItems.Add(splitterPage1);
   
//Add tabSplitterItem into the tabSplitter
tabSplitter.Items.Add(tabSplitterItem1);

  2. Add a control to the splitter page of the WPF Tab Splitter and add content to the splitter page.

    <syncfusion:TabSplitterItem Header="Window1.xaml">                
    <syncfusion:TabSplitterItem.TopPanelItems>
        <syncfusion:SplitterPage Header="XAML">
            <Label Content="Xaml" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
        </syncfusion:SplitterPage>
    </syncfusion:TabSplitterItem.TopPanelItems>
    <syncfusion:TabSplitterItem.BottomPanelItems>
        <syncfusion:SplitterPage Header="Design">
            <Label Content="Design" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
        </syncfusion:SplitterPage>
    </syncfusion:TabSplitterItem.BottomPanelItems>
</syncfusion:TabSplitterItem>
    Label label = new Label();
label.Content = "XAML";
label.HorizontalContentAlignment = HorizontalAlignment.Center;
label.VerticalContentAlignment = VerticalAlignment.Center;
   
Label label1 = new Label();
label1.Content = "Design";
label1.HorizontalContentAlignment = HorizontalAlignment.Center;
label1.VerticalContentAlignment = VerticalAlignment.Center;
   
splitterPage.Content = label;
splitterPage1.Content = label1;

Shows the splitter pages in WPF Tab Splitter

Tab orientation

The WPF Tab Splitter items are placed horizontally or vertically by using the Orientation property.

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

Vertical orientation of WPF Tab Splitter

Collapsing bottom panel

You can collapse or expand the bottom panel by setting the IsCollapsedBottomPanel property to true. The default value of the IsCollapsedBottomPanel property is false.

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

Collapse the TabSplitterItem in WPF Tab Splitter

Theme

The WPF Tab Splitter supports various built-in themes. Refer to the following links to apply themes for the WPF Tab Splitter:

Setting theme to WPF Tab Splitter