HierarchicalDataTemplate - Images

5 posts, 1 answers
  1. Marinko
    Marinko avatar
    4 posts
    Member since:
    Sep 2010

    Posted 19 Nov 2010 Link to this post

    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
  2. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Nov 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  3. UI for WPF is Visual Studio 2017 Ready
  4. Marinko
    Marinko avatar
    4 posts
    Member since:
    Sep 2010

    Posted 24 Nov 2010 Link to this post

    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
  5. Chadwick
    Chadwick avatar
    2 posts
    Member since:
    May 2011

    Posted 12 May 2011 Link to this post

    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

  6. Chadwick
    Chadwick avatar
    2 posts
    Member since:
    May 2011

    Posted 13 May 2011 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready