How to change icons of treeview depending on expanded state?

[Debbie]

I have a treeview which uses a HierarchicalDataTemplate, consisting of an image and textblock within a stackpanel. The image source is determined by a converter which decides which image to return depending on the bound object type. This all works fine, but now I want to be able to show either an open or closed image for each object type, depending on whether the tree node is open or closed e.g. open folder image or closed folder image.
Is there any way to do this in the converter as well? How can I get to the treeviewitem itself to check if it is expanded or not?

Here is my HierarchicalDataTemplate:

<telerik:HierarchicalDataTemplate  x:Key="tvTelerikTreeTemplate" ItemsSource="{Binding Children}" >
    <StackPanel Orientation="Horizontal" ToolTipService.ToolTip="{Binding Path=Path}" >
        <Image Source="{Binding Converter={StaticResource ImageConverter}}" Width="15" Height="14"/>
        <TextBlock Text="{Binding Path=Name}" />
    </StackPanel>
</telerik:HierarchicalDataTemplate>

The converter literally checks the type of the object bound to that node and returns an image path depending on which one it wants to show.

Thanks in advance :)
Debbie

[Tihomir Petkov]

Hi Debbie,

Since you need to change the icon which is part of the template at run time, you cannot use a template selector because it is used only when the item is displayed for the first time. So, you should add a property to your business objects which specifies the image source and in the data template bind the image source to that property.

C#:

string ImageSource
{
    get;
    set;
}

...

XAML:

<!-- Remove the Converter you currently use -->
<Image Source="{Binding Path=ImageSource} Width=15 Height=14 />

Then subscribe for the ItemPrepared event of the TreeView and in the handler method attach one and the same handler to the Expanded and Collapsed events of the currently prepared TreeView item.

C#:

treeView.ItemPrepared += new EventHandler<RadTreeViewItemPreparedEventArgs>(treeView_ItemPrepared);

...

void treeView_ItemPrepared(object sender, RadTreeViewItemPreparedEventArgs e)
{
    e.PreparedItem.Expanded += new EventHandler<Telerik.Windows.RadRoutedEventArgs>(PreparedItem_IsExpandedChanged);
    e.PreparedItem.Collapsed += new EventHandler<Telerik.Windows.RadRoutedEventArgs>(PreparedItem_IsExpandedChanged);
}

Then in the handler for the Expanded and Collapsed events check the property of the underlying business object which specifies the source of the image in the header and change it according to the state of the item.

void PreparedItem_IsExpandedChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    RadTreeViewItem item = sender as RadTreeViewItem;
    if (item != null)
    {
        if (item.IsExpanded)
        {
            // set the image you want: (item.Item as YourBusinessObject).ImageSource = "newPath";
        }
        else
        {
            // same as above
        }
    }
}

Let me know if this helps.

Regards,
Tihomir Petkov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Debbie]

Thank you very much for the prompt response!

It all makes sense and I will let you know if I have success after I implement it - probably only next week unfortunately.

[Tihomir Petkov]

Hi Debbie,

OK, I hope this approach will solve your issue.

Regards,
Tihomir Petkov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.