We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Style the treegrid

How do you style the treegrid control to look like a normal treeview control. Looking at the picture on your web page ( Fully Customizable) this looks possible. Is there a example somewhere I can have a look at.



7 Replies

MK Muthukumar Kalyanasundaram Syncfusion Team June 28, 2017 08:51 AM UTC

Hi Tony, 

Thank you for contacting Syncfusion support. 

We have checked your query.  Based on your requirement, we have prepared sample. In the sample, we have loaded the treeGrid  with image and textblock control in TreeGridTextColumn as shown like below code, 

Code Snippet: Xaml 
    <local:ImageConverter x:Key="imageConverter" />     
   <syncfusion:TreeGridTextColumn Width="150" 
               <ColumnDefinition Width="Auto" /> 
                <ColumnDefinition Width="*" /> 
              <Image Grid.Column="0" 
                                    Source="{Binding Converter={StaticResource imageConverter}}" /> 
               <TextBlock Grid.Column="1" 
                                        Text="{Binding Path=Value}" /> 

Code Snippet: C# 
internal class ImageConverter : IValueConverter 
    public object Convert(object value, Type targetType, object parameter, string language) 
        var datacontext = value as DataContextHelper; 
        if (datacontext.Value.ToString() == "Inbox" || datacontext.Value.ToString() == "Drafts" || datacontext.Value.ToString() == "Sent Items" 
            || datacontext.Value.ToString() == "Deleted Items" || datacontext.Value.ToString() == "Calendar" || datacontext.Value.ToString() == "Contacts") 
            return "ms-appx:///Images///" + datacontext.Value.ToString() + ".png"; 
        return "ms-appx:///Images///" + "Folder.png"; 
    public object ConvertBack(object value, Type targetType, object parameter, string language) 
        return null; 

And also you can refer the TreeViewDemo sample in the installed Essential Studio in the below location, 

Path location: \..\AppData\Local\Syncfusion\EssentialStudio\{installed version}\UWP\SampleBrowser\SfTreeGrid\Views\Getting Started. 

Please let us know if you have any query. 

Muthukumar K 

TO tonyb June 30, 2017 06:41 AM UTC

Hi Muthukuma

Just what I was looking for , thanks for your help.


Tony Broome

MK Muthukumar Kalyanasundaram Syncfusion Team July 2, 2017 07:16 AM UTC

Hi Tony, 
Thanks for the update. Please let us know if you need any other assistance. 
Muthukumar K 

DB Dave Brooks March 24, 2018 05:13 PM UTC

This is a really great sample, thank you.
Is there any way to style the expander button (the + sign)?

MK Muthukumar Kalyanasundaram Syncfusion Team March 26, 2018 12:19 PM UTC

Hi Dave, 

Thanks for the update. Yes. You can achieve your requirement by customizing the style of TreeGridExpander as like below code, 

Code Snippet: XAML 

<Style TargetType="syncfusion:TreeGridExpander"> 
    <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="BorderBrush" Value="Gray" /> 
    <Setter Property="BorderThickness" Value="1,1,1,1" /> 
    <Setter Property="FontSize" Value="12" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="Template"> 
            <ControlTemplate TargetType="syncfusion:TreeGridExpander"> 
                <Border Background="Transparent" 
                BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}"> 
                        <VisualStateGroup x:Name="ExpandedState"> 
                            <VisualState x:Name="Expanded"> 
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CollapseCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)"> 
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
. . . . . . 
. . . . . . 
. . . . . .  
                    <Grid Background="{TemplateBinding Background}"> 
                        <Path x:Name="PART_CollapseCellPath" 
                        Data="F1M0.697,8.01L0,7.293 3.373,4.005 0,0.717 0.697,0 4.804,4.005z" 
                        Fill="{TemplateBinding Foreground}" 
                        <Path x:Name="PART_ExpanderCellPath" 
                        Data="F1M4.005,4.805L0,0.698 0.717,0 4.005,3.373 7.293,0 8.01,0.698z" 
                        Fill="{TemplateBinding Foreground}" 

Please let us know if you have any concerns. 

Muthukumar K 

DB Dave Brooks March 29, 2018 09:42 AM UTC

Thank you very much.

JG Jai Ganesh S Syncfusion Team March 30, 2018 12:45 AM UTC

Hi Dave, 
Thank you for the update. 
Please let us know if you need further assistance on this. 
Jai Ganesh S 

Live Chat Icon For mobile
Up arrow icon