How to Bind ComboBox with DataTable: WPF

DataTable is an object of ADO.NET library, which is used to store temporary data in tabular form in memory. When we are creating data table in code part, then we have to add some columns and have to add some rows.

We have learnt about the combo box introduction and its binding with the list of string in our earlier posts. In this article we will bind this combo box to a data table. Just add a combo box and write some properties as in below code:

<ComboBox Name="cmbBox" Height="25" Width="200"
ItemsSource="{Binding}"></ComboBox>

Now in code part, create an object of data table and add three columns i.e. Name, Age and Address, like in below c# code:

DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Age");
dt.Columns.Add("City");

After adding columns, now its time to add some rows and insert some records in that. So write the below c# code in code part to add three rows:

DataRow dr = dt.NewRow();
dr["Name"] = "Jacob";
dr["Age"] = 25;
dr["City"] = "France";
dt.Rows.Add(dr);

DataRow dr1 = dt.NewRow();
dr1["Name"] = "Julia Martin";
dr1["Age"] = 26;
dr1["City"] = "France";
dt.Rows.Add(dr1);

DataRow dr2 = dt.NewRow();
dr2["Name"] = "Brandon";
dr2["Age"] = 24;
dr2["City"] = "London";
dt.Rows.Add(dr2);

We have successfully created a data table with three columns and add three rows with some valid data. To bind this data table to above combo box, we have to write these two lines in c# code part:

cmbBox.DataContext = dt;
cmbBox.DisplayMemberPath = dt.Columns[0].ToString();

The first line will assign the data context of combo box to the data table, while the second line will set the column name to be displayed in combo box. Run the project the check the combo box:

How to Customize Items in ComboBox: WPF

In our previous post I have discussed about the introduction of combo box control and insert some items in it. What if I want to insert an image also with a text in combo box items? So in this article, I will add some items in combo box which will have text as well as an image also.

To place an image and a text, I am using a stack panel with orientation horizontal. This stack panel will contain an image and a textblock, providing sufficient information. Check out the below code:

<ComboBox Name="customizeComboBox" Height="30" Width="200"
 IsEditable="True">
<StackPanel TextSearch.Text="Item 1" Orientation="Horizontal">
<Image Source="image1.png"></Image>
<TextBlock Text="First item with image"></TextBlock>
</StackPanel>
<StackPanel TextSearch.Text="Item 2" Orientation="Horizontal">
<Image Source="image2.png"></Image>
<TextBlock Text="Second item with image"></TextBlock>
</StackPanel>
</ComboBox>

The XAML code have simple definition of combo box which contains a name, height and width. IsEditable property will be used to do some search when user will type something in combo box. In the combo box tags I have used two stack panel (may be more), with an image and a text.

Run the code and a combobox will be shown with two items, each containing an image and a text specified above:

Bind ComboBox Control With Grid Resource: WPF

In my previous post, I have wrote about the combo box control and add some string items. In this article I will add a grid source and then bind that source to combo box control with some easy steps.

By default a grid is placed in the XAML code file of a window. Just add the below code in the grid snippet:

<Grid.Resources>          
<x:ArrayExtension Type="{ x:Type sys:String}" x:Key="cmbPlacesSource">
<sys:String>London</sys:String>
<sys:String>Italy</sys:String>
<sys:String>California</sys:String>
<sys:String>France</sys:String>
</x:ArrayExtension>
</Grid.Resources>

The above code is defining an array extension which will be used as a source of the combo box. Now add a combo box and it should be look like the following code:

<ComboBox Name="cmbPlaces" Height="30" Width="100"
 Text="Select Places-"
 IsEditable="True"
 ItemsSource="{StaticResource cmbPlacesSource}">
</ComboBox>

Here in the above code, it doesn’t matter of height and width, you can provide these as you want. The must thing is ItemsSource of the combobox. As you are looking the code it is the same name of the above array extension. It will show all the data defined in the above source i.e. as in following image:

In above image by default "Select Places-" is shown, which can be set by the text property with IsEditable property to true. In the selection changed event of combo box, we can get the selected value by using the following code:

private void cmbBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
string selectedValue = cmbPlaces.Text;
MessageBox.Show(selectedValue);
}

Each time when the selection index will change, it will show a message box with the selected text. So we can easily get the selected text of the combo box.

How to Use ComboBox Control in WPF

Dropdown list provides user to select an item from the existing list of items. Combo Box is a control allowing the user to either to type a value into the control or choose from a list. It means it is a combination of textbox and a drop down list.

Combo Box can contain a collection of objects of any type, it means it is an Items Control. To add some items in combo Box through XAML:

<ComboBox Name="cmbBox">
<ComboBox.Items>
<sys:String>First Item</sys:String>
<sys:String>Second Item</sys:String>
<sys:String>Third Item</sys:String>
</ComboBox.Items>
</ComboBox>

The above code snippet is used to simply add string type data to combo box. By using the above code snippet a combo box with three items will be created like in following image:

The same combo box can also be added dynamically using the following code snippet of c# language.

ComboBox cmbBox = new ComboBox();
cmbBox.Name = "cmbBox";
cmbBox.Items.Add("First Item");
cmbBox.Items.Add("Second Item");
cmbBox.Items.Add("Third Item");

Now add this combo box to the container to which you want. The same combo box as in above image will be generated using this code snippet. We can perform any other operation on the click event of selection changed event of combo box. Generate the selectionChanged event and write it as the following code snippet.

private void cmbBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show("ComboBox Selection Changed");
}

Whenever you change the selected item of this combo box, it will show a message as written in above code.