Edit this page

Styling the Visual Cue

The dropping area that you see, when rearranging the containers in the RadDocking control, is represented by the VisualCue 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 VisualCue control, that will be used as a dummy. To do so choose the Assets tab. From the 'Controls -> All' section select the VisualCue control:

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

After drawing the VisualCue, you won't be able to see it 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 VisualCue 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.

  • Compass_VisualCue_Background - is a brush representing the controls's background color.

  • Compass_VisualCue_BorderBrush - is the border brush used by the control.

  • Compass_VisualCue_BorderThickness - is the thickness of the border brush used by the control.

  • VisualCueStyle - represents the control's style.

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 VisualCueStyle property.

XAML

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

Here is a snapshot of the final result.

See Also