Description
ComboBox control is used for providing users with a list of values to choose. ComboBox allows only single selection, but it is editable which gives a chance to either select from the list of values available in list or enter a new value individually by users.
WPF Combobox comes with good features and flexibility.
Example
Create a new window, go to xaml source and write the following code:
[csharp]<Window x:Class="WPFCombobox.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Combobox" Height="350" Width="525" Background="Aqua">
<Grid>
<ComboBox Width="220" Height="30" Background="Pink">
<ComboBoxItem>Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
<ComboBoxItem>Item 5</ComboBoxItem>
<ComboBoxItem>Item 6</ComboBoxItem>
</ComboBox>
</Grid>
</Window>
[/csharp]
Now run the application then output comes as shown in the figure below.
If clicked on above Combobox control then items like below appears:
One can select any item from above items, but have to select only one item.
Examples
Example with Selection Changed Event:
This event fires, whenever the selected index of any item in the list is changed.
Create a new window, go to xaml source and write the following code:
[csharp]
<Window x:Class="WPFCombobox.Event" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Combobox" Height="300" Width="300" Background="Aqua">
<Grid>
<ComboBox Width="220" Height="30" Background="Pink" SelectionChanged="ComboBox_SelectionChanged">
<ComboBoxItem>Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
<ComboBoxItem>Item 5</ComboBoxItem>
<ComboBoxItem>Item 6</ComboBoxItem>
</ComboBox>
</Grid>
</Window>[/csharp]
Now go to code view and write the following code under the select chanded event like below:
[csharp]
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show("Item selected by users");
}
[/csharp]
Now run the application.The output comes as shown in the following figure.
If clicked on above ComboBox control then the output will be:
If any item is selected in above window, then a message appears like below:
If clicked OK, then only the item will be allowed to control.
Example
Example with Editing item in Combobox
By using this feature, one can edit the items or options.This example shows how to edit the items in the Combobox list.
Create a new window, go to xaml source and write the following code:
[csharp]<Window x:Class="WPFCombobox.EDIT" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Combobox" Height="300" Width="300" Background="Green">
<Grid>
<ComboBox Width="220" Height="30" Background="Pink" IsEditable="True">
<ComboBoxItem>Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
<ComboBoxItem>Item 5</ComboBoxItem>
<ComboBoxItem>Item 6</ComboBoxItem>
</ComboBox>
</Grid>
</Window>[/csharp]
Now run the application, then result appears as:
If you select any item from the combobox, you can able to edit that item.
Example
Example with Run Time Code
Create a new window then write the following code in code behind file:
[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WPFCombobox
{
///
<summary>
/// Interaction logic for Code.xaml
/// </summary>
public partial class Code : Window
{
public Code()
{
InitializeComponent();
ComboBox cb = new ComboBox();
cb.Items.Add("Item1");
cb.Items.Add("Item2");
cb.Items.Add("Item3");
cb.Items.Add("Item4");
cb.Items.Add("Item5");
this.Content = cb;
}
}
}
[/csharp]
Now run the application.The output appears as shown in the below figure.
