How to use a comboBox in Silverlight

Purpose:

Silverlight application needs to add a combobox

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


Reference: http://aspnetbymeetu.blogspot.com/2009/07/after-reading-this-article-we-will-be.html


Attachments

  • Combobox.rar (30896-30611-Combobox.rar)
  • Comments

    Author: Gaurav Aroraa30 Jul 2009 Member Level: Gold   Points : 1

    A very good article, its advisable for editor whenever you approve any article please reformat the same. As the Code section of above is appering as other simple lines

    Author: Mrs. Meetu Choudhary Nanda30 Jul 2009 Member Level: Gold   Points : 1

    Thanks gaurav but i haven't finished my resource posting yet and the editor has approved it so there is some problem you may find

    Author: Gaurav Aroraa30 Jul 2009 Member Level: Gold   Points : 1

    Meetu,

    I re-edited the same and approved it.

    Author: Mrs. Meetu Choudhary Nanda30 Jul 2009 Member Level: Gold   Points : 1

    Thanks a Lot Gaurav. For editing and approving as we don't have GUI editor neither have preview option so i have to post the code every time to see the output thanks a lot for being patient with me and helping me in giving final touch to the looks.

    Author: Abhay Kumar Raut14 Aug 2009 Member Level: Gold   Points : 1

    Hi meetu,

    good one .

    keep it up.

    contribute more.

    Thanks and Regards
    Abhay



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email:
    Submit Article
    Return to Article Index