ItemsIndent and the Leaf Node

4 posts, 0 answers
  1. Kyle
    Kyle avatar
    11 posts
    Member since:
    Dec 2013

    Posted 11 Mar 2015 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 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>
  2. Milena
    Admin
    Milena avatar
    204 posts

    Posted 12 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Kyle
    Kyle avatar
    11 posts
    Member since:
    Dec 2013

    Posted 12 Mar 2015 in reply to Milena Link to this post

    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.
  5. Milena
    Admin
    Milena avatar
    204 posts

    Posted 13 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top