Articles in this section
Category / Section

How to customize header of TabItemExt in WPF TabControlExt at runtime?

1 min read

In WPF TabControl, you can customize the header of each TabItemExt by using its Header Template and also you can assign different template during the run time.

The following code example changes the Header template based on the “FlowDirection” of TabControlExt. It loads a HeaderTemplate with TextBlock containing the text Right and it loads a HeaderTemplate with TextBlock containing the text Left for FlowDirection to beRightToLeft” and “LeftToRight” respectively.


public partial class MainWindow : Window
        TabControlExt tab;
        TabItemExt Tabitem1;
        public MainWindow()
            Grid grid = new Grid();
            StackPanel stack1 = new StackPanel();
            Button Button1 = new Button();
            Button1.Width = 200;
            Button1.Height = 50;
            Button1.Content = "Change Flow Direction";
            Button1.Click +=Button1_Click;
            tab = new TabControlExt();
            tab.Height = 200;
            Tabitem1 = new TabItemExt();
            Tabitem1.HeaderTemplate = GetLeftToRightTemplate ();
            tab.FlowDirectionChanged += e_FlowDirectionChanged;   
       public  DataTemplate GetLeftToRightTemplate ()
        XNamespace ns = "";
        XNamespace x = "";
        XElement xDataTemplate =new XElement(ns + "DataTemplate",
                               new XElement(ns + "Grid",new XElement(ns + "TextBlock", new XAttribute("Text", "Left"))));    
       StringReader sr = new StringReader(xDataTemplate.ToString());
        XmlReader xr = XmlReader.Create(sr);
        return System.Windows.Markup.XamlReader.Load(xr) as DataTemplate;
       public DataTemplate GetRightToLeftTemplate ()
           XNamespace ns = "";
           XNamespace x = "";
           XElement  xDataTemplate1 = new XElement(ns + "DataTemplate",
                                                new XElement(ns + "TextBlock", new XAttribute("Text", "Right")));
           StringReader sr1 = new StringReader(xDataTemplate1.ToString());
           XmlReader xr1=XmlReader.Create(sr1);
           return System.Windows.Markup.XamlReader.Load(xr1) as DataTemplate;
// Change the Header Template of TabItemExt based on FlowDirection 
        private void e_FlowDirectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            if (tab.FlowDirection == FlowDirection.LeftToRight)
                Tabitem1.HeaderTemplate= GetLeftToRightTemplate(); 
                Tabitem1.HeaderTemplate = GetRightToLeftTemplate();
        private void Button1_Click(object sender, RoutedEventArgs e)
            if (tab.FlowDirection == FlowDirection.LeftToRight)
                tab.FlowDirection = FlowDirection.RightToLeft;
                 tab.FlowDirection = FlowDirection.LeftToRight;

The following screenshot displays the FlowDirection in LeftToRight.

Figure 1: FlowDirection in LeftToRight

The following screenshot displays the FlowDirection in RightToLeft.

Figure 2: FlowDirection in RightToLeft


I hope you enjoyed learning about how to customize header of TabItemExt in WPF TabControlExt at runtime.

You can refer to our WPF TabControl feature tour page to know about its other groundbreaking feature representations and documentation. You can also explore our WPF TabControl Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment