Edit this page

Styling the RadPane

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

To copy the default style, load your project in Expression Blend and open the User Control that holds the RadDocking. In the 'Objects and Timeline' pane select the RadPane you want to style. 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.

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

For example, select the Background property and modify it. This will change the background of the RadPane's header when it is not selected.

There are four different control templates that are applied to the RadPane according to the position the element occupies: LeftTemplate, TopTemplate, RightTemplate, BottomTemplate. In order to make sure that the customizations are applied to every instance of the RadPane, you need to modify each template.

You can change the BorderBrush and the Foreground properties the same way.

  • DocumentTabChromeStyle - the style containing all the visual states concerning the pane.

  • PaneDocumentHostTemplate - contains a grid which includes the following:

    • Chrome - is of type ButtonChrome and has a default style DocumentTabChromeStyle which exposes many editable resources which will change the pane's appearance.

    • HeaderElement - is of type TabItemContentPresenter and represents the pane's header.

  • Normal - the pane's normal state (when it's not selected or highlighted).

  • Highlighted - is active when the mouse is located over a particular pane's header.

  • Selected - is active when a pane is selected.

  • SelectedHighlighted - is active when the mouse id over the selected pane's header.

To modify the Background of the RadPane's header when it is selected, you have to modify the template of the RadPane. To do that click on the palette-like breadcrumb icon and choose Edit Template -> Edit Current.

Go to the 'Triggers' pane and select the following trigger.

It is responsible for changing the background of the RadPane's Header when it is pinned. When the trigger is selected every change you made will be recorded by it. So from the 'Objects and Timeline' pane select the outerBorder control.

Modify its Background property.

You can modify the other triggers the same way depending on your liking.

Note that the RadPane control exposes four templates - Top, Left, Right and Bottom. The default template is the value of the Bottom one. To modify the other templates return to the stile by clicking again on the pallette-like breadcrumb icon.

To access the other templates select Object -> Edit Additional Templates from the menu.

After finishing the modifications, set the style to the desired RadPanes.

[XAML] Example 1: Applying a style to a specific RadPane

<telerik:RadPane Style="{StaticResource RadPaneStyle}">

Here is a snapshot of the final result.

See Also