Silverlight-Bind ComboBox and ListBox and Deferencing in DataGrid

In this article, I want to introduce how to bind ComboBox and ListBox in DataGrid. Create a City Entity class for DataSet. There are three properties of this class, city name, zipcode and district. District is also one class, including two properties: name and value. In this method, we will bind city class assembly to DataGrid and then bind district class assembly in ComboBox and ListBox.

Firstly, create city entity class and district entity class assembly.

    ///<summary>

    ///City Entity Class

    ///</summary>

    public class City

    {

        private string cityName;

        private string cityNum;

        private List<Combo> comboboxList;

        ///<summary>

        ///City Name

        ///</summary>

        public string CityName

        {

            get { return cityName; }

            set { cityName = value; }

        }

        ///<summary>

        ///City Number

        ///</summary>

        public string CityNum

        {

            get { return cityNum; }

            set { cityNum = value; }

        }

        ///<summary>

        ///District Assembly

        ///</summary>

        public List<Combo> ComboboxList

        {

            get { return comboboxList; }

            set { comboboxList = value; }

        }

    }

    ///<summary>

    ///ComboBox Bind Class

    ///</summary>

    public class Combo

    {

        private string name;

        private string value;

        ///<summary>

        ///Dirstrict Name

        ///</summary>

        public string Name

        {

            get { return name; }

            set { name = value; }

        }

        ///<summary>

        ///District Value

        ///</summary>

        public string Value

        {

            get { return this.value; }

            set { this.value = value; }

        }

    }

Then, initialize city class assembly List<>.

            //Initialize City Class Assembly

            List<City> cityList = new List<City>()

            {

                new City()

                {

                    CityName=“New York”,

                    CityNum=“718”,

                    ComboboxList=new List<Combo>()

                    {

                        new Combo(){ Name=“Bronx”, Value=“10451”},

                        new Combo(){ Name=“Brooklyn”, Value=“11200”},

                        new Combo(){ Name=“New York City”, Value=“10001”},

                        new Combo(){ Name=“State Island”, Value=“10301”},

                        new Combo(){ Name=“Queens”, Value=“11001”}

                    }

                },

                new City()

                {

                    CityName=“Los Angeles”,

                    CityNum=“213”,

                    ComboboxList=new List<Combo>()

                    {

                        new Combo(){ Name=“Los Angles Country”, Value=“90001”},

                        new Combo(){ Name=“Orange Country”, Value=“90070”},

                        new Combo(){ Name=“Ventura Country”, Value=“90086”},

                        new Combo(){ Name=“Riverside Country”, Value=“90091”},

                        new Combo(){ Name=“San Bernadino Country”, Value=“90174”}

                    }

                }

            };

Finally, this.ShowCityList.ItemsSource = cityList; bind city class assembly to ItemsSource of DataGrid. Then, let’s see the xaml code for DataGrid. Add DataTemplate under DataGridTemplateColumn.CellTemplate of DataGrid. Then add one Combox or ListBox in the template. ItemsSource of ComboBox and ListBox bind ComboboxList properties of district class assembly ( ItemsSource = “{Binding ComboboxList]” ). If so, the displayed name is worry. Therefore, we need to add ComboBox.ItemTemplate in ComboBox. There is a TextBlck control is binded in this template. Text property bind Name property of dirstric class.

            <sdk:DataGrid HorizontalAlignment=“Left”  AutoGenerateColumns=“False”  Margin=“28,71,0,0” Name=“ShowCityList” VerticalAlignment=“Top”  Height=“271”  Width=“324” >

            <sdk:DataGrid.Columns>

            <sdk:DataGridTextColumn Header=“City” Binding=“{Binding CityName}” IsReadOnly=“True” Width=“108”/>

                <sdk:DataGridTemplateColumn Header=“District”>

            <sdk:DataGridTemplateColumn.CellTemplate>

            <DataTemplate>

            <ComboBox  Width=“80” Height=“24”   ItemsSource=“{Binding ComboboxList}” SelectionChanged=“ComboBox_SelectionChanged”>

            <ComboBox.ItemTemplate>

            <DataTemplate>

            <TextBlock Width=“80” Text=“{Binding Name}” ></TextBlock>

                </DataTemplate>

                </ComboBox.ItemTemplate>

                </ComboBox>

                </DataTemplate>

                </sdk:DataGridTemplateColumn.CellTemplate>

                    </sdk:DataGridTemplateColumn>

            <sdk:DataGridTemplateColumn Header=“District”>

            <sdk:DataGridTemplateColumn.CellTemplate>

            <DataTemplate>

            <ListBox  Width=“80” ItemsSource=“{Binding ComboboxList}”  >

            <ListBox.ItemTemplate>

            <DataTemplate>

            <TextBlock Width=“80” Text=“{Binding Name}”></TextBlock>

                </DataTemplate>

                </ListBox.ItemTemplate>

                </ListBox>

                </DataTemplate>

                </sdk:DataGridTemplateColumn.CellTemplate>

                    </sdk:DataGridTemplateColumn>

                        </sdk:DataGrid.Columns>

                            </sdk:DataGrid>

Add SelectionChanged = “ComboBox_SelectionChanged” method to catch ComboBox value after ComboBox change options in ComboBox.

Code as following:

            private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

            {

                ComboBox combobox = sender as ComboBox;

                //Convert Selected Item as Combo

                Combo combo = combobox.SelectedValue as Combo;

                MessageBox.Show(combo.Name+“zipcode is:”+combo.Value);

            }

Note: We get entity class Combo by using ComboBox.SelectedValue.

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.

Advertisements

Author: janewdaisy

.NET Program Beginner. Share methods about how to use C#/VB.NET to export data, operate Word, Excel, PDF and other useful skills.

1 thought on “Silverlight-Bind ComboBox and ListBox and Deferencing in DataGrid”

  1. I’m truly enjoying the design and layout of your site.

    It’s a very easy on the eyes which makes it much more enjoyable for me
    to come here and visit more often. Did you hire out a designer to
    create your theme? Outstanding work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s