As a RadComboBox user you probably are already aware of the fact that it provides two edit modes out of the box – along with the default non-editable mode there is an editable one. The editable mode allows the user to get the desired item by typing, however it also ignores the SelectionBoxTemplate which gives you the ability to display the selected item differently.

In many scenarios you might need to use both - the editable functionality and the possibility to modify the appearance of the selected item in order to visualize two or more properties of the selected custom object. This article will demonstrate how this scenario can be easily achieved by modifying the EditableTemplate of RadComboBox.

Setting up the Scenario

For the example we will need a custom object named Company and a collection of Company objects in the ViewModel to be bound to the ItemsSource of the ComboBox.

The Company class contains the following set of properties and constructor:

And the ViewModel should look as shown below:

So far so good! Now we can include the following ComboBox definition in XAML (don’t forget to set the IsEditable property to True):

By now the ComboBox will look as shown below, nothing special:

Extracting the default EditableTemplate of RadComboBox

Next step would be to extract the default EditableTemplate of RadCombBox. You can find it in the Telerik.Windows.Controls.Input.xaml file which is located in the Themes.Implicit folder inside of the installation folder of the controls. You will need to extract the Template for the same Theme you are using in the project – in our case this is the Windows8Theme. Afterwards you would only need to merge it in App.xaml along with the theme ResourceDictionaries using Implicit Styles:

Modifying the Template

Great, now since the required Template is present the only thing has left is to modify it the required way. What we need to do is to find the TextBox named PART_EditableTextBox inside of the EditableTemplate and modify its Template in order to include an additional StackPanel below the ScrollViewer there. The StackPanel will contain three elements – Image and two TextBlocks bound to the desired properties of the SelectedItem. In our scenario we will need to display the Image, the Address and the Phone properties of the Company. The following snippet illustrates how to set up all of elements correctly: 

Also to be able to hide the additional elements whenever there is nothing selected, we will need to toggle the Visibility of the same StackPanel by binding it to the ComboBox SelectedItem using a simple null to visibility converter:

Final Result

Almost there – the final step after the Template is modified as required would be to apply it to the ComboBox the following way:

And voilà, here is the result:

That’s it! Now you have editable ComboBox that displays a couple more properties at the same time. You can download a runnable project of the same example from our online SDK repository here, the example is listed as ComboBox / EditableTextBoxTemplate. Make sure to check it out and play around with the source!

Even more with the next major release of the UI for Silverlight/WPF RadComboBox will provide a brand new TextBoxStyle property which will allow you to easily customize the editable ComboBox in various other ways.

Stay tuned for more XAML customization tips and tricks and if you have any thoughts to share, do not hesitate to leave a comment below!