FormGroupItem Class

A component that allows you to arrange form items on the page.

Assembly: DevExpress.Maui.Editors.dll

NuGet Package: DevExpress.Maui.Editors

Declaration

[ContentProperty("Items")]
public class FormGroupItem :
    BaseFormItem,
    IPaddingElement

Remarks

A FormGroupItem uses a header and separator to distinguish different groups of form items. Each form group item can contain a number of nested form items:

The following diagram depicts form item groups and their elements:

DevExpress Form Group Item for MAUI - Anatomy

Add a Form Item to a Page

Before you proceed, review the following topic:

Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)

Once you completed the general setup steps outlined in the article above, declare the DevExpress.Maui.Editors namespace in your markup:

XAML

<ContentPage
    xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors">
    <!--...-->
</ContentPage>

The FormGroupItem keeps grouped form items in the Items collection. Note that the Items property is a content property. You can skip the <Items> tag in your markup:

View Example

XAML

<VerticalStackLayout Padding="20,0">
    <dxe:FormGroupItem Header="Language">
        <dxe:FormListPickerItem .../>
    </dxe:FormGroupItem>
    <dxe:FormGroupItem Header="Calls"
                       ShowSeparator="false">
        <dxe:FormSwitchItem .../>
        <dxe:FormSwitchItem .../>
        <dxe:FormItem .../>
    </dxe:FormGroupItem>
    <!--...-->
</VerticalStackLayout>

Specify the ItemSpacing property to set the distance between items within a group.

Available Form Items

The following list contains all supported form items you can add in a FormGroupItem:

Specify the Group Header and Its Options

This section lists properties that allow you to add the form item group header, and configure header options:

Header: Specifies the header for the form item group.
HeaderColor: Specifies the header color.
HeaderDecorations: Defines whether the header is underlined, in strikethrough, or displayed without decorations.
HeaderFontAttributes: Specifies whether the header is displayed in bold, italic, or regular font style.
HeaderFontFamily: Specifies the header font family.
HeaderFontSize: Defines the header font size.
HeaderLineBreakMode: Specifies the line break mode for the group header.
HeaderMargin: Defines the gaps between the header and other group elements.
HeaderMaxLineCount: Defines the maximum number of header lines.

XAML

<dxe:FormGroupItem Header="Chat Notifications"
                   HeaderColor="Gray"
                   HeaderDecorations="Underline"
                   HeaderFontAttributes="Bold"
                   HeaderFontFamily="OpenSansRegular"
                   HeaderFontSize="14">
    <!--...-->
</dxe:FormGroupItem>

Specify Separator Settings

Use the properties below to specify separator settings:

ShowSeparator: Specifies whether to show the separator for the item group.
SeparatorColor: Specifies the separator color.
SeparatorThickness: Defines the separator thickness.
ShowLastItemSeparator: Specifies whether to show the separator below the last form item in the group.

XAML

<dxe:FormGroupItem ...
                   ShowSeparator="True"
                   SeparatorColor="Gray"
                   ShowLastItemSeparator="False"
                   SeparatorThickness="2">
    <!--...-->
</dxe:FormGroupItem>