Appearance in WPF TabControl (TabControlExt)

18 Sep 2020 / 2 minutes to read

This section explains different UI customization and theming options available in TabControl.

Change flow direction

You can change the flow direction of the TabControl layout from right to left by setting the FlowDirection property value as RightToLeft. The default value of FlowDirection property is LeftToRight.

<syncfusion:TabControlExt FlowDirection="RightToLeft"
                          Name="tabControlExt">
    <syncfusion:TabItemExt Content="This is the first tab item"
                           Header="tabItem1"/>
</syncfusion:TabControlExt>
tabControlExt.FlowDirection = FlowDirection.RightToLeft;

TabControl with RightToLeft flow direction

NOTE

View Sample in GitHub

Theme

You can customize the appearance of the TabControl control by using the SfSkinManager.SetVisualStyle method and SfSkinManager.VisualStyle property . The following are the various built-in visual styles for TabControl control.

  • Blend
  • Default
  • Lime
  • MaterialDark
  • MaterialDarkBlue
  • MaterialLight
  • MaterialLightBlue
  • Metro
  • Office2010Black
  • Office2010Blue
  • Office2010Silver
  • Office2013DarkGray
  • Office2013LightGray
  • Office2013White
  • Office2016Colorful
  • Office2016DarkGray
  • Office2016White
  • Office2019Black
  • Office2019Colorful
  • Office365
  • Saffron
  • SystemTheme
  • VisualStudio2013
  • VisualStudio2015

Here, the Blend style is applied to the TabControl.

<Window
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
    <Grid>
        <syncfusion:TabControlExt syncfusionskin:SfSkinManager.VisualStyle="Blend" 
                                  Name="tabControlExt"/>
    </Grid>
</Window>
//Namespace for the SfSkinManager.
using Syncfusion.SfSkinManager;

TabControlExt tabControlExt = new TabControlExt();
SfSkinManager.SetVisualStyle(tabControlExt, VisualStyles.Blend);

TabControl with Blend visual style

NOTE

View Sample in GitHub