Style the treegrid

[tonyb]

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.

regards

Tony

[Muthukumar Kalyanasundaram]

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 

 

<Page.Resources> 

    <local:ImageConverter x:Key="imageConverter" />     

</Page.Resources> 

 

<syncfusion:SfTreeGrid.Columns> 

   <syncfusion:TreeGridTextColumn Width="150" 

                                            MappingName="Name" 

                                            SetCellBoundValue="True"> 

     <syncfusion:TreeGridTextColumn.CellTemplate> 

        <DataTemplate> 

          <Grid> 

             <Grid.ColumnDefinitions> 

               <ColumnDefinition Width="Auto" /> 

                <ColumnDefinition Width="*" /> 

             </Grid.ColumnDefinitions> 

              <Image Grid.Column="0" 

                                    MinWidth="35" 

                                    Margin="1,6,0,6"    

                                    Source="{Binding Converter={StaticResource imageConverter}}" /> 

               <TextBlock Grid.Column="1" 

                                        Margin="2" 

                                        HorizontalAlignment="Left" 

                                        VerticalAlignment="Center" 

                                        Text="{Binding Path=Value}" /> 

         </Grid> 

     </DataTemplate> 

   </syncfusion:TreeGridTextColumn.CellTemplate> 

</syncfusion:TreeGridTextColumn> 

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; 

    } 

} 

Sample: http://www.syncfusion.com/downloads/support/forum/131182/ze/SFTreeGrid_Demo1205958555 

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. 

Regards, 

Muthukumar K 

[tonyb]

Hi Muthukuma

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

regards

Tony Broome

[Muthukumar Kalyanasundaram]

Hi Tony, 

 

Thanks for the update. Please let us know if you need any other assistance. 

 

Regards, 

Muthukumar K 

[Dave Brooks]

This is a really great sample, thank you.

Is there any way to style the expander button (the + sign)?

[Muthukumar Kalyanasundaram]

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"> 

        <Setter.Value> 

            <ControlTemplate TargetType="syncfusion:TreeGridExpander"> 

                <Border Background="Transparent" 

                BorderBrush="{TemplateBinding BorderBrush}" 

                BorderThickness="{TemplateBinding BorderThickness}"> 

 

                    <VisualStateManager.VisualStateGroups> 

                        <VisualStateGroup x:Name="ExpandedState"> 

                            <VisualState x:Name="Expanded"> 

                                <Storyboard> 

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CollapseCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)"> 

                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"> 

. . . . . . 

. . . . . . 

. . . . . .  

                    <Grid Background="{TemplateBinding Background}"> 

                        <Path x:Name="PART_CollapseCellPath" 

                        Margin="1" 

                        Data="F1M0.697,8.01L0,7.293 3.373,4.005 0,0.717 0.697,0 4.804,4.005z" 

                        Fill="{TemplateBinding Foreground}" 

                        Stretch="Uniform"  

                        RenderTransformOrigin="0.5,0.5" 

                        Visibility="Collapsed"/> 

                        <Path x:Name="PART_ExpanderCellPath" 

                        Margin="1" 

                        Data="F1M4.005,4.805L0,0.698 0.717,0 4.005,3.373 7.293,0 8.01,0.698z" 

                        Fill="{TemplateBinding Foreground}" 

                        RenderTransformOrigin="0.5,0.5" 

                        Stretch="Uniform" 

                        Visibility="Visible"/> 

                    </Grid> 

                </Border> 

            </ControlTemplate> 

        </Setter.Value> 

    </Setter> 

</Style> 

Sample: http://www.syncfusion.com/downloads/support/forum/131182/ze/SFTreeGrid_Demo1936266937.zip 

Please let us know if you have any concerns. 

Regards, 

Muthukumar K 

[Dave Brooks]

Terrific.

Thank you very much.

[Jai Ganesh S]

Hi Dave, 

 

Thank you for the update. 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Jai Ganesh S