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

csharp

[ContentProperty("Items")]
[DXLicenseMAUI]
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:

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

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

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:

HeaderSpecifies the header for the form item group.HeaderColorSpecifies the header color.HeaderDecorationsDefines whether the header is underlined, in strikethrough, or displayed without decorations.HeaderFontAttributesSpecifies whether the header is displayed in bold, italic, or regular font style.HeaderFontFamilySpecifies the header font family.HeaderFontSizeDefines the header font size.HeaderLineBreakModeSpecifies the line break mode for the group header.HeaderMarginDefines the gaps between the header and other group elements.HeaderMaxLineCountDefines the maximum number of header lines.

XAML

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:

ShowSeparatorSpecifies whether to show the separator for the item group.SeparatorColorSpecifies the separator color.SeparatorThicknessDefines the separator thickness.ShowLastItemSeparatorSpecifies whether to show the separator below the last form item in the group.

XAML

xaml

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