Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #48 – How to Implement a Combobox

With the release of Silverlight 2 RC0 there are three new controls we will be discussing that were not available for beta 2. The three new controls with a Tip of the Day for each include:

• ProgressBar
• ComboxBox
• PasswordBox

For this tip we will be exploring the ComboBox control.

The following code below shows how to declare and size a combo box in your XAML:

<ComboBox Width="100">
    <ComboBox.Items >
        <ComboBoxItem Content="1st Item"></ComboBoxItem>
        <ComboBoxItem Content="2nd Item"></ComboBoxItem>
        <ComboBoxItem Content="3rd Item"></ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

If you were to run this code you would see a combo box without any selected items:

Click the drop down button and you will see your three items displayed:

If you want to set a default selection for your combo box add the property IsSelected=”true” to any of your ComboBoxItems:

<ComboBox Width="100">
    <ComboBox.Items >
        <ComboBoxItem Content="1st Item"></ComboBoxItem>
        <ComboBoxItem Content="2nd Item"></ComboBoxItem>
        <ComboBoxItem IsSelected="True" Content="3rd Item"></ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

If you run this code, you will see the 3rd item selected by default:

The ComboBox control also supports data binding. The following code below is an example implementation.

Few notes about this code:

• By setting the DisplayMemberPath property you can specify which data item in your data you want displayed in the ComboBox. In our case below we set this to be the Name. We could have also set DisplayMemberPath =”Price” which would than show the car prices in the ComboBox.
• Setting the SelectedIndex allows you to specify which item in the ComboBox you want selected.
• I have attached an event to detect when the selection in the ComboBox has changed. The SelectedItem member of our ComboBox will return us the car that is selected at any given time.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace Password

{

    public partial class Page : UserControl

    {

        ComboBox _cars = new ComboBox();

        public Page()

        {

            InitializeComponent();

            List<Car> carList = new List<Car>();

            carList.Add(new Car() { Name = "Ferrari", Price = 150000 });

            carList.Add(new Car() { Name = "Honda", Price = 12500 });

            carList.Add(new Car() { Name = "Toyota", Price = 11500 });

            ComboBox cb = new ComboBox();

            _cars.DisplayMemberPath = "Name";

            _cars.ItemsSource = carList;

            _cars.SelectedIndex = 2;

            _cars.SelectionChanged += new SelectionChangedEventHandler(cb_SelectionChanged);

            MyCanvas.Children.Add(_cars);

        }

        void cb_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            Car selectedCar = (Car) _cars.SelectedItem;

            int price = selectedCar.Price;

            string carName = selectedCar.Name;

        }

    }

    public class Car

    {

        public string Name { get; set; }

        public int Price { get; set; }

    }

}

Thank you,
--Mike Snow

 Subscribe in a reader