DevExpress Form Items for .NET MAUI

This example uses various form items to create an intuitive/easy-to-use mobile settings page.

Implementation Details

• This project implements the following form items:

  Item	Description
  FormItem	Displays custom content (an image or a text field). You can also use this class to display a menu item that takes you to another page.
  FormSwitchItem	Allows you to edit a Boolean value.
  FormListPickerItem	Displays a list with the option to select a single or multiple items.
  FormGroupItem	Allows you to group items.

• The FormItem.ImageTemplate property embeds custom content:

  <dxe:FormItem.ImageTemplate>
      <DataTemplate>
          <dxco:DXImage Margin="0,0,10,0" Aspect="AspectFit" HeightRequest="60" Source="jennievalintine" WidthRequest="60">
              <dxco:DXImage.Clip>
                  <EllipseGeometry Center="30,30" RadiusX="30" RadiusY="30" />
              </dxco:DXImage.Clip>
          </dxco:DXImage>
      </DataTemplate>
  </dxe:FormItem.ImageTemplate>

• The FormListPickerItem object allows users to select items from a list. The list can appear in a Popup control, a BottomSheet, or a page. This example uses this item type to display the following pickers:

  Field	Notes	Customization Properties
  Language	A language picker. Appears on a separate page.	-
  Vibrate	A single-selection picker. Appears in a Popup control.	PickerShowMode = Popup
  Blacklist	A multiple-selection picker with an integrated search bar. Appears on a separate page.	IsMultipleSelectionEnabled = true; ShowSearchPanel = true

• One FormItem opens a page with a multiline text editor bound to the bio field. The code saves changes when a user navigates back to the main page.

• The "Private Chat" item binds its FormSwitchItem.IsToggled property to a Boolean field.

  <dxe:FormSwitchItem ImageSource="priv" IsToggled="{Binding IsPrivateChatEnabled}" Text="Private Chat" />

• The FormItem.ImageSource property specifies an icon.

  <dxe:FormItem ImageSource="email" Text="Email" />

  The ImageColor property customizes image color (uses theme colors for this example):

  <Setter Property="ImageColor" Value="{AppThemeBinding Light={StaticResource Gray600}, Dark={StaticResource Gray200}}" />

• The FormGroupItem object visually separates form items into groups. The FormItemGroup.Header property specifies group header content.

• Form items support a variety of customization options, including the ability to modify colors, fonts, paddings, margins, and other style attributes.

Files to Review

• SettingsPage.xaml

Documentation

• Form Items

More Examples

• DevExpress Editors for .NET MAUI
• DevExpress .NET MAUI Editors - Create Login and Sign-Up Forms

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)