Category / Section
How to change the style of each Column Header in MultiColumnTreeview?
1 min read
This article describes how to change the style of each Column Header in TreeViewAdv Columns.
TreeViewColumn.Header
Use Header property of TreeViewColumn to change the style of each column header in TreeViewAdv Control.
The following code example demonstrates the same by changing the foreground colour of each column header.
XAML
<syncfusion:TreeViewAdv MultiColumnEnable="True"> <syncfusion:TreeViewAdv.DataContext> <local:TreeView/> </syncfusion:TreeViewAdv.DataContext> <syncfusion:TreeViewItemAdv > <syncfusion:TreeViewItemAdv.Header> <local:TreeView TreeHeader ="Item 1" Description="Description about Item 1"/> </syncfusion:TreeViewItemAdv.Header> </syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv.Header> <local:TreeView TreeHeader ="Item 2" Description="Description about Item 2"/> </syncfusion:TreeViewItemAdv.Header> </syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv.Header> <local:TreeView TreeHeader ="Item 3" Description="Description about Item 3"/> </syncfusion:TreeViewItemAdv.Header> </syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv.Header> <local:TreeView TreeHeader ="Item 4" Description="Description about Item 4"/> </syncfusion:TreeViewItemAdv.Header> </syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv> <syncfusion:TreeViewItemAdv.Header> <local:TreeView TreeHeader ="Item 5" Description="Description about Item 5"/> </syncfusion:TreeViewItemAdv.Header> </syncfusion:TreeViewItemAdv> <syncfusion:TreeViewAdv.Columns > <syncfusion:TreeViewColumnCollection > <syncfusion:TreeViewColumn Width="200" DisplayMemberBinding="{Binding Path=Header.TreeHeader, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:TreeViewItemAdv}}}"> <syncfusion:TreeViewColumn.Header> <TextBlock Text="Header" Foreground="Red" /> </syncfusion:TreeViewColumn.Header> </syncfusion:TreeViewColumn> <syncfusion:TreeViewColumn Width="200" DisplayMemberBinding="{Binding Path=Header.Description, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:TreeViewItemAdv}}}"> <syncfusion:TreeViewColumn.Header> <TextBlock Text="Description" Foreground="Green"/> </syncfusion:TreeViewColumn.Header> </syncfusion:TreeViewColumn> </syncfusion:TreeViewColumnCollection> </syncfusion:TreeViewAdv.Columns> </syncfusion:TreeViewAdv>
C#
public class TreeView { private string header; public string TreeHeader { get { return header; } set { header = value; } } private string description; public string Description { get { return description; } set { description = value; } } }
The output for above code is shown below: