Styling the Expander
If you need to change only the icon that is used to expand an item, you can use the ExpanderStyle property of the RadTreeView. The icon is a ToggleButton, so any style that can be applied to a ToggleButton can be applied to the icon too.
This tutorial will walk you through the common task of styling an expander.
On the snapshot below you can see how the final result will look like:
For the purpose of the following tutorial I will use the following treeview declaration:
-
Since the expander is a toggle button we need to create a style with TargetType - ToggleButton.
Declare a new style in your application (user control) resources and set the following common properties:
- Set the IsEnabled property to True;
- Set the IsTabStop property to False;
-
Change the cursor to be Hand
-
Next, we need to change the Template property of the ToggleButton (Expander). Add the following elements to your Template:
-
Set the ExpanderStyle property of your treeview:
As you can see from the next figure, the expander of the treeview is changed:
-
We are one more step closer to the final result. Next we should add some visual effects. For that purpose add the following elements to your expander template:
The ButtonOver grid will be animated when the mouse is position over the expander.
-
You should add two Triggers to the ControlTemplate's Triggers Collection. The first one is activated when the mouse is over the expander, and the second one is activated when the ToggleButton is checked:
When the mouse is over the expander the "ButtonOver" element must be visualized (set its Opacity property to 1), while the "Button" element must be hidden (set its Opacity property to 0). Respectively, when the mouse leaves the expander area, then the opposite operations must be performed. Here is how the "EnterActions" and "ExitActions" for the IsMouseOver trigger should look like:
When the ToggleButton is checked, then the "CollapseVisualOver" and "CollapseVisual" elements must be hidden (set their Opacity property to 0). When the ToggleButton is checked, then the both elements must be visualized (set their Opacity property to 1). Here is how the "EnterActions" and "ExitActions" for the IsChecked trigger should look like:
And here is the complete XAML for the "ControlTemplate.Triggers" section:
With the same success and effectiveness you could use Expression Blend for adding interactivity. Since the operations in this example are pretty simple I decided to write the triggers by hand.
Here is the result:
