RadControls for WPF

RadComboBox is an advanced WPF control providing full Blend support. From within the visual environment of Blend, you can easily perform various tasks such as editing control properties, modifying themes, creating and modifying templates and more.

This tutorial will walk you through the creation of a RadComboBox and will show you how to:

Note

Before reading this tutorial you should get familiar with the Visual Structure of the standard RadComboBox control.

For the purpose of this tutorial, you will need to create an empty WPF Application project and open it in Blend.

Note

In order to use RadComboBox control in your projects you have to add references to the following assemblies:

  1. Telerik.Windows.Controls.Input.dll
  2. Telerik.Windows.Controls.dll

Add RadComboBox

  • Open the Asset Library (Window->Assets) in Expression Blend and start writing the name of the RadComboBox in the search box.

 

  • Drag a RadComboBox on the artboard.

 

CopyXAML
<UserControl
.... 
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
...>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <telerik:RadComboBox/>
        </StackPanel>
    </Grid>
</UserControl>

There are two things you should pay attention to in the above code snipped. The first is the declaration of the Telerik.Windows.Controls namespace from Telerik.Windows.Controls.Input assembly and the second is the declaration of the RadComboBox control itself. If you run your application now you will see an empty RadComboBox that contains no items.

Add ComboBox Items Using Expression Blend

Note

The class that represents the combo box item is Telerik.Windows.Controls.RadComboBoxItem.

  • Select your control in Expression Blend.
  • In the Properties Pane, find and edit the Items property.

 

  • The "Object Collection Editor" dialog will open.

 

  • Add two items of type RadComboBoxItem.

 

  • Set their Content properties respectively to "Item 1" and "Item 2".

 

  • Run your demo application. The result from the operations above is shown on the next image - two RadComboBox items are added.

 

And the result XAML is shown on the image below.

CopyXAML
<telerik:RadComboBox>
    <telerik:RadComboBoxItem Content="Item 1"/>
    <telerik:RadComboBoxItem Content="Item 2"/>
</telerik:RadComboBox>

Binding RadComboBox to a Collection of Business Objects

Adding static RadComboBoxItems in XAML is good in scenarios when you know in advance the data in the combo box. However, in most of the cases you have to bind your RadComboBox to a collection of business objects. Check out the following topics which describe in great details the various data sources for the RadComboBox.

  • DataBinding Support Overview - describes the various data sources for the RadComboBox and shows you many tips and tricks. Read this topics in order to achieve basic knowledge about how the binding mechanism works at the RadComboBox.
  • Binding to Object - shows you how to bind the RadComboBox to a collection of business objects (in-memory data).
  • Binding to WCF Service - shows you how to load RadComboBox data from a WCF Service.
  • Binding to ADO.NET Data Service - shows you how to load RadComboBox data from an ADO.NET Data Service.
  • Binding to RIA Service - shows you how to load RadComboBox data from a RIA Service.
  • Binding to XML - shows you how to load RadComboBox data from a XML storage.

Styles and Templates

Read the Styles and Templates section which is entirely dedicated to styling and templating the RadComboBox control.

Working with AutoComplete

AutoComplete is a feature provided by many browsers, programs and controls. It involves the program predicting a word or phrase that the user wants to type without the user actually typing it in completely. RadComboBox has full autocomplete support - while you type into the input area, the combo box returns the relative match for the currently typed text. Read more

Working with Edit Modes

The RadComboBox can be editable, allowing the user to type in its text box, or non-editable, where the text box is hidden. In addition, you could make the text box read-only, in order to keep the editable look, and in the same time to prevent the user from typing. The RadComboBox's API exposes several properties, allowing you to configure these modes. Read more

See Also