Style TreeView Items

[James]

Hi, can't find anything on how to style tree view items.

Specifically I'm trying to control the indent of child items and shrink the whitespace around items. (and the gap between the expand arrow on the text)

[Lance | Manager Technical Support]

Hi James,

You can style the items using TreeViewItemStyle, but it's for coloring and Border styling. Take a look at the styling examples we have in the SDKExample Browser application.  For layout specific customization, this will require a custom ItemTemplate. 

I've written a demo for you that creates a very condensed TreeView, find it attached to this reply.

Take a look at the CustomLevelToMarginConverter class first. This is what provides the indentation amount depending on the level of the item in the tree:

public class CustomLevelToMarginConverter : IValueConverter
{
    public object Convert(object value, Type type, object parameter, CultureInfo culture)
    {
        var level = (uint)value;

        // Default for indent is ~40px, this example sets this to 20px
        return new Thickness(level * 20, 0, 0, 0);
    }

    public object ConvertBack(object value, Type type, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Here is the DataTemplate used for the ItemTemplate (notice the above converter on the Grid's Margin property) and also that I've set all the sizes to use 20px instead of the average 40px spacing.

<Grid HeightRequest="20"
    Margin="{Binding Level, Converter={StaticResource LevelToMarginConverter}}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <treeView:ExpandCollapseIndicator
        WidthRequest="20"
        HorizontalOptions="Center"
        HorizontalTextAlignment="Center"
        VerticalTextAlignment="Center"
        FontSize="Small"
        IsLoading="{Binding Path=IsLoading}"
        IsLoadOnDemandEnabled="{Binding Path=IsLoadOnDemandEnabled}"
        IsExpanded="{Binding Path=IsExpanded}"
        IsLeaf="{Binding Path=IsLeaf}"
        BackgroundColor="Transparent"
        Margin="0" />

    <treeView:ItemText
        Text="{Binding Item.Name}"
        Grid.Column="1"
        VerticalOptions="Center"
        FontSize="Small"
        Margin="0" />
</Grid>

Here's the result at runtime on Android




Wrapping Up

If you have issues or trouble, please open a support ticket here and attach your code so that we can investigate directly (you can't attach zip files to a forum thread). Or if you prefer and request it, I can convert this forum thread to a support ticket.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[James]

Thanks! This should be made into a topic in the documentation. It's VERY weak on this.

[Lance | Manager Technical Support]

Hello James,

Thank you for the feedback. I'll write up an article for the documentation today and submit a pull request for the team to merge it in the next documentation update (usually once a week).

At the very least I'll write up a KB article. The documentation will have a Knowledge Base section soon, however you can see the list of current KBs here and the open Pull Requests will have a few before they're merged.. There are only a few articles in there right now because it's a new feature that we're building out as topics like this pop up. 

If there is anything else you'd like to see in the documentation for the TreeView, please don't hesitate to open a ticket for it. I'll see your ticket come in and if I can't answer/write it, I'll assign it to the developers for the TreeView control.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Danny]

Greetings ..... In the Telerik Xamarin.2020.2.624.1 version it does not work, I have the following code but I cannot reduce the margin.

<dataControls:RadTreeView x:Name="treeView" ItemsSource="{Binding Source}" ItemTapped="TreeView_OnItemTapped" >
            <dataControls:RadTreeView.Resources>
            <ResourceDictionary>
                <!--estilo del iten-->
                <Style TargetType="treeView:ItemText">
                    <Setter Property="TextColor" Value="#F6FFFF"/>
                    <Setter Property="Margin" Value="0,0,0,0"/>
                    <Setter Property="Padding" Value="0,0,0,0"/>
                </Style>
                <!--estilo del indicador-->
                <Style TargetType="treeView:ExpandCollapseIndicator">
                        <Setter Property="TextColor" Value="#F6FFFF"/>
                </Style>
                </ResourceDictionary>
            </dataControls:RadTreeView.Resources>
            <!--estilo de todo el treeView-->
            <dataControls:RadTreeView.ItemStyle>
                <treeView:TreeViewItemStyle BackgroundColor="#4A99B8"
                                                   BorderColor="#62757C"
                                                   BorderWidth="1"
                                                   BorderLocation="All"/>
            </dataControls:RadTreeView.ItemStyle>
            
            <dataControls:TreeViewDescriptor DisplayMemberPath="Nombre"
                                             ItemsSourcePath="SubMenus"
                                             TargetType="{x:Type modelos:MMenu}" />
        </dataControls:RadTreeView>

 

Additionally, how would you add an image to the header and items. Also how would I give a specific color to the header and another color to the items.

[Didi]

Hi Danny,

Let me get straight to the questions:

1) Margin for TreeView Item:

I have tested the scenario using the code you have provided and there is no change in the margins, in both versions 2020.2.516.1 and 2020.2.624.1 

You can create a custom level to margin converter, using ItemTemplate, and set it to the expand/collapse indicator and TreeView Item or the layout used

public class CustomLevelToMarginConverter : IValueConverter
    {
        public object Convert(object value, Type type, object parameter, CultureInfo culture)
        {
            var level = (uint)value;

            // Default for indent is ~40px, this example sets this to 0px
            return new Thickness(level * 0, 0, 0, 0);
        }

        public object ConvertBack(object value, Type type, object parameter, CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }
}

and the TreeView ItemTemplate:

<telerikDataControls:TreeViewDescriptor.ItemTemplate>
                    <DataTemplate>
                        <Grid  BackgroundColor="{Binding Item.HighlightColor}">
                            <Grid Margin="{Binding Path=Level, Converter={StaticResource levelToMarginConverter}}"
                                  HeightRequest="40">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10"/>
                                    <ColumnDefinition  />
                                </Grid.ColumnDefinitions>
                                <treeView:ExpandCollapseIndicator FontSize="Medium"
                                                                  WidthRequest="10"
                                                                  VerticalTextAlignment="Center"
                                                                  IsLoading="{Binding Path=IsLoading}"
                                                                  IsLoadOnDemandEnabled="{Binding Path=IsLoadOnDemandEnabled}"
                                                                  IsExpanded="{Binding Path=IsExpanded}"
                                                                  IsLeaf="{Binding Path=IsLeaf}" />

                                <treeView:ItemText Grid.Column="1"
                                                   VerticalOptions="Center"
                                                   Text="{Binding Item.Name}" />
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </telerikDataControls:TreeViewDescriptor.ItemTemplate>
            </telerikDataControls:TreeViewDescriptor>

 

2) Image to the header and items:

How to add images in the TreeView you can check our TreeView examples in Telerik Xamarin Samples Application - TreeView FirstLook example

TreeView Customization example

TreeView LoadOnDemand example

3) Different style for the header and for the items:

You can use the TreeView ItemStyleSelector property. A sample example with the exact requirements you have can found at the following link in our documentation: https://docs.telerik.com/devtools/xamarin/controls/treeview/styling/treeview-style-selector 

Regards,
Didi
Progress Telerik