How to: Create a ComboBoxEdit and Bind it to Data

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>

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.

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'.

<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>

<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>