How to enlist the items in the Combo box and how to execute server side event on selected item change of ComboBox?

ComboBox

Combo box works almost similar to the ListBox control except that it shows only one item from the items of the DropDownList and also allows user to select only one item. This control is inherited from System.Windows.Controls.ItemsControl namespace.

The way we add items into the ListBox from the code behind, we can add items into the ComboBox as well.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

How to list the items in in the Combo box?

To list the items, we can use the ComboBox control.

Code

<ComboBox Width="250" x:Name="comboBox1" Canvas.Top="50" Canvas.Left="20">
<ComboBox.Items>
<ComboBoxItem Content="First Item" />
<ComboBoxItem Content="Second Item" />
<ComboBoxItem Content="Third Item" />
<ComboBoxItem Content="Fourth Item" />
</ComboBox.Items>
</ComboBox>

As you can see that all the items of the ComboBox are added with ComboBoxItem element under ComboBox.Items child element of the ComboBox.

Output

How to execute server side event on selected item change of ComboBox?

In case where we want to execute a server side method when the selected item changes in the ComboBox, we can catch SelectionChanged event of the ComboBox. To specify the text and value of items to be displayed in the ComboBox, we can specify DisplayMemberPath and SelectedValuePath property separately.

Code

<Grid x:Name="LayoutRoot" Background="White">
<Canvas>
<ComboBox x:Name="ComboBox1" Margin="10, 10, 10, 10"
Height="25" Width="200" ItemsSource="{Binding}" DisplayMemberPath="FirstName"
SelectedValuePath="LastName" SelectionChanged="ComboBox1_SelectionChanged">
</ComboBox>
<TextBlock x:Name="TextBlock1" Margin="55" Text="Selected person's last name: "/>
</Canvas>
</Grid>

In the above code snippet, we have specified the data source property name to DisplayMemberPath and SelectedValuePath property of the ComboBox that shows the item’s text and value of the ComboBox respectively (in this case the item text will have the FirstName and value as LastName). On SelectionChanged event we have specified ComboBox1_SelectionChanged server side method that executes when user changes the ComboBox selection.

The item source of the ComboBox has been specified as Binding that takes its data from its parent element (will be explained later).

Code behind

void ComboBoxSelectionChanged_Loaded(object sender, RoutedEventArgs e)
{
this.FillData();
}
private void FillData()
{
IList<Person> list = new List<Person>();
Person p = new Person
{
Age = 1,
FirstName = "Joe",
LastName = "Elan",
IsActive = true
};
Person p1 = new Person
{
Age = 15,
FirstName = "Mike",
LastName = "Bull",
IsActive = true
};
Person p2 = new Person
{
Age = 51,
FirstName = "Mukul",
LastName = "Alwa",
IsActive = true
};
Person p3 = new Person
{
Age = 31,
FirstName = "Sheo",
LastName = "Narayan",
IsActive = true
};
list.Add(p);
list.Add(p1);
list.Add(p2);
list.Add(p3);
LayoutRoot.DataContext = list;
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public bool IsActive { get; set; }
}
private void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
TextBlock1.Text = ComboBox1.SelectedValue.ToString();
}

In the above code snippet, we have a FillData method that adds Person object in generic collection and sets the Grid’s DataContext to the collection object. Setting Grid’s data context to the collection let its child elements to access the data source for their use.

Output

Selecting the element items, displays the last name of the selected person to the TextBlock.

Hope this article was useful. Thanks for reading, hope you liked it.

Keep a watch on forth coming articles on Silverlight. To read my series of articles,click here.