Edit this page

Styling the Pane Header

As the PaneHeader is created dynamically you cannot set the style for it declaratively. The easiest way to do this is to create a theme for your RadDocking control, add the created style for the PaneHeader in it and apply the theme to the control. To learn how to do it read this topic.

To create the needed style for the Theme you should use a dummy control. This will allow you to copy the default style for the PaneHeader and modify it to your liking. To do so open the UserControl that hosts your RadDocking in Expression Blend.

From the 'Assets' tab select Controls -> All -> PaneHeader.

Draw one dummy control of this type somewhere on the scene.

Select it and from the menu choose *Object -> Edit Style -> Edit a Copy. *You will be prompted for the name of the style and where to be placed within your application.

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, a style for your PaneHeader control will be created.

  • Content - is of type Grid and represents the host container of the pane's header.

  • TitleElement - is a ContentControl showing the pane's title.

  • HeaderDropDownMenu - is of type RadToggleButton and toggles a drop-down menu.

  • Grid - contains the following buttons:

    • HeaderPinButton - is of type RadButton and is used to pin the pane to its current state.

    • HeaderUnPinButton - is of type RadButton and unpins the pane.

  • HeaderCloseButton - is of type RadButton and is the pane's close button.

  • Norma - the button's normal state.

  • Disabled - is active when the button cannot be pressed.

  • MouseOver- is active when the mouse is over the button.

  • Pressed - is active when the button is pressed.

  • ButtonIconBackground_StateName - defines the background brush used for all the header's buttons (described above) in the specified state - one of the common states in a RadButton's default template (also mentioned above).

  • ButtonIconForeground_StateName - defines the foreground brush used for all the header's buttons (described above) in the specified state.

For more information about the RadButton's styles and templates, look here.

The most of the customizations of the PaneHeader are to be made in the template of the control. To modify it click on the palette-like breadcrumb icon and select EditTemplate -> Edit Current.

From the 'Objects and Timeline' pane select the RootVisual control.

Modify its Background property. This will change the background color of the PaneHeader control.

To change the background color of the PaneHeader, when it is selected you have to modify the trigger responsible for that. From the 'Triggers' pane select the one available trigger.

When the trigger is selected every change you made will be recorded by it. So from the 'Objects and Timeline' pane select the RootVisual control again and change its value.

To change the visual appearance of the PaneHeader's Buttons you have to modify their templates. For example select the HeaderCloseButton.

Right-Clik on it and choose Edit Template -> Edit Current. This will bring you into editing the template of the button. From the 'Triggers' pane select the trigger responsible for changing the appearance of the button when the mouse is over it.

From the 'Objects and Timeline' select the Highlight control.

Modify its Background and BroderBrush properties. This will change the background and the color of the border of the button.

You can modify the other triggers used in the button's template as well.

After finishing with the modifications, you have to add the created style to the theme for your RadDocking. To learn how take a look at the Theming the Pane Header topic.

After moving the style to the theme you can remove it from the resources of your UserControl. Also don't forget to delete the dummy control that you have created.

Here is a snapshot of the final result.

See Also