How to customize header of TabItemExt in WPF TabControlExt at runtime?
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 be “RightToLeft” and “LeftToRight” respectively.
C#
public partial class MainWindow : Window
{
TabControlExt tab;
TabItemExt Tabitem1;
public MainWindow()
{
InitializeComponent();
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();
tab.Items.Add(Tabitem1);
stack1.Children.Add(Button1);
stack1.Children.Add(tab);
grid.Children.Add(stack1);
Window1.AddChild(grid);
Tabitem1.HeaderTemplate = GetLeftToRightTemplate ();
tab.FlowDirectionChanged += e_FlowDirectionChanged;
}
public DataTemplate GetLeftToRightTemplate ()
{
XNamespace ns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation";
XNamespace x = "http://schemas.microsoft.com/winfx/2006/xaml";
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 = "http://schemas.microsoft.com/winfx/2006/xaml/presentation";
XNamespace x = "http://schemas.microsoft.com/winfx/2006/xaml";
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();
else
Tabitem1.HeaderTemplate = GetRightToLeftTemplate();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
if (tab.FlowDirection == FlowDirection.LeftToRight)
tab.FlowDirection = FlowDirection.RightToLeft;
else
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
Conclusion
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
