Using the Silverlight ComboBox Control

Introduction:

For developers familiar with the ComboBox in Windows Forms, the ComboBox control in Silverlight 2.0 is not much of a surprise, in fact, it's more or less the same in terms of functionality. The difference lies in the way it is rendered. In Silverlight, the focus is more on creating rich user interfaces hence even the controls are designed to fit this goal.

Silverlight controls display certain kinds of content, depending on their type. The content types for ComboBox and ComboBoxItem are listed below:

Control	Content Type	Content Property
ComboBoxItem	Single element	ContentControl.Content
ComboBox	Collection of items	ItemsControl.Items ItemsControl.ItemsSource

Items Controls display a collection of objects. These controls inherit from the ItemsControl class. The type of collection that can be displayed using an items control depends on the control type and how the collection is populated. Each items control has an associated item container. This container contains individual items of content in the collection. The ComboBox control is an example of items control and ComboBoxItem is the corresponding item container. Item containers are created for each item in a collection and can be retrieved. The Items and ItemsSource properties determine the content for an items control.

The ComboBox control can be populated directly by setting its Items property. Items can also be added to an existing collection by using the Add method. The ItemsSource property is typically used during data binding. When you set the ItemsSource property, item containers are automatically created for each item in the collection. You cannot add items to a collection created by using the ItemsSource property.

The following example shows how to create and add ComboBoxItem objects to a ComboBox in XAML and in code.

Let's now begin with creating an application to contain the ComboBox control.

Launch Visual Studio 2008 Web Developer and create a Silverlight application. Drag and drop a ComboBox control between the <Grid></Grid> tags.

Then replace the <ComboBox></ComboBox> tags with the following code:

<ComboBox Name="cboColors" Background="Sienna" Height="30" Width="100">            <ComboBox.Items>
                <ComboBoxItem Content="Orange" />
                <ComboBoxItem Content="Yellow" />
                <ComboBoxItem Content="Blue" />
                <ComboBoxItem Content="Pink" />
    </ComboBox.Items>
</ComboBox>

Note that here we have used the Items property of Combo Box.

When you save, build, and execute the application, you can observe the combo box on the browser window.



Conclusion:

Thus, in this article, you learnt how to work with the ComboBox control of Silverlight 2.