This is a migrated thread and some comments may be shown as answers.

Change TreeViewItem style for hover/select

5 Answers 487 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
MiroslavStantic
Top achievements
Rank 1
Iron
MiroslavStantic asked on 21 Jan 2011, 12:39 PM
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.

5 Answers, 1 is accepted

Sort by
0
MiroslavStantic
Top achievements
Rank 1
Iron
answered on 21 Jan 2011, 02:00 PM
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.
0
Accepted
Tina Stancheva
Telerik team
answered on 21 Jan 2011, 06:08 PM
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
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
MiroslavStantic
Top achievements
Rank 1
Iron
answered on 01 Feb 2011, 05:21 PM
Thanks, that did it.
0
Amol
Top achievements
Rank 1
answered on 01 Dec 2011, 07:48 AM

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?

0
Petar Mladenov
Telerik team
answered on 05 Dec 2011, 04:23 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
TreeView
Asked by
MiroslavStantic
Top achievements
Rank 1
Iron
Answers by
MiroslavStantic
Top achievements
Rank 1
Iron
Tina Stancheva
Telerik team
Amol
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or