New to Telerik UI for WPF? Download free 30-day trial

Editing Control Templates in Telerik UI for WPF

This article demonstrates two approaches on how to extract and edit the default control templates of the Telerik UI for WPF controls:

Extracting Control Templates Manually from the Theme XAML File

The XAML files with the different themes for all controls are located in the Themes.Implicit folder. You can find this folder in the Telerik UI for WPF installation directory, for example, C:\Program Files (x86)\Progress\Telerik UI for WPF R2 2021\Themes.Implicit.

As of 2021 R2 release version, the folder WPF40's name is changed to WPF. The .xaml files inside the folder are meant for .NET Framework 4.0 and .NET Framework 4.5. A folder named NetCore was introduced, which targets the .NET Core 3.1, .NET 5, .NET 6 and .NET 7 frameworks.

The following example shows how to extract the RadListBox control template for the Office_Black theme:

  1. Navigate to the Telerik UI for WPF installation directory and open the Themes.Implicit\WPF\OfficeBlack\Themes folder.

    You can choose any of the available themes in the WPF folder. The folder names correspond to the theme names.

  2. Locate the Telerik.Windows.Controls.xaml file and open it with your favorite editor.

    To find the XAML file for any control, you need to know the name of the assembly that contains the control. The name of the XAML file corresponds to the name of the assembly.

    Figure 1: Navigating to the required XAML file

    Navigating to the required XAML file

    Always extract the desired control template from the theme that you use in your application. For example, if your application uses the Office Black theme, extract the control template from the Themes.Implicit\WPF\OfficeBlack\Themes folder. The control templates are different for each theme. Using the wrong template may lead to errors or undesired behavior.

  3. In the editor, find the default style for the RadListBox control. It is called RadListBoxStyle.

    The default styles follow the convention name of the control + Style, for example, RadListBoxStyle.

  4. Under RadListBoxStyle, navigate to the value of the Template property setter, which points to the control template.

  5. Copy the RadListBox control template from the XAML file.

Once you copy the template, you can modify it and apply it either to a single instance of the control or throughout your application by creating the desired style and setting its Template property.

When changing a Control Template, you must include all required parts. Even if your code compiles, some of the functionality may be impacted due to the omission of the required parts. The required parts are marked with the prefix "PART_".

To add a rounded red border around the RadListBox control, follow the steps above to extract the control template. Then modify the control template as demonstrated in Example 1 below.

Example 1: Adding a border around the RadListBox control

<Application.Resources> 
    <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.xaml"/> 
        </ResourceDictionary.MergedDictionaries> 
 
        <Style BasedOn="{StaticResource RadListBoxStyle}" TargetType="telerik:RadListBox"> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="telerik:RadListBox"> 
                        <Grid> 
                            <ScrollViewer x:Name="PART_ScrollViewer" 
                                            Margin="0" 
                                            Padding="{TemplateBinding Padding}" 
                                            Background="{TemplateBinding Background}" 
                                            BorderBrush="{TemplateBinding BorderBrush}" 
                                            BorderThickness="{TemplateBinding BorderThickness}" 
                                            IsTabStop="False" 
                                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"> 
 
                                <!-- Here is the additional Border --> 
                                <Border CornerRadius="10" BorderBrush="Red" BorderThickness="1"> 
                                    <ItemsPresenter/> 
                                </Border> 
 
                                <ScrollViewer.InputBindings> 
                                    <KeyBinding Command="telerikPrimitives:ListControl.SelectAllCommand" Key="A" Modifiers="Control"/> 
                                </ScrollViewer.InputBindings> 
                            </ScrollViewer> 
                            <ContentPresenter x:Name="PART_DropVisualPlaceholder" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </ResourceDictionary> 
</Application.Resources> 

Figure 2: RadListBox control with red border

RadListBox control with red border

Extracting Control Templates Using Visual Studio

Another way to extract a control template is to use the Visual Studio designer or Expression Blend:

  1. Right-click the desired control and select Edit Template in the context menu.

  2. Click Edit a Copy as shown in Figure 3.

    Figure 3: Visual Studio designer context menu

    Visual Studio designer context menu

  3. In the Create Style Resource dialog, select one of the following options:

    • To extract the style with the default control template in a specified document with a resource key.

      Choose this option if you need to apply the style to a single instance of the control.

      Figure 4: Generating a style with a resource key

      styling-apperance-editing-control-templates 4

    • To create an implicit style.

      Figure 5: Generating an implicit style

      Generating an implicit style

Let's assume you just need to style one specific instance of the control and you have chosen to extract the style with a resource key in the current document. Example 2 shows the generated XAML code.

Example 2: The generated XAML code

<UserControl> 
    <UserControl.Resources> 
        <Style x:Key="RadListBoxStyle1" TargetType="{x:Type telerik:RadListBox}" BasedOn="{StaticResource RadListBoxStyle}"> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="{x:Type telerik:RadListBox}"> 
                        ... 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </UserControl.Resources> 
 
    <Grid> 
        <telerik:RadListBox Style="{StaticResource RadListBoxStyle1}" ItemsSource="{Binding ListBoxItems}" /> 
    </Grid> 
<UserControl> 

See Also

In this article