Styling the Controls

Customizing the look and feel of the Telerik controls, when using the NoXAML binary files, is easy and intuitive due to the provided theming mechanism. An important step to remember is to always base your custom styles on the default one for the theme.

This article is relevant, if you are using implicit styling with the NoXaml binaries. If you are using the StyleManager approach with Xaml dlls, check out the following article: Setting a Theme with StyleManager.

Basing a Custom Style on a Theme Default Style

When you create a style that targets a specific control, you should base it on the default style that the theme provides. This way you will make sure that all properties, apart from the changed ones, are inherited from the default style.

We have followed a naming convention where the key for every control's default style consists of the name of the control followed by a "Style" suffix. This would mean that the default style applied for the RadGridView control is with x:Key="RadGridViewStyle", the default one for the RadComboBox with x:Key="RadComboBoxStyle", etc. Example 1 shows how to create custom styles based on the default one for the RadComboBox control:

Example 1: Custom styles for RadComboBox

• XAML

<Style x:Key="CustomStyle" TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle}"> 
    <Setter Property="Foreground" Value="Green" /> 
</Style> 
 
<Style TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle}"> 
    <Setter Property="Foreground" Value="Red" /> 
</Style> 

The Telerik themes come also with Styles for some of the MS native controls as TextBox, CheckBox, Button etc. If you want to customize the Style of those controls and keep the Telerik theming you can use the same principle as in Example1. For example, the x:Key of the TextBox style is TextBoxStyle.

Styling Custom Controls

Note that custom controls will not automatically receive the inherited control's style. You will have to base your custom style on the default style of the control that is inherited.

Example 2: Adding Style for styling custom control

• XAML

<Application.Resources> 
  <ResourceDictionary> 
    <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="Themes/System.Windows.xaml" /> 
      <ResourceDictionary Source="Themes/Telerik.Windows.Controls.xaml" /> 
      <ResourceDictionary Source="Themes/Telerik.Windows.Controls.GridView.xaml" /> 
      <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Input.xaml" /> 
    </ResourceDictionary.MergedDictionaries> 
    <Style TargetType="local:MyCustomGrid" BasedOn="{StaticResource RadGridViewStyle}" /> 
  </ResourceDictionary> 
</Application.Resources> 

You will then need to set the control's DefaultStyleKey.

Example 3: Setting the DefaultStyleKey for styling custom control

• C#
• VB.NET

public class MyCustomGrid : RadGridView 
{ 
    public MyCustomGrid() 
    { 
        this.DefaultStyleKey = typeof(MyCustomGrid); 
    } 
} 

Public Class MyCustomGrid 
    Inherits RadGridView 
    Public Sub New() 
        Me.DefaultStyleKey = GetType(MyCustomGrid) 
    End Sub 
End Class 

Control Styles Dependencies

Example 4 lists the XAML files corresponding to the Telerik assemblies and the dependencies between them.

If you are using .NET Core, note that you have to use Telerik.Windows.Controls.RichTextBox.xaml instead of Telerik.Windows.Documents.xaml and Telerik.Windows.Controls.RichTextBoxUI.xaml.

Example 4: All XAML files corresponding to the Telerik assemblies

• XAML

<Application.Resources> 
    <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
 
            <!-- Telerik.Windows.Controls is used by all assemblies -->             
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.xaml" /> 
 
            <ResourceDictionary Source="Themes/System.Windows.xaml" />     
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Input.xaml" /> 
 
            <!-- Requires: System.Windows.xaml --> 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Navigation.xaml" /> 
 
             <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Chart.xaml" /> 
 
            <!-- Requires: Telerik.Windows.Controls.Input -->     
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Data.xaml" /> 
 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.DataVisualization.xaml" /> 
 
            <!-- Requires: Telerik.Windows.Controls.Navigation --> 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Docking.xaml" /> 
 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.Expressions.xaml" /> 
 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.FixedDocumentViewers.xaml" /> 
 
            <!-- Requires: Telerik.Windows.Controls.Input --> 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.GridView.xaml" /> 
 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.ImageEditor.xaml" /> 
 
            <!-- Requires: Telerik.Windows.Controls.Input, Telerik.Windows.Controls.Navigation --> 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.RibbonView.xaml" /> 
 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.RichTextBoxUI.xaml" /> 
 
            <!-- Requires: System.Windows, Telerik.Windows.Controls.Input, Telerik.Windows.Controls.Navigation --> 
            <ResourceDictionary Source="Themes/Telerik.Windows.Controls.ScheduleView.xaml" /> 
 
            <!-- Requires: Telerik.Windows.Controls.Input, Telerik.Windows.Controls.Navigation --> 
            <ResourceDictionary Source="Themes/Telerik.Windows.Documents.xaml" /> 
        </ResourceDictionary.MergedDictionaries> 
    </ResourceDictionary> 
</Application.Resources>