How to: Create a ComboBoxEdit and Bind it to Data

• Aug 03, 2020
• 2 minutes to read

The ComboBoxEdit editor allows you to select predefined items from the dropdown list.

This document demonstrates how to create a ComboBoxEdit control and bind it to data.

Follow the steps listed below:

• Steps 1-3. Create a New Project and Add a ComboBoxEdit
• Steps 4-9. Create Data Objects
• Steps 10-11. Bind ComboBoxEdit to Data

Steps 1-3. Create a New Project and Add a ComboBoxEdit

1. Run MS Visual Studio.
2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose WPF Application.

3. Add a ComboBoxEdit component to the project.

   To do this, open the Visual Studio toolbox, locate the “DX: Common Controls” tab, choose the ComboBoxEdit toolbox item and drop it onto the window.

   

   XAML

   <Window x:Class="Combobox_binding_to_data.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
           Title="MainWindow" Height="300" Width="300">
       <Grid>
           <dxe:ComboBoxEdit  VerticalAlignment="Top" Height="30" Width="250"/>
       </Grid>
   </Window>
   

Steps 4-9. Create Data Objects

Add a data source to your WPF Application. For this, follow the steps below.

4. Open the Project menu and click the Add New Data Source item.

   

5. Choose a Database as a type of data source.

   

6. Then choose a Dataset as a Database Model.

   

7. As a data source, choose the Microsoft Access Database File. As a data connection, choose the nwind database. By default, it is stored in the following path.C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data

   

8. In the Tables menu, choose Categories.

   

9. After this, click Finish to close the wizard.

Steps 10-11. Bind ComboBoxEdit to Data

10. Bind the ComboBoxEdit to the data source. Add the following code:

    C#

    using System.Windows;
    
    namespace Combobox_binding_to_data
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                ComboBoxEdit1.ItemsSource =
                    new nwindDataSetTableAdapters.CategoriesTableAdapter().GetData();
            }
        }
    }
    

    Set the DisplayMember property to “CategoryName”. Set the EditValue property to “CategoryID”, and the ValueMember property to “CategoryID”:

    XAML

    <Window x:Class="Combobox_binding_to_data.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
            Title="MainWindow" Height="300" Width="300">
        <Grid>
            <dxe:ComboBoxEdit  ValueMember="CategoryID" DisplayMember="CategoryName" 
                              EditValue="{Binding CategoryID}" HorizontalAlignment="Center"
                              VerticalAlignment="Top" Height="30" Width="250" Name="ComboBoxEdit1">
            </dxe:ComboBoxEdit>
        </Grid>
    </Window>
    

11. Run the application to see the result.

    

You can change the style of the ComboBoxEdit by setting its StyleSettings property to ‘CheckedComboBoxStyleSettings’ or ‘RadioComboBoxStyleSettings’.

XAML

<Window x:Class="Combobox_binding_to_data.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <dxe:ComboBoxEdit  ValueMember="CategoryID" DisplayMember="CategoryName" 
                          EditValue="{Binding CategoryID}" HorizontalAlignment="Center" VerticalAlignment="Top" 
                          Height="30" Width="250" Name="ComboBoxEdit1">
            <dxe:ComboBoxEdit.StyleSettings>
                <dxe:CheckedComboBoxStyleSettings />
            </dxe:ComboBoxEdit.StyleSettings>
        </dxe:ComboBoxEdit>
    </Grid>
</Window>

XAML

<Window x:Class="Combobox_binding_to_data.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <dxe:ComboBoxEdit  ValueMember="CategoryID" DisplayMember="CategoryName" 
                          EditValue="{Binding CategoryID}" HorizontalAlignment="Center" VerticalAlignment="Top" 
                          Height="30" Width="250" Name="ComboBoxEdit1">
            <dxe:ComboBoxEdit.StyleSettings>
                <dxe:RadioComboBoxStyleSettings />
            </dxe:ComboBoxEdit.StyleSettings>
        </dxe:ComboBoxEdit>
    </Grid>
</Window>