HierarchicalDataTemplate - Images

[Marinko]

Hi

I would like to bind the TreeView using HierarchicalDataTemplate:

 

 

 

<HierarchicalDataTemplate x:Key="rufTreeNode" ItemsSource="{DynamicResource Nodes}" DataType="{x:Type TreeRuf:RufTreeNode}">

 

 

 

 

 

</HierarchicalDataTemplate>

 

My question is how I can bind the DefaultImageSrc, ExpandedImageSrc. All I want is just to bind your existing control (ItemTemplate) to my data using HierarchicalDataTemplate. There is an unlimited level of subnodes. Could you provide the xaml for ItemTemplate or just modify my example above?

Kind regards,

Marinko

[Tina Stancheva]

Hello Marinko,

In order to bind the RadTreeViewItem DefaultImageSrc, ExpandedImageSrc and SelectedImageSrc properties, you can set the RadTreeView ItemContainerStyle property like so:

<telerik:RadTreeView x:Name="myTreeView"
                  ItemTemplate="{StaticResource rufTreeNode}">
    <telerik:RadTreeView.ItemContainerStyle>
        <Style TargetType="telerik:RadTreeView">
            <Setter Property="DefaultImageSrc"
          Value="DefaultImage" />
      <Setter Property="ExpandedImageSrc"
          Value="ExpandedImage" />
        </Style>
    </telerik:RadTreeView.ItemContainerStyle>
</telerik:RadTreeView>

Give this approach a try and let me know if it works for you.

All the best,
Tina Stancheva
the Telerik team

[Marinko]

Thanks for your feedback. TargetType should be RadTreeViewItem. So I used the following example

http://www.telerik.com/help/wpf/radtreeview-howto-bind-hierarchical-data-style-binding.html

and it worked fine :-)

Kind regards,

Marinko

[Chadwick]

I have multiple templates being bound as shown here:

 

<HierarchicalDataTemplate x:Key="NormalDataEntryTemplate" ItemsSource="{Binding Path=Children}" >
  <StackPanel Orientation="Horizontal">
     <TextBlock Text="{Binding DisplayName}" ToolTip="{Binding ToolTip}" Margin="6,0" />
    </StackPanel>
</HierarchicalDataTemplate>

<HierarchicalDataTemplate x:Key="RepeatableDataEntryTemplate" ItemsSource="{Binding Path=Children}">

  <StackPanel Orientation="Horizontal">

    <TextBlock Text="{Binding DisplayName}" ToolTip="{Binding ToolTip}" Margin="6,0" />

  </StackPanel>

</HierarchicalDataTemplate>

How can I vary the icons (expanded and normal) for these two items? It seems the solution below only adds all the same icon:

 

 

 

 

 

 

 

<telerik:RadTreeView.ItemContainerStyle>

    <Style TargetType="{x:Type telerik:RadTreeViewItem}">

        <Setter Property="IsEnabled" Value="{Binding Path=Visible}" />

        <Setter Property="DefaultImageSrc" Value="{StaticResource FolderClosedIcon}" />


        <Setter Property="ExpandedImageSrc" Value="{StaticResource FolderIcon}" />
    </Style>

</telerik:RadTreeView.ItemContainerStyle>

For the "RepeatableDataEntryTemplate" above, I'd like to use this as the "DefaultImageSrc":

<Setter Property="DefaultImageSrc" Value="{StaticResource RepeatableIcon}" />

Thanks,
Chadwick

[Chadwick]

Never mind, I figured out how to do it....

Bind the items to a view model and change the icon on the fly there:

<Setter Property="DefaultImageSrc" Value="{Binding DefaultImageSrc}" />
<Setter Property="ExpandedImageSrc" Value="{Binding ExpandedImageSrc}" />

Hope that helps someone else who may look for the same answer.

Chadwick