ComboBox Control using silverlight
- by Aamir Hasan
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 ComboBox2.
delete the ComboBox removing it from its container3. create a new
ComboBox and place it in the container4. recover the stores
Properties5. bind the new DataSource to the newly created combobox Creating
Silverlight ProjectCreate a new Silverlight 3 Project
in VS 2008. Name it as ComboBoxtSample.
Simple Data BindingAdd
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 populatedlistBus() { listBus = new List(); 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.
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.
