Change TreeViewItem style for hover/select

6 posts, 1 answers
  1. Miroslav Stantic
    Miroslav Stantic avatar
    42 posts
    Member since:
    Oct 2003

    Posted 21 Jan 2011 Link to this post

    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.
  2. Miroslav Stantic
    Miroslav Stantic avatar
    42 posts
    Member since:
    Oct 2003

    Posted 21 Jan 2011 Link to this post

    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.
  3. DevCraft banner
  4. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 21 Jan 2011 Link to this post

    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>>
  5. Miroslav Stantic
    Miroslav Stantic avatar
    42 posts
    Member since:
    Oct 2003

    Posted 01 Feb 2011 Link to this post

    Thanks, that did it.
  6. Amol
    Amol avatar
    1 posts
    Member since:
    Dec 2011

    Posted 01 Dec 2011 Link to this post

    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?

  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Dec 2011 Link to this post

    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 >>

Back to Top
DevCraft banner