Articles in this section
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:

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