DataFormComboBoxItem Class
Stores settings of the data form’s combo box editor.
Namespace: DevExpress.Maui.DataForm
Assembly: DevExpress.Maui.Editors.dll
NuGet Package: DevExpress.Maui.Editors
Declaration
public class DataFormComboBoxItem :
DataFormTextItemBaseRemarks
The following image shows two combo boxes (“Department” and “Status”) generated for a business data object:
For more information about other DataForm editors, refer to the following topic: Data Editors in DevExpress Data Form for .NET MAUI.
Get Started
The following help topic describes how to create your first app with the DevExpress Data Form component for MAUI: Get Started with DevExpress Data Form for .NET MAUI.
Define Combo Box Settings in XAML
You can assign a combo box editor to a data source object property. To do this, add a DataFormComboBoxItem object to the DataFormView.Items collection. Specify the item’s FieldName property to bind the editor to the data object property.
The following example shows how to add two combo boxes to a DataForm and bind them to data object properties in XAML:
<dxdf:DataFormView x:Name="dataForm"
EditorLabelWidth="95">
<dxdf:DataFormView.DataObject>
<local:EmployeeInfo/>
</dxdf:DataFormView.DataObject>
<dxdf:DataFormView.PickerSourceProvider>
<local:ComboBoxDataProvider/>
</dxdf:DataFormView.PickerSourceProvider>
<dxdf:DataFormView.Items>
<dxdf:DataFormComboBoxItem FieldName="Department"
ValueMember = "DepartmentCode"
DisplayMember = "DepartmentName"
BackgroundColor="LightGray"
RowOrder="2"/>
<dxdf:DataFormComboBoxItem FieldName="Status"
BackgroundColor="LightGray"
LabelText="Status Value"
RowOrder="3"/>
</dxdf:DataFormView.Items>
</dxdf:DataFormView>
using DevExpress.Maui.DataForm;
using System.Collections;
namespace ComboBoxEditor {
public partial class MainPage : ContentPage {
public MainPage() {
InitializeComponent();
}
}
public class EmployeeInfo: INotifyPropertyChanged {
string firstName;
public string FirstName { get { return firstName; } set { firstName = value; OnPropertyChanged("FirstName"); } }
string lastName;
public string LastName { get { return lastName; } set { lastName = value; OnPropertyChanged("LastName"); } }
int department;
public int Department { get { return department; } set { department = value; OnPropertyChanged("Department"); } }
string status;
public string Status { get { return "Salaried"; } set { status = value; OnPropertyChanged("Status"); } }
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "") {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class DepartmentInfo {
public int DepartmentCode { get; set; }
public string DepartmentName { get; set; }
public DepartmentInfo(int code, string name) {
DepartmentCode = code;
DepartmentName = name;
}
}
public class ComboBoxDataProvider : IPickerSourceProvider {
public IEnumerable GetSource(string propertyName) {
if (propertyName == "Department") {
return new List<DepartmentInfo>() {
new DepartmentInfo(0, "Sales"),
new DepartmentInfo(1, "Support"),
new DepartmentInfo(2, "Shipping"),
new DepartmentInfo(3, "Engineering"),
new DepartmentInfo(4, "Human Resources"),
new DepartmentInfo(5, "Management"),
new DepartmentInfo(6, "IT")
};
}
if (propertyName == "Status") {
return new List<string>() {
"Salaried",
"Commission",
"Terminated",
"On Leave"
};
}
return null;
}
}
}
The DataForm automatically creates editors for other properties of the data object. To disable automatic editor creation, set the DataFormView.IsAutoGenerationEnabled property to false.
Use Attributes to Generate the Editor
Associate the DataFormComboBoxEditorAttribute with a data object’s property for which you want to display the combo box.
Specify the attribute’s DisplayMember property to define the data field that contains the display text of the combo box selected item.
Use the ValueMember property to specify which data field contains the property value. This property value defines the field whose values are used to specify the selected item.
The following example shows how to create and configure a DataForm for an EmployeeInfo object. The DataFormComboBoxEditorAttribute is applied to the EmployeeInfo.Department and EmployeeInfo.Status properties to explicitly assign combo box editors to properties.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors"
x:Class="ComboBoxEditor.MainPage">
<ScrollView>
<StackLayout>
<dxdf:DataFormView x:Name="dataForm"
EditorLabelWidth="95"/>
</StackLayout>
</ScrollView>
</ContentPage>
using DevExpress.Maui.DataForm;
using System.Collections;
namespace ComboBoxEditor {
public partial class MainPage : ContentPage {
public MainPage() {
InitializeComponent();
dataForm.DataObject = new EmployeeInfo();
dataForm.PickerSourceProvider = new ComboBoxDataProvider();
}
}
public class EmployeeInfo {
public string FirstName { get; set; }
public string LastName { get; set; }
[DataFormComboBoxEditor(ValueMember = "DepartmentCode", DisplayMember = "DepartmentName")]
public int Department { get; set; }
[DataFormComboBoxEditor]
public string Status { get; set; } = "Salaried";
}
public class DepartmentInfo {
public int DepartmentCode { get; set; }
public string DepartmentName { get; set; }
public DepartmentInfo(int code, string name) {
DepartmentCode = code;
DepartmentName = name;
}
}
public class ComboBoxDataProvider : IPickerSourceProvider {
public IEnumerable GetSource(string propertyName) {
if (propertyName == "Department") {
return new List<DepartmentInfo>() {
new DepartmentInfo(0, "Sales"),
new DepartmentInfo(1, "Support"),
new DepartmentInfo(2, "Shipping"),
new DepartmentInfo(3, "Engineering"),
new DepartmentInfo(4, "Human Resources"),
new DepartmentInfo(5, "Management"),
new DepartmentInfo(6, "IT")
};
}
if (propertyName == "Status") {
return new List<string>() {
"Salaried",
"Commission",
"Terminated",
"On Leave"
};
}
return null;
}
}
}
Display Custom Names for Source Enum Values
DataFormView does not obtain Names set in the DisplayAttribute for enum values. This section contains two approaches on how to use custom display text for enum values used as a source of combo box items.
Specify Data Template
Use the DataFormComboBoxItem.DisplayItemTemplate and DataFormComboBoxItem.ItemTemplate properties to implement data templates for the combo box’ display item and drop-down items. Implement a custom value converter that converts enum values to strings. Use the strings to specify template contents.
<dxdf:DataFormView DataObject="{Binding DataObject}">
<dxdf:DataFormComboBoxItem FieldName="EnumProperty"
LabelText="Item:">
<dxdf:DataFormComboBoxItem.DisplayItemTemplate>
<DataTemplate>
<Label Text="{Binding ., Converter={local:EnumConverter}}"
FontSize="16"/>
</DataTemplate>
</dxdf:DataFormComboBoxItem.DisplayItemTemplate>
<dxdf:DataFormComboBoxItem.ItemTemplate>
<DataTemplate>
<Label Text="{Binding ., Converter={local:EnumConverter}}"
Margin="7"
FontSize="16"/>
</DataTemplate>
</dxdf:DataFormComboBoxItem.ItemTemplate>
</dxdf:DataFormComboBoxItem>
</dxdf:DataFormView>
using System.Globalization;
namespace ComboBoxEditor {
public partial class MainPage : ContentPage {
public MainPage() {
this.BindingContext = new ViewModel();
InitializeComponent();
}
}
class ViewModel {
DataObject dataObject = new();
public DataObject DataObject => dataObject;
}
enum CustomEnum {
EnumValue1,
EnumValue2,
EnumValue3
}
class DataObject {
public CustomEnum EnumProperty { get; set; }
}
class EnumConverter : IValueConverter {
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
if (value == null)
return "";
CustomEnum enumValue = (CustomEnum)value;
return enumValue switch {
CustomEnum.EnumValue1 => "Enum Value #1",
CustomEnum.EnumValue2 => "Enum Value #2",
CustomEnum.EnumValue3 => "Enum Value #3",
_ => throw new ArgumentOutOfRangeException()
};
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
throw new NotImplementedException();
}
}
}
Create a Wrapper Class Over an Enum
The following example shows how to create a wrapper class over enum values. When you bind the combo box’ FieldName to the View Model property of the enum type, the wrapper class ToString() method returns strings that correspond to specific enum values.
<dxdf:DataFormView DataObject="{Binding DataObject}">
<dxdf:DataFormComboBoxItem FieldName="EnumProperty"
LabelText="Item:"
ItemsSource="{Binding ItemsSource}">
</dxdf:DataFormComboBoxItem>
</dxdf:DataFormView>
using System.Collections.ObjectModel;
namespace ComboBoxEditor {
public partial class MainPage : ContentPage {
public MainPage() {
this.BindingContext = new ViewModel();
InitializeComponent();
}
}
class ViewModel {
ObservableCollection<CustomEnumWrapper> itemsSource = new ObservableCollection<CustomEnumWrapper> {
new(CustomEnum.EnumValue1),
new(CustomEnum.EnumValue2),
new(CustomEnum.EnumValue3)
};
DataObject dataObject = new();
public ObservableCollection<CustomEnumWrapper> ItemsSource => itemsSource;
public DataObject DataObject => dataObject;
}
class CustomEnumWrapper {
CustomEnum EnumProperty { get; }
public CustomEnumWrapper(CustomEnum customEnum) {
EnumProperty = customEnum;
}
public override string ToString() {
return EnumProperty switch {
CustomEnum.EnumValue1 => "Enum Value #1",
CustomEnum.EnumValue2 => "Enum Value #2",
CustomEnum.EnumValue3 => "Enum Value #3",
_ => throw new ArgumentOutOfRangeException()
};
}
}
enum CustomEnum {
EnumValue1,
EnumValue2,
EnumValue3
}
class DataObject {
public CustomEnumWrapper EnumProperty { get; set; }
}
}
Manage the Display Item Value
The DataFormView selects an item to display in the combo box editor based on the corresponding DataFormView.DataObject property value.
You can use the following methods to specify or obtain the combo box editor value:
- SetValue(Object) – Specifies the Data Form editor value.
- GetValue(String) – Returns the current value of a Data Form editor by the name of the property to which the editor is bound.
- GetValue() – Returns the current value of the data form editor.
Specify Display Options
Use the DataFormDisplayOptionsAttribute to specify display parameters for the DataForm’s combo box editor:
[DataFormComboBoxEditor(ValueMember = "DepartmentCode", DisplayMember = "DepartmentName")]
[DataFormDisplayOptions (HelpText = "Select a department", LabelPosition = DataFormLabelPosition.Top)]
public int Department { get; set; }
You can also specify the display parameters for a manually created combo box editor:
<dxdf:DataFormComboBoxItem FieldName="Department"
ValueMember = "DepartmentCode"
DisplayMember = "DepartmentName"
BackgroundColor="LightGray"
HelpText="Select a department"
HelpTextColor="Gray"
LabelPosition="Top"/>
Specify Layout
Refer to the following help topic for more information on how to position editors in a DataFormView: Layout in DevExpress Data Form for .NET MAUI.