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.

Go to the 'Resources' pane and see the resources generated for your style.

The default pane header's template consists of the following elements:

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

Each of the buttons defined in the header's default template has a corresponding default style. To change the header's appearance you can modify the brush resources used in the different states. The states in each of these buttons default templates are as follows:

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

For each state a couple of brushes are available:

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

Here is an example of the described resources modified.

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