ItemsIndent and the Leaf Node

[Kyle]

ItemsIndent works well with nodes containing children.  But then on a leaf node it doesn't.  Is there a way to move the leaf node further to the left?  See image attached for depiction.

<UserControl x:Class="MyApp.ToolboxControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <DataTemplate x:Key="Level1">
            <Grid Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding ImageUrl}" Stretch="None"/>
                <TextBlock Grid.Column="1" Text="{Binding Name}"/>
            </Grid>
        </DataTemplate>

        <HierarchicalDataTemplate x:Key="Level2"
                                  ItemsSource="{Binding Items}"
                                  ItemTemplate="{StaticResource Level1}">
            <Grid Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding ImageUrl}" Stretch="None"/>
                <TextBlock Grid.Column="1" Text="{Binding Name}"/>
            </Grid>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="Level3"
                                  ItemsSource="{Binding Items}"
                                  ItemTemplate="{StaticResource Level2}">
            <Grid Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding ImageUrl}" Stretch="None"/>
                <TextBlock Grid.Column="1" Text="{Binding Name}"/>
            </Grid>
        </HierarchicalDataTemplate>
    </UserControl.Resources>
    <Grid>
        <telerik:RadTreeView ItemsSource="{Binding Items}"
                             ItemTemplate="{StaticResource Level3}"
                             ItemsIndent="10"/>
    </Grid>
</UserControl>

[Milena]

Hello Kyle,

Thank you for the picture and code snippet, I was able to understand your scenario and question.

Let me first try to explain the structure of the TreeViewItem. So, in the template you can find a IndentContainer (which is connected to the ItemsIndent property) and Expand ToggleButton (for expanding its children if any). We do not have different templates for the items if they have children or not. So, we should ensure that all treeview items with and without children are aligned, e.g. Item 2.1 and Item 2.2:
Item 1
Item 2.1 (leaf node)
Item 2.2
Item Level 3

However, for your scenario I can suggest you the following: you can set ItemsIndent property of the TreeView to 0 and control the indent trough the Margin of the TreeViewItem using ItemContainerStyle of the treeview:

<telerik:RadTreeView x:Name="xTreeView"

ItemsIndent="0"
ItemContainerStyle="{StaticResource ContainerStyle}"  />

<Style TargetType="telerik:RadTreeViewItem" BasedOn="{StaticResource RadTreeViewItemStyle}" x:Key="ContainerStyle">
    <Setter Property="Margin" Value="{Binding Path=ItemMargin}"/>
</Style>

Where ItemMargin is a property of the items in your ViewModel. 

For your convenience I implemented this approach in the attached project. Please take a look at it and let us know if it works for you.

Regards,
Milena
Telerik

 

 

[Kyle]

I get the following error on the BasedOn property at runtime.  Am I missing a reference to something?

Error: Cannot find resource named 'RadTreeViewItemStyle'. Resource names are case sensitive.

[Milena]

Hello Kyle,

I forgot to mention that I used Implicit Styles and NoXaml Binaries in the project I sent. So, you should edit the references in the project to point to Telerik\UI for WPF Q1 2015\Binaries.NoXaml\WPF40.

If you want to use StyleManager and  Xaml binaries, you should remove the BasedOn property from the style and MergedDictionaries from app.xaml file. But we recommend you using our implicit styles in combination with our NoXaml binaries.  You can read more about the benefits of using this approach in our blog post - XAML Theming – Implicit Styles versus StyleManager.

Please let us know in case any further assistance is needed.

Regards,
Milena
Telerik