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.

xaml

<!-- 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"/>

</syncfusion:TabControlExt>

c#

// 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.

tabControlExt.Items.Add(tabItemExt1);

// Creating instance of the TabItemExt2

TabItemExt tabItemExt2 = new TabItemExt();

// Setting header of the TabItemExt

tabItemExt2.Header = "TabItemExt2";

// Adding TabItemExt to TabControlExt

tabControlExt.Items.Add(tabItemExt2);

// Adding control to the StackPanel

stackPanel.Children.Add(tabControlExt); 

// Setting the visual style as Office2007Blue

SkinStorage.SetVisualStyle(tabControlExt, "Office2007Blue");

Customization

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

• TabItemSelectedBackground
• TabItemSelectedBorderBrush
• TabItemSelectedForeground
• TabItemHoverBackground
• TabItemHoverBorderBrush
• TabItemHoverForeground

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

xaml

<sync:TabControlExt TabItemSelectedBackground="Gold" Height="100" Margin="100"

                            TabItemSelectedBorderBrush="BlueViolet" 

                            TabItemSelectedForeground="Black" 

                            TabItemHoverBackground="Goldenrod" 

                            TabItemHoverBorderBrush="BlueViolet" 

                            TabItemHoverForeground="Yellow">

                <sync:TabItemExt Header="TabItem1"/>

                <sync:TabItemExt Header="TabItem2"/>

                <sync:TabItemExt Header="TabItem3"/>              

</sync:TabControlExt>

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