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.

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

  • Theme - is the theme applied to the control.

  • ButtonIconBackground_Normal - is the background brush applied to the left, right, top and bottom arrow elements in the compass.

  • ButtonIconForeground_Normal - is the foreground brush applied to the left, right, top and bottom arrow elements in the compass.

  • LeftIndicatorStyle - the style applied to the left indicator of the compass.

  • TopIndicatorStyle - the style applied to the top indicator of the compass.

  • RightIndicatorStyle - the style applied to the right indicator of the compass.

  • BottomIndicatorStyle - the style applied to the bottom indicator of the compass.

  • CenterIndicatorStyle - the style applied to the central indicator of the compass.

  • RootCompassStyle - the style containing the described elements.

To change the control's visual appearance you can edit the indicators' styles and templates. They all have a similar templating structure which consists of the following elements:

  • [Grid] - is the host container for the indicator's elements.

    • [ButtonChrome] - is the main part of the indicator's content. Read more about changing its default visual appearance here.

    • [Path] - represents the indicator's icon background arrow.

    • [Path] - represents the indicator's icon foreground arrow, shown on the top of the background arrow.

Here is an example of the above resources modified:

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

XAML

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

Here is a snapshot of the final result.

See Also