DropDown.zip (135.33 kb)

LiveDemo

Introduction

In this article i am  going to explore some of the features of the ComboBox.ComboBox makes the collection visible and allows users to pick an item from the collection.
After its first initialization, no matter if you bind a new datasource with fewer or more elements, the dropdown persists its original height.

One workaround is the following:

1. store the Properties from the original ComboBox
2. delete the ComboBox removing it from its container
3. create a new ComboBox and place it in the container
4. recover the stores Properties
5. bind the new DataSource to the newly created combobox

Creating Silverlight Project

Create a new Silverlight 3 Project in VS 2008. Name it as ComboBoxtSample.

Simple Data Binding

Add System.Windows.Control.Data reference to the Silverlight project.

Silverlight UserControl

Add a new page to display Bus data using DataGrid. Following shows Bus column XAML snippet:
The ComboBox element represents a ComboBox control in XAML.

 <ComboBox></ComboBox>

ComboBox XAML

        <StackPanel Orientation="Vertical">

            <ComboBox Width="120" Height="30" x:Name="DaysDropDownList" DisplayMemberPath="Name">

                <!--<ComboBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"></TextBlock>

                            <TextBlock Text=", "></TextBlock>

                            <TextBlock Text="{Binding Path=ID}"></TextBlock>

                        </StackPanel>

                    </DataTemplate>

                </ComboBox.ItemTemplate>-->

            </ComboBox>

        </StackPanel>

The following code below is an example implementation Combobox control support data binding

    1 By setting the DisplayMemberPath property you can specify which data item in your data you want displayed in the ComboBox.
    2 Setting the SelectedIndex allows you to specify which item in the ComboBox you want selected.

Business Object

        public class Bus

        {

            public string Name { get; set; }

            public float Price { get; set; }          

        }

Data Binding

        private List<Bus> populatedlistBus()

        {

            listBus = new List<Bus>();

            listBus.Add(new Bus() {Name = "Bus 1", Price = 55f });

            listBus.Add(new Bus() { Name = "Bus 2", Price = 55.7f });

            listBus.Add(new Bus() { Name = "Bus 3", Price = 2f });

            listBus.Add(new Bus() { Name = "Bus 4", Price = 6f });

            listBus.Add(new Bus() { Name = "Bus 5", Price = 9F });

            listBus.Add(new Bus() { Name = "Bus 6", Price = 10.1f });

            return listBus;

        }

The following line of code sets the ItemsSource property of a ComboBox.

        List<Bus> listBus;

        public MainPage()

        {

            InitializeComponent();

            DaysDropDownList.ItemsSource = populatedlistBus();

        }

Output

I hope you enjoyed this simple Silverlight example

Conclusion

In this article, we saw how data binding works in ComboBox.You learnt how to work with the ComboBox control in Silverlight.

DropDown.zip (135.33 kb)

LiveDemo