Telerik blogs

Sometimes the TreeView is used in scenarios where the expander style must be styled in custom fashion. Prior 2010 Q3 SP1 there was no easy way to dynamically change the expander style of the TreeView or particular item.

TreeView’s ExpanderStyle

So we decided to extend the functionality provided by the TreeView. Prior this enhancement changes to the ExpanderStyle property during runtime would not affect already visible items. The property now supports dynamic values and data binding. This way you can easily change the style of the expander of all items in the hierarchy during runtime.

Item’s ExpanderStyle

Working only with the TreeView’s ExpanderStyle you can’t restyle the expander of particular item, i.e. hide or show the expander. So we added new ExpanderStyle property of the TreeViewItem itself. This property has greater priority than the TreeView’s ExpanderStyle. It propagates its value to all item’s children regardless if they are already created, not yet visible or virtualized.

Dynamic ExpanderStyle Change

Sometimes you may need to hide the expander of particular item dynamically and show it again later. This can be easily done by changing the ExpanderStyle with style for visible expander and style for invisible expander later on.

In Silverlight you could use Telerik’s ContainerBinding class and bind to the data object.

<telerik:ContainerBindingCollection x:Key="ItemBindings">
   
<telerik:ContainerBinding PropertyName="ExpanderStyle"
        Binding
="{Binding MyCustomExpanderStyle, Mode=TwoWay}"/>
</
telerik:ContainerBindingCollection>
        
<telerik:HierarchicalDataTemplate x:Key="ItemsTemplate" ItemsSource="{Binding Items}"
        telerik:ContainerBinding.ContainerBindings
="{StaticResource ItemBindings}">
   
<TextBlock Text="{Binding Name}"/>
</
telerik:HierarchicalDataTemplate>

In WPF you can use data binding in the style setter of the item’s style.

<Style TargetType="telerik:RadTreeViewItem">
    <Style
.Setters>
        <Setter Property
="ExpanderStyle"
                Value
="{Binding MyCustomExpanderStyle, Mode=TwoWay}"/>
    <
/Style.Setters>
</
Style>

So I’ve created a sample application you can experiment with by your own . Actually bellow are two attached projects – one for Silverlight and one for WPF.

 

You can download the sample SL application from here.

You can download the sample WPF application from here.

Telerik TreeView for Silverlight

Telerik TreeView for WPF

And download a trial version of Telerik RadControls from here:

RadControls for Silverlight - Download Trial

RadControls for WPF - Download Trial


About the Author

Hristo Milyakov

 is Software Developer in Telerik XAML Team

Related Posts

Comments

Comments are disabled in preview mode.