Skip to content

Latest commit

 

History

History
86 lines (62 loc) · 5.74 KB

Readme.md

File metadata and controls

86 lines (62 loc) · 5.74 KB

DevExpress Form Items for .NET MAUI

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

DevExpress Form Items for .NET MAUI - Demo app preview

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

Documentation

More Examples

Does this example address your development requirements/objectives?

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