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.

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.

  • CompassStyle - 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 a ButtomChrome's 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 CompassStyle property.

XAML

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

Here is a snapshot of the final result.

See Also