Edit this page

Styling the RootCompass

The indicators that you see in the four ends of the RadDocking control, when rearranging the containers in it, is represented by the RootCompass 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 RootCompass control, that will be used as a dummy. To do so choose the Assets tab. From the 'Controls -> All' section select the RootCompass 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 RootCompass control will be created and the properties that can be set through it will be loaded in the 'Properties' pane.

Select the BorderBrush property and change its value.

To change the Background of the RootCompass indicators and the fill of their arrows you have to go to the template. To do this click on the pallete-like breadcrumb item and select Edit Template -> Edit Current.

From the 'Objects and Timeline' pane select each of the Borders representing the indicators:

and modify their Background properties.

To change the fill of the arrows, select the Path control in each of thew borders:

and modify its Fill property.

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

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

Here is a snapshot of the final result.

See Also