Appearance in WPF TabControl (TabControlExt)

This section deals with the appearance of TabControlExt control and contains the following topic:


Setting Visual Styles

The appearance of the TabControlExt control is customized by using the VisualStyle property. This is an attached property which gets or sets the visual style for the control.

Property table

Property Description
VisualStyle Sets the visual style for the TabControlExt control. The options provided are as follows.
  • Blend
  • Office2003
  • Office2007Blue
  • Office2007Black
  • Office2007Silver
  • ShinyBlue
  • ShinyRed
  • SyncOrange
  • VS2010
  • Metro
  • Transparent

The following code example illustrates how to set the visual style for the TabControlExt.

<!-- Adding TabControlExt -->

<syncfusion:TabControlExt Name="tabControlExt" syncfusion:SkinStorage.VisualStyle="Office2007Blue">

    <!-- Adding TabItemExt -->

    <syncfusion:TabItemExt Name="tabItemExt1" Header="TabItemExt1"/>

    <!-- Adding TabItemExt -->

    <syncfusion:TabItemExt Name="tabItemExt2" Header="TabItemExt2"/>

// Setting the visual style

// Creating instance of the TabControlExt control

TabControlExt tabControlExt = new TabControlExt();

// Creating the instance of StackPanel.

StackPanel stackPanel = new StackPanel();

// Creating instance of the TabItemExt

TabItemExt tabItemExt1 = new TabItemExt();

// Setting header of the TabItemExt

tabItemExt1.Header = "TabItemExt1";

// Adding TabItemExt to TabControlExt.


// Creating instance of the TabItemExt2

TabItemExt tabItemExt2 = new TabItemExt();

// Setting header of the TabItemExt

tabItemExt2.Header = "TabItemExt2";

// Adding TabItemExt to TabControlExt


// Adding control to the StackPanel


// Setting the visual style as Office2007Blue

SkinStorage.SetVisualStyle(tabControlExt, "Office2007Blue");

Office2007 blue theme

Office2007 black theme

Office2007 silver theme

Office2010 blue theme

Office2010 black thee

Office2010 silver theme

VS2010 theme

Blend theme

Metro theme

Custom theme


The style of the TabControlExt control can be customized by the customization properties. The following table lists the details of the customization properties.

Customization Properties

The following code example shows how to use the customization properties in the TabControlExt control.

  • xaml
  • <sync:TabControlExt TabItemSelectedBackground="Gold" Height="100" Margin="100"
                    <sync:TabItemExt Header="TabItem1"/>
                    <sync:TabItemExt Header="TabItem2"/>
                    <sync:TabItemExt Header="TabItem3"/>              

    The following screenshot is the sample output for the above code example.

    TabControl customization