Change TreeViewItem style for hover/select

[MiroslavStantic]

Hello,

I'm binding the background color of items in relation to data. Selecting/hovering over items causes background color to change. I would like to leave only the border to indicate hover and selection (or a similar solution that allows for background color to be seen).

I know I need to supply my own style, but I don't know how to do that exactly.

[MiroslavStantic]

Actually, in the hierarchical data template I have a StackPanel and its background color is databound, and it's visible over the item's background. But it would still be good to know how to change the default style.

[Tina Stancheva]

Hi Miroslav Stantic,

You can edit the default ControlTemplate of the RadTreeViewItem in ExpressionBlend following the approach described here. In the RadTreeViewItem template there are MouseOverVisual  and SelectedVisual elements, that define the borders displayed during the Selected and MouseOver visual states of the control.

When you edit the ControlTemplate of the RadTreeViewItem in Blend, all related resources should be generated as well, including the following brushes:

• ControlSubItem_OuterBorder_MouseOver - defines the MouseOver state outer border color
• ControlSubItem_InnerBorder_MouseOver - defines the MouseOver state inner border color
• ControlSubItem_Background_MouseOver - defines the MouseOver state background color
• ControlSubItem_OuterBorder_Selected - defines the Selected state outer border color
• ControlSubItem_InnerBorder_Selected - defines the Selected state inner border color
• ControlSubItem_Background_Selected - defines the Selected state background color

Since the MouseOver/Selected background colors are defined by the ControlSubItem_Background_MouseOver and ControlSubItem_Background_Selected LinearGradientBrushes, if you want to keep the borders and remove only the background colors, you can replace these brushes with SolidColorBrushes with Transparent color:

<SolidColorBrush x:Key="ControlSubItem_Background_MouseOver"
                         Color="Transparent" />
....
<SolidColorBrush x:Key="ControlSubItem_Background_Selected"
                         Color="Transparent" />

I attached a sample project illustrating this approach. I hope it helps. Still, if you need more info, please let us know.

Best wishes,
Tina Stancheva
the Telerik team

[MiroslavStantic]

Thanks, that did it.

[Amol]

That I did, this is worked. Thanks.

Now I want to change (+) and (-) icon, applying to folder icon for folders.
How can those icons and adding new icon?

[Petar Mladenov]

Hi Amol,

 Please check out the attached project where a File/Folder Hierarchy is demonstrated with RadTreeView. Could this fit in your scenario ?

Kind regards,
Petar Mladenov
the Telerik team