Customizing Appearance

This article points to the RadComboBox API that can be used to customize its appearance using styles and templates.

ItemTemplate

To customize the appearance of the items when RadComboBox's ItemsSource is set, use the ItemTemplate property. An example can be found in the Binding to Collection article.

Additionally, you can use the ItemTemplateSelector property to implement a DataTemplateSelector for the items.

Styling the TextBox Input

RadComboBox shows a text input area when in edit mode (IsEditable=True) represented by a TextBox control. The control can be customized via the TextBoxStyle property of RadComboBox. Read more, in the TextBoxStyle article.

Styling the Selection Box

The Selection Box part of RadComboBox is customized via the SelectionBoxTemplate, MultipleSelectionBoxTemplate and EmptySelectionBoxTemplate properties. Read more, in the Selection Box Template article.

Customize Empty Text

When the RadComboBox control has no selected item, a text will appear. The empty text string can be changed through the EmptyText and EmptySelectionBoxTemplate properties of the RadComboBox control. The EmptyText property is of type string, and you can set a custom string. If you want to customize the empty text style further, you can use the EmptySelectionBoxTemplate property by applying a custom DataTemplate.

Example 1: Customize Empty Text

<Grid> 
    <Grid.Resources> 
        <DataTemplate x:Key="EmptyTemplate"> 
            <TextBlock FontWeight="Bold" FontFamily="Comic Sans" FontStyle="Italic" Text="{Binding}" /> 
        </DataTemplate> 
    </Grid.Resources> 
    <telerik:RadComboBox ItemsSource="{Binding Agency}" DisplayMemberPath="Name"  
                            IsEditable="True" VerticalAlignment="Center" HorizontalAlignment="Center" 
                            EmptyText="Some empty text"                             
                            EmptySelectionBoxTemplate="{StaticResource EmptyTemplate}"> 
    </telerik:RadComboBox> 
</Grid> 

Editing the Control Template

You can edit the control template of RadComboBox in order to achieve visualization and functionality that is not provided out of the box or via the built-in API. To do this, extract the ControlTemplate of the control and modify the elements in it. Read more about extracting templates in the Editing Control Templates article.

To apply the customized ControlTemplate, use the NonEditableTemplate and EditableTemplate properties of RadComboBox. NonEditableTemplate is applied when the IsEditable property of the control is set to False (default). EditableTemplate is applied when IsEditable is True.

All elements in the ControlTemplate that contains "PART_" in their Name should be present in the template. Those are required elements used in code by the control. Removing the required elements will lead to missing functionality or runtime errors.

See Also

In this article