Edit this page

Styling the RadTreeViewItem

The RadTreeViewItem can be styled by creating an appropriate Style and setting it to the Style property of the control.

You have two options:

  • To create an empty style and set it up on your own.
  • To copy the default style of the control and modify it.

This topic will show you how to perform the second one.

Modifying the Default Style

Load your project in Expression Blend and open the User Control that holds the RadTreeView. There are two ways to copy the default style for the RadTreeViewItem :

  • If you have static RadTreeViewItems, you can select one of them in the 'Objects and Timeline' pane and choose Object -> Edit Style -> Edit a Copy from the menu. After that you have to apply the generated style to the other RadTreeViewItems.

  • You can also use the ItemContainerStyle property of the RadTreeView, when you have dynamic items. In this way you have to set the style only once and it will be applied to all of the RadTreeViewItems. To copy the default style via the ItemContainerStyle property select the RadTreeView holding the items and choose Object -> Edit Additional Styles -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy from the menu.

    When using ItemContainerStyle with static items, it will get applied only to the direct children of the RadTreeView - the top-level items. If you want their child items to have the same style you have to manually set the ItemContainerStyle property of their parents.

    When using the ItemContainerStyle with dynamic items, its value gets inherited through the hierarchy thanks to the HierarchicalDataTemplate. You are free to break the inheritance, when needed, by using multiple nested HierarchicalDataTemplates and by setting the ItemContainerStyle property of each of them.

    Choosing the style for an item depending on its position in the hierarchy can be done by using the ItemContainerStyleSelector property. Read more about selectors here.

    To see an example of defining the ItemContainerStyle look here.

You will be prompted for the name of the style and where to be placed.

If you choose to define the style in Application, it would be available for the entire application. This allows you to define a style only once and then reuse it where needed.

After clicking 'OK', Expression Blend will generate the default style of the RadTreeViewItem control in the Resources section of your User Control. The properties available for the style will be loaded in the 'Properties' pane and you will be able to modify their default values. You can also edit the generated XAML in the XAML View or in Visual Studio.

If you go to the 'Resources' pane, you will see an editable list of resources generated together with the style and used by it. In this list you will find the brushes, styles and templates needed to change the visual appearance of the RadTreeViewItem. Their names indicate to which part of the RadTreeViewItem's appearance they are assigned.

  • ControlSubItem_OuterBorder_MouseOver - a brush that represents the color of the RadTreeViewItem's border, when the mouse is over it.

  • ControlSubItem_Background_MouseOver - a brush that represents the background of the RadTreeViewItem, when the mouse is over it.

  • ControlSubItem_OuterBorder_UnFocus - a brush that represents the color of the RadTreeViewItem's border, when it is selected and not focused.

  • ControlSubItem_Background_UnFocus - a brush that represents the background of the RadTreeViewItem, when it is selected and not focused.

  • ControlSubItem_OuterBorder_Selected - a brush that represents the color of the RadTreeViewItem's border, when it is selected and not focused.

  • ControlSubItem_Background_Selected - a brush that represents the background of the RadTreeViewItem, when it is selected.

  • TreeView_LineColor - a brush that represent the color of the lines that connect the child nodes to their parent.

  • FocusBrushBlack - the color of the border around the focused RadTreeViewItem.

  • TreeViewItemDefaultTemplate - the ControlTemplate applied to the RadTreeViewItem.

  • RadTreeViewItemStyle - the Style generated for the RadTreeViewItem.

Changing the value of the resources can be done by clicking on the color indicator or the icon next to them.

Modify the resource to bring the desired appearance of the RadTreeViewItem.

Here is a snapshot of the result.

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy