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
-
Run MS Visual Studio.
-
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.
-
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"
Title="MainWindow" Height="300" Width="300" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<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.
-
Open the Project menu and click the Add New Data Source item.
-
Choose a Database as a type of data source.
-
Then choose a Dataset as a Database Model.
-
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.1\Components\Data
-
In the Tables menu, choose Categories.
-
After this, click Finish to close the wizard.
Steps 10-11. Bind ComboBoxEdit to Data
-
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"
Title="MainWindow" Height="300" Width="300" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<Grid>
<dxe:ComboBoxEdit ValueMember="CategoryID" DisplayMember="CategoryName"
EditValue="{Binding CategoryID}" HorizontalAlignment="Center"
VerticalAlignment="Top" Height="30" Width="250" Name="ComboBoxEdit1">
</dxe:ComboBoxEdit>
</Grid>
</Window>
|
-
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"
Title="MainWindow" Height="300" Width="300" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<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"
Title="MainWindow" Height="300" Width="300" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<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>
|