Edit this page

Styling the Predefined Dialogs

This article explains how you could customize the look and feel of the predefined dialog windows. We will discuss the following topics:

Modifying the Default Style

To style the predefined dialogs of the RadWindow static class, you have to call them via the overload that takes a DialogParameters object as an argument. Learn more about the predefined dialogs here.

In this article's example we will use RadAlert, but the approach is the same for RadConfirm and RadPrompt.

First, you will need to obtain the default style that targets RadAlert. To learn how to do this, take a look at the Editing Control Templates topic. The extracted RadAlertStyle will be similar to the following:

[XAML] Example 1: Default RadAlertStyle

<Style x:Key="RadAlertStyle" TargetType="telerik:RadAlert">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="MinWidth" Value="275"/>
    <Setter Property="MaxWidth" Value="500"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadAlert">
                <!--...-->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

If you are not using Implicit Styles to style the controls, you will need to copy all the referenced inside RadAlertStyle StaticResources to your project as well (such as AlertIconTemplate).

Now you can make modifications in the template such as removing the OK button, changing the Alert icon, etc.

And finally, you have to pass the customized RadAlertStyle to the predefined dialog via the DialogParameters object and its ContentStyle property.

[C#] Example 2: Applying customized Style to RadAlert

DialogParameters parameters = new DialogParameters();
parameters.ContentStyle = this.Resources["RadAlertStyle"] as Style;
parameters.Content = "Hello";
RadWindow.Alert(parameters);

[VB.NET] Example 2: Applying customized Style to RadAlert

Dim parameters As New DialogParameters()
parameters.ContentStyle = TryCast(Me.Resources("RadAlertStyle"), Style)
parameters.Content = "Hello"
RadWindow.Alert(parameters)

Figure 1 shows the final result.

Figure 1: RadAlert with custom Style

Applying IconTemplate

With the Q1 2016 release of UI for Silverlight the IconTemplate property was introduced. By using it you are now able to easily change the icon of the predefined windows.

Basically, a valid DataTemplate needs to be created and that Template should be passed to the predefined windows via the DialogParameters and its IconTemplate property:

[XAML] Example 3: Defining the DataTemplate

<DataTemplate x:Key="IconTemplate">
    <Image Source="telerik.png" Stretch="Fill" Width="22" Height="22"/>
</DataTemplate>

[C#] Example 4: Applying the DataTemplate to the IconTemplate property

RadWindow.Alert(new DialogParameters()
{
    Content = "Hello",
    IconTemplate = this.Resources["IconTemplate"] as DataTemplate
});

[VB.NET] Example 4: Applying the DataTemplate to the IconTemplate property

RadWindow.Alert(New DialogParameters() With
{
    .Content = "Hello",
    .IconTemplate = TryCast(Me.Resources("IconTemplate"), DataTemplate
)})

Figure 2 shows the final result.

Figure 2: RadAlert with set IconTemplate

See Also