Edit this page

SelectionBoxTemplate

The SelectionBoxTemplate gives you the ability to define a separate template for the selected item of Non-Editable RadComboBox. The purpose of this tutorial is to show you how to create and apply SelectionBoxTemplate.

The SelectionBoxTemplate is used only by Non-Editable RadComboBox. However, if you want to customize the TextBox part of Editable RadComboBox you could use the TextBoxStyle property.

Before proceeding further with this tutorial, be sure that you are familiar with how to bind a RadComboBox to a collection of business objects. For more information take a look at the Binding to Object topic. This tutorial will use exactly the same example as in the aforementioned topic.

If you have a RadComboBox which is populated to a collection of business objects, then all items (including the item in the selection box) will look identically.

XAML

<telerik:RadComboBox x:Name="radComboBox" ItemsSource="{Binding Source={StaticResource DataSource}, Path=Agency}" ItemTemplate="{StaticResource ComboBoxCustomTemplate}"/>

RadComboBox gives you the ability to define a separate template for the selected item. In order to do that, you have to perform two simple steps:

  • Create a custom DataTemplate

XAML

<UserControl.Resources>
    <DataTemplate x:Key="SelectionBoxTemplate">
        <TextBlock Text="{Binding Name}" Foreground="Green" FontWeight="Bold"/>
    </DataTemplate>
</UserControl.Resources>
  • Set the declared DataTemplate to the RadComboBox's SelectionBoxTemplate property.

XAML

<telerik:RadComboBox x:Name="radComboBox" SelectionBoxTemplate="{StaticResource SelectionBoxTemplate}"/>

The result is shown on the image below. Note how the template of the selected item differs from the items in the drop-down.

See Also