Edit this page

Styling the Compass

The compass that you see, when rearranging the containers in the RadDocking control, is represented by the Compass control. Therefore you can't directly create a style for it in Expression Blend and you have to use a dummy control to create the style.

Open your RadDocking project in Expression Blend and select the RadDocking you want to modify. On the same scene you should place a Compass control, that will be used as a dummy. To do so choose the 'Assets' tab. From the 'Controls -> All' section select the Compass control:

With your mouse create a new instance of the control on the scene:

Now select the newly created control. Then select 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 Compass control will be created and the properties that can be set through it will be loaded in the 'Properties' pane.

Select the Background property and change its value.

Select the BorderBrush property and modify it.

To change the color of the navigation arrows you have to go into the template. To do that click on the breadcrumb item with the palette-like icon and choose Edit Template -> Edit Current.

From the 'Objects and Timeline' pane you have to select each of the four paths:

and change its Fill property.

After finishing with your modifications, remove the dummy control and set the style to the RadDocking's CompassStyle property.

<telerik:RadDocking x:Name="radDocking"
                 CompassStyle="{StaticResource CompassStyle}">
    ...
</telerik:RadDocking>

Here is a snapshot of the final result.

See Also