Category / Section
How to add TabItemHeader with row position in TabControlExt?
1 min read
In TabControlExt, you cannot find the row position of TabItemExt directly. You can find the row position of TabItemExt using TabItemheight and its count, also you can bind the value with TabItemHeader to display. The following workaround code example describes about how to find the row position of TabItemExt in TabControlExt.
XAML
<Window.Resources>
<local:headervalueconverter x:Key="headerconvert"> </local:headervalueconverter>
</Window.Resources>
<syncfusion:TabControlExt Name="tabcontolext" TabItemLayout="MultiLine" ItemsSource="{Binding Employees}" >
<syncfusion:TabControlExt.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}">
</TextBlock>
<TextBlock>
<TextBlock.Text>
<MultiBinding Converter="{StaticResource headerconvert}">
<Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=syncfusion:TabLayoutPanel}"/>
<Binding Path="Parent" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
</DataTemplate>
</syncfusion:TabControlExt.ItemTemplate>
<syncfusion:TabControlExt.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Content}">
</TextBlock>
</StackPanel>
</DataTemplate>
</syncfusion:TabControlExt.ContentTemplate>
</syncfusion:TabControlExt>
C#
Model.cs
class Employee
{
public List<Employee> employees = new List<Employee>();
public string Name { get; set; }
public string Content { get; set; }
public List<Employee> Employees
{
get { return employees; }
set { employees = value; }
}
}
ViewModel.cs
class Viewmodel : Employee
{
public Viewmodel()
{
Employees.Add(new Employee { Name = "Tab in row : ", Content = "Hello World" });
Employees.Add(new Employee { Name = "Tab in row : ", Content = "Hello World" });
Employees.Add(new Employee { Name = "Tab in row : ", Content = "Hello World" });
Employees.Add(new Employee { Name = "Tab in row : ", Content = "Hello World" });
}
}
MainWindow.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new Viewmodel();
tabcontolext.Loaded += tabcontolext_Loaded;
}
void tabcontolext_Loaded(object sender, RoutedEventArgs e)
{
TabLayoutPanel panel = VisualUtils.FindDescendant(tabcontolext, typeof(TabLayoutPanel)) as TabLayoutPanel;
if (panel != null)
{
}
}
}
public class headervalueconverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
double height = 18.96; // Default Tab Header height value
TabItemExt tab = VisualUtils.FindAncestor(values[1] as Visual, typeof(TabItemExt)) as TabItemExt;
TabLayoutPanel panel = VisualUtils.FindAncestor(values[1] as Visual, typeof(TabLayoutPanel)) as TabLayoutPanel;
double row = 0;
if (tab != null && panel != null)
{
Point point = tab.TranslatePoint(new Point(0, 0), panel);
row = Math.Round(point.Y / height);
}
return row.ToString();
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
The following screenshot displays the TabItemHeader with Row position.
Figure 1: TabItemHeader with Row position
