How to use combo box in silverlight

After reading this article we will be able to use a comboobx in a Silverlight application as we are habitual of using it with the formal application. Normally we would like to have a combo box which will show the name of the article or any thing which we would like that our client should see but internally we like to use the ID the primary key or something else to use for the internal purpose. So here are the steps we are going to follow.

Creating the Design Page For the Combobox Application.

1. Open Visual Studio 2008 or above. Create new Project.
2. Select the language C#, Silverlight Project.
3.Name it Combox.
4.Click ok.
5.Leave the Rest Settings as default.
6.Now open MainPage.xaml. modify the grid add the HorizontalAlignment="Left"
VerticalAlignment="Top"
7. And now And now add the Textblock (Label) like this:
<TextBlock Height="17.09" Grid.Column="0" Grid.Row="0" Width="100.303" Canvas.Left="260" Canvas.Top="38.91" Text="Client Name" TextWrapping="Wrap"
Foreground="#FF000000" FontSize="16" Margin="12,0,8,5" />
8. In the next column of grid Add the Combobox. like:
<ComboBox x:Name="cmbClient" Grid.Column="1" Grid.Row="0" SelectionChanged="cmbClient_SelectionChanged"></ComboBox>
9. Not going into more Designing Issues. Lets Finish it here. And Start Our Coding.
10. Creating a button so that onclick of that button we can get the
Information of the Client
<Button x:Name="btn" Click="btn_Click" Content="Get Info" Grid.Column="0" Grid.Row="1"></Button>

Now lets create a class with the following Member Properties

Client ID
Client Name
Client Address
Client Mobile number

Now open the MainPage.xaml.cs File And create the following Class

public class MyClients

{

#region Pubic Property

public int pkid;

public string ClientName { get; set; }

public string ClientAddress { get; set; }

public string ClientMobile { get; set; }

#endregion

}

In Next strep we will Creat a List<T> type of variables which will hold the List of MyClients to be displayed in the comboobx. Like:

public static List<MyClients> clientlist = new List<MyClients>();

Now next step is to create a function which will add the MyClients to the List Here is the function.

public voidAddClients()

{

MyClients mynewclient = new MyClients();

mynewclient.ClientAddress = "Jaipur";

mynewclient.ClientMobile = "1234567890";

mynewclient.ClientName = "Meetu Choudhary";

mynewclient.pkid = 1;

clientlist.Add(mynewclient);

//Adding 2nd CLient

mynewclient = newMyClients();

mynewclient.ClientAddress = "Jaipur";

mynewclient.ClientMobile = "1234567890";

mynewclient.ClientName = "Anita Choudhary";

mynewclient.pkid = 2;

clientlist.Add(mynewclient);

//Adding 3rd client

mynewclient = new MyClients();

mynewclient.ClientAddress = "Delhi";

mynewclient.ClientMobile = "1234567890";

mynewclient.ClientName = "Raman Mehta";

mynewclient.pkid = 3;

clientlist.Add(mynewclient);

//Adding 4th client

mynewclient = new MyClients();

mynewclient.ClientAddress = "Delhi";

mynewclient.ClientMobile = "1234567890";

mynewclient.ClientName = "Gaurav Arora";

mynewclient.pkid = 4;

clientlist.Add(mynewclient);

}

Now we need to call this function in the MainPage so the code of MainPage will now

look like

public MainPage()

{

InitializeComponent();

/*From here I added the code*/

AddClients();

//Telling the combobox which member to be displayed

cmbClient.DisplayMemberPath = "ClientName";

//Telling the Source of the List

cmbClient.ItemsSource = clientlist;

//This line will set the selected item

cmbClient.SelectedIndex = 1;

}

Now We will again declare a public static variable to access the object through out the page.

public static MyClients selectedcl;

Now setting the above variable on the selectionchanged event:

private void cmbClient_SelectionChanged(object sender,SelectionChangedEventArgs e)

{

selectedcl = (MyClients)cmbClient.SelectedItem;

}

and Finally the code for the click event:

private void btn_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("Client Name : " + selectedcl.ClientName + Environment.NewLine

+ "Client Address : " + selectedcl.ClientAddress + Environment.NewLine

+ "Client Mobile : " + selectedcl.ClientMobile + Environment.NewLine

+ "ID : " + selectedcl.pkid);

}

Now run and see the combox in active Code is attached
Download Code