Edit this page


The new TextBoxStyle property, introduced with the Q2 2014 release version of UI for Silverlight, makes it really easy to customize the TextBox part of RadComboBox when it is in editable mode. The purpose of this article is to show you how to apply a custom TextBoxStyle.

Applying custom TextBoxStyle

Let's start with the following editable RadComboBox definition with an ItemsSource bound to a collection of custom business objects:

<telerik:RadComboBox ItemsSource="{Binding Agencies}" DisplayMemberPath="Name" IsEditable="True" />

RadComboBox will look as shown on Figure 1.

Figure 1: RadComboBox without custom TextBoxStyle applied.
Rad Combo Box Features Text Box Style 01

Now you will have to create a custom Style with TargetType TextBox which customizes the desired properties of the TextBox part of RadComboBox:

    <Style TargetType="TextBox" x:Key="CustomComboTextBoxStyle">
        <Setter Property="Foreground" Value="Yellow" />
        <Setter Property="Background" Value="LightBlue" />
        <Setter Property="FontFamily" Value="Calibri" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="BorderBrush" Value="Transparent" />

If you are using Implicit Styles to style the controls, you would need to base that Style to the default TextBoxStyle of RadComboBox named ComboBoxTextBoxStyle.

<Style TargetType="TextBox" x:Key="CustomComboTextBoxStyle" BasedOn="{StaticResource ComboBoxTextBoxStyle}">

The last step would be to simply set the custom style as TextBoxStyle of RadComboBox:

<telerik:RadComboBox ItemsSource="{Binding Agencies}" DisplayMemberPath="Name" IsEditable="True"
                     TextBoxStyle="{StaticResource CustomComboTextBoxStyle}" />

You can see the final result on Figure 2.

Figure 2: RadComboBox with custom TextBoxStyle applied.
Rad Combo Box Features Text Box Style 02

See Also