maui-devexpress-dot-maui-dot-editors-1cd43dda.md
A check box element that serves as a single item in a composite UI structure such as a data entry form, profile page, menu, action sheet, or settings panel.
Namespace : DevExpress.Maui.Editors
Assembly : DevExpress.Maui.Editors.dll
NuGet Package : DevExpress.Maui.Editors
[DXLicenseMAUI]
public class FormCheckItem :
FormCheckItemBase
A FormCheckItem can display header text, description, icon, check box, and arrow. Users can tap the form check item to select or clear the check box.
The following diagram depicts check box item elements:
For a list of all available form items, refer to the following help topic: Form Items.
Before you proceed, read the following topic:
Once you completed the general setup steps outlined in the article above, declare the DevExpress.Maui.Editors namespace in your markup:
<ContentPage
xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors">
<!--...-->
</ContentPage>
You can use any layout class to arrange form items on the form. The following example adds FormCheckItem objects to a VerticalStackLayout. To combine form items into groups, you can use the FormGroupItem:
<ScrollView>
<VerticalStackLayout>
<dxe:FormGroupItem>
<dxe:FormCheckItem .../>
<dxe:FormCheckItem .../>
<!--...-->
</dxe:FormGroupItem>
</VerticalStackLayout>
</ScrollView>
Refer to our repo on GitHub to review the complete source code:
The Text specifies the FormCheckItem‘s primary text (header). Use the following properties to configure a form item’s text and its appearance:
TextSpecifies the content of a form item’s primary text.TextColorSpecifies the form item text’s color.TextFontAttributesDefines font attributes for the form item’s text. You can use the following options: Bold, Italic, or None.TextFontFamilySpecifies the text’s font name. You can only use fonts previously registered in the app. For more information, refer to: Register Fonts.TextFontSizeDefines the text’s font size.TextLineBreakModeSpecifies the line break mode for a font item’s text.TextMarginAllows you to set the gaps between the text and other form item elements.TextMaxLineCountDefines the maximum number of text lines.
The markup below adds a text header to a form check box item and specifies text settings:
<dxe:FormCheckItem Text="Private Chat"
TextColor="Gray"
TextFontAttributes="Bold"
TextFontFamily="OpenSansRegular"
TextFontSize="18"
TextLineBreakMode="CharacterWrap"
TextMargin="4"
TextMaxLineCount="2"/>
The Detail specifies the FormCheckItem’s secondary text (description). Use the following properties to configure a check box item’s detail text and its appearance:
DetailSpecifies the content of a form item’s secondary text.DetailColorSpecifies the form item detail’s color.DetailFontAttributesDefines font attributes for the form item’s detail. You can use the following options: Bold, Italic, or None.DetailFontFamilySpecifies the detail’s font name. You can only use fonts previously registered in the app. For more information, refer to: Register Fonts.DetailFontSizeDefines the detail’s font size.DetailLineBreakModeSpecifies the line breaking mode for a font item’s detail.DetailMarginAllows you to set the gaps between the detail and other form item elements.DetailMaxLineCountDefines the maximum number of detail lines.
<dxe:FormCheckItem Detail="Enables or disables notifications for private messages."
DetailColor="Gray"
DetailFontAttributes="Italic"
DetailFontFamily="OpenSansRegular"
DetailFontSize="12"
DetailLineBreakMode="WordWrap"
DetailMargin="4"
DetailMaxLineCount="3"/>
The API members below allow you to respond to user taps:
AllowTapSpecifies whether taps on the form item are allowed.TapCommandDefines the command that is executed when a user taps the form item.TapCommandParameterSpecifies the Tap command parameter.TapOccurs when a user taps the form item.
The following example executes a command when a user taps a form item:
<ContentPage ...>
<ContentPage.BindingContext>
<local:SettingsViewModel />
</ContentPage.BindingContext>
<!--...-->
<dxe:FormCheckItem ...
TapCommand="{Binding OnTapCommand}"/>
<!--...-->
</ContentPage>
using System.ComponentModel;
using System.Windows.Input;
namespace FormItemExample;
public class SettingsViewModel : INotifyPropertyChanged {
//...
public ICommand OnTapCommand => new Command(OnFormItemTap);
private void OnFormItemTap() {
// Invoke actions when user taps the form check item.
// ...
}
}
When a user taps the form check box item, the check box state changes. Use the IsChecked property to receive the current check box state. If the IsChecked property is set to null, the form check item is in the indeterminate state. To allow users to set the indeterminate state, enable the AllowIndeterminateInput option. Specify the CheckedColor property to set the check box color in the selected state.
The properties listed in this section allow you to configure the settings of a form check box item image:
Specifies the image source. In XAML, use the name of an image in the Resources/Images folder to define the source. Ensure that the image’s Build Action is MauiImage.
For more information about images, refer to the following page: Add images to a .NET MAUI app project.
ImageColorDefines the tint color of the form item’s image.ImageHeightSpecifies the height of the form item’s image.ImageWidthSpecifies the width of the form item’s image.ImageMarginAllows you to set the gaps between the image and other form item elements.ImageVerticalOptionsSpecifies how the image is positioned vertically. You can use the following options: Fill, Center, Start, and End.ImageTemplateDefines a template that configures image appearance.
<dxe:FormCheckItem ...
ImageSource="lock"
ImageHeight="36"
ImageWidth="36"
ImageVerticalOptions="Start">
</dxe:FormCheckItem>
You can additionally show an Arrow for the form check item. Use the following settings to display the arrow and customize it:
ShowArrowSpecifies whether to show the form item’s arrow.ArrowColorSets the arrow’s fill color.ArrowTemplateSpecifies a template that configures the arrow’s appearance.ArrowMarginAllows you to set the gaps between the arrow and other form item elements.ArrowVerticalOptionsSpecifies how the arrow is positioned vertically. You can use the following options: Fill, Center, Start, and End.
The following markup customizes the default arrow’s settings for a form item:
<dxe:FormCheckItem ShowArrow="True"
ArrowColor="Gray"
ArrowMargin="10"
ArrowVerticalOptions="Center"/>
The Separator is a line that separates form items. The settings below allow you to show a form item’s separator and define its appearance:
ShowSeparatorSpecifies whether the separator is visible.SeparatorColorDefines the separator’s fill color.SeparatorThicknessSpecifies the separator’s thickness.
<dxe:FormCheckItem ShowSeparator="True"
SeparatorColor="LightGray"
SeparatorThickness="1">
Show 17 items
Microsoft.Maui.Controls.ITabStopElement
Microsoft.Maui.IFrameworkElement
Show 11 items
System.Object BindableObject Element NavigableElement VisualElement View Layout DevExpress.Maui.Editors.Internal.BaseFormItem FormItemBase FormCheckItemBase FormCheckItem
YieldIfNotNull<FormCheckItem>()
See Also