Change Data Form Appearance

  • 6 minutes to read

This document contains an overview of the data form’s appearance settings and an example on how to customize the form’s editors, group headers, and row separators.

Form Appearance Settings - Overview

You can customize the data form’s appearance in the following ways:

Resources

When the DevExpress ThemeManager applies a theme, it adds the following resources to the application’s resource dictionary:

  • a set of resources (keys and their respective values) that define control-specific appearance settings (for example, font parameters, line thickness, element layout, and visibility settings) and default colors of the Light and Dark built-in themes.
  • implicit styles that set properties of controls to resource values.

You can override resource values or create custom implicit styles to customize the appearance of controls (including data forms and editors that they display).

Resource Keys

You can add resources with the same keys (but with new values) to the page’s resource dictionary to change specific appearance settings (for example, size, color) of controls. Since styles are added to the application’s resources and use dynamic resources for their setters, these styles apply resource values defined at the page level (a lower level in the visual tree).

Data Form Style Resources

The following resources define layout settings for a data form and its elements:

Resource Key

Default Value

Description

DXDataFormContentPadding

10

The distance between editors and the data form’s borders or
group headers.

DXDataFormGroupHeaderPadding

10

The distance between the edges of the data form’s group headers and
their content.

DXDataFormEditorLabelIndent

5

The distance between editors and their labels.

DXDataFormEditorPadding

0,5

The distance between edges of the data form’s items
and their content (editors and labels).

DXDataFormEditorSpacing

10

The distance between editors in a row.

DXDataFormReserveBottomTextLine

False

A value that specifies whether to reserve a line for help and
error text below the editor.

DXDataFormRowSeparatorColor

Transparent

The color of lines that separate rows of editors on the data form.

DXDataFormRowSeparatorThickness

0

The thickness of lines that separate rows of editors on the data form.

DXDataFormIsLastRowSeparatorVisible

False

A value that specifies whether a row separator line is displayed
below the bottom row of editors on the data form.

You can also use the DataFormView object properties to specify these settings for a data form.

Editor Style Resources

The following resources define the appearance and layout settings for an editor’s elements:

Resource Key

Default Value

Description

DXEditBaseBorderThickness
DXEditBaseFocusedBorderThickness
DXEditBaseDisabledFilledBorderThickness
DXEditBaseDisabledOutlinedBorderThickness
DXEditBaseCornerRadius

1
2
0
1
4

The border thickness for an editor in each state and
the radius of edit box corners.

DXEditBaseBoxMinHeight
DXEditBaseIconIndent
DXEditBaseIconSpacing
DXEditBaseAffixIndent
DXEditBaseBottomTextTopIndent
DXTextEditBaseCharacterCounterIndent

-1
8
8
4
0
4

An editor’s minimum height, and the position of its elements.

DXEditBaseTextFontSize
DXEditBaseLabelFontSize
DXEditBaseBottomTextFontSize
DXEditBaseAffixFontSize

16
12
12
16

The font size of an editor’s input text, label,
help/error text and prefix/suffix.

DXTextEditBaseClearIconVisibility
DXPasswordEditClearIconVisibility

Auto
Never

The visibility of an editor’s icons.

Theme Resources

The following resources define default colors of the Light and Dark built-in themes that you can apply to DevExpress Xamarin.Forms editors and data forms:

Resource Key

Light Theme

Dark Theme

Description

DXEditBaseFilledBackgroundColor
DXEditBaseOutlinedBackgroundColor
DXEditBaseTextColor
DXEditBaseLabelColor
DXEditBaseIconColor
DXEditBaseAffixColor
DXEditBasePlaceholderColor
DXEditBaseHelpTextColor
DXEditBaseBorderColor
DXEditBaseErrorColor

#1f000000
Transparent
#000000
#6a6a6b
#8a000000
#8a000000
#6a6a6b
#6a6a6b
#a5a5a5
#ff3f48

#1fffffff
Transparent
#ffffff
#aaaaaa
#b0ffffff
#b0ffffff
#aaaaaa
#aaaaaa
#aaaaaa
#ff3f48

Colors of an editor in the default and error states.

DXEditBaseFocusedLabelColor
DXEditBaseFocusedBorderColor

#2088ff
#2088ff

#2088ff
#2088ff

Colors of an editor in the focused state.

DXEditBaseDisabledFilledBackgroundColor
DXEditBaseDisabledOutlinedBackgroundColor
DXEditBaseDisabledTextColor
DXEditBaseDisabledLabelColor
DXEditBaseDisabledAffixColor
DXEditBaseDisabledIconColor
DXEditBaseDisabledHelpTextColor
DXEditBaseDisabledBorderColor

#0a000000
Transparent
#acacac
#acacac
#acacac
#acacac
#acacac
#acacac

#0affffff
Transparent
#6b6b6b
#6b6b6b
#6b6b6b
#6b6b6b
#6b6b6b
#6b6b6b

Colors of an editor in the disabled state.

DXComboBoxDropDownBackgroundColor
DXComboBoxDropDownItemTextColor
DXComboBoxDropDownSelectedItemBackgroundColor
DXComboBoxDropDownSelectedItemTextColor

#ffffff
#505050
#e6f4ff
#505050

#424242
#e7e7e7
#2b4b6f
#e7e7e7

Colors of a combo box drop-down list.

DXDataFormEditorLabelColor
DXDataFormGroupHeaderBackgroundColor
DXDataFormGroupHeaderFontColor

#9e9e9e
#f9f9f9
#515255

#aaaaaa
#424242
#e7e7e7

Colors of a data form’s editor labels and group headers.

The following example changes the border thickness and color for all editors the page displays:

<ContentPage.Resources>
    <x:Double x:Key="DXEditBaseBorderThickness">2</x:Double>
    <Color x:Key="DXEditBaseBorderColor">Green</Color>
</ContentPage.Resources>

Implicit Styles

Another way to customize the appearance of data forms and editors is to redefine their implicit styles with new values for properties you want to change.

To create a style for a data form:

  1. Add a Style object with the TargetType property set to DataFormView to the Resources collection of a page or application. All data forms for which the resource is available will use this custom style.
  2. Specify the style’s collection of Setter objects that set values for DataFormView properties you want to modify.

    The following example changes a data form’s background color:

    <ContentPage.Resources>
        <Style TargetType="dxdf:DataFormView">
            <Setter Property="BackgroundColor" Value="LightGray" />
        </Style>
    </ContentPage.Resources>
    

To create a style for editors:

  1. Create a Style object and set its TargetType property to the type of editors you want to customize.
    Add this style to the data form’s resources to affect only editors in the data form, or add the style to a page’s or application’s resources to style all editors.
  2. Specify the style’s collection of Setter objects that set values for editor properties.

    The following example changes the font for text editors of the data form:

    <dxdf:DataFormView x:Name="dataForm">
        <dxdf:DataFormView.Resources>
            <Style TargetType="dxe:TextEdit">
                <Setter Property="TextFontSize" Value="12" />
                <Setter Property="TextFontAttributes" Value="Italic" />
            </Style>
        </dxdf:DataFormView.Resources>
    </dxdf:DataFormView>
    

Data Form Properties

DataFormView object properties allow you to specify a data form’s appearance settings. For example, you can customize group headers, row separators, editor labels and help/error messages.

You can also use properties of a DataFormGroup object or a DataFormItem class descendant to customize a group of editors or an individual editor.

Example

This example demonstrates how to customize the data form’s editors, group headers, and row separators.

Before

After

  1. Override resources to modify the appearance of the data form’s editors (hide edit box borders and the clear icon, and change placeholder and input text color).
  2. Use the following properties of the data form:

    <ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxdf="http://schemas.devexpress.com/xamarin/2014/forms/dataform"
    xmlns:dxe="http://schemas.devexpress.com/xamarin/2014/forms/editors"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    mc:Ignorable="d"
    x:Class="DataFormExample.MainPage"
    ios:Page.UseSafeArea="True">
    
    <ContentPage.Resources>
        <CornerRadius x:Key="DXEditBaseCornerRadius">0</CornerRadius>
        <Thickness x:Key="DXEditBaseBoxPadding">0</Thickness>
        <x:Double x:Key="DXEditBaseBoxMinHeight">41</x:Double>
        <x:Double x:Key="DXEditBaseBorderThickness">0</x:Double>
        <x:Double x:Key="DXEditBaseFocusedBorderThickness">0</x:Double>
        <Color x:Key="DXEditBaseBorderColor">Transparent</Color>
        <Color x:Key="DXEditBaseFocusedBorderColor">Transparent</Color>
        <Color x:Key="DXEditBaseFilledBackgroundColor">Transparent</Color>
        <Color x:Key="DXEditBasePlaceholderColor">#9f9f9f</Color>
        <Color x:Key="DXEditBaseTextColor">#545454</Color>
        <dxe:IconVisibility x:Key="DXTextEditBaseClearIconVisibility">Never</dxe:IconVisibility>
    </ContentPage.Resources>
    
    <dxdf:DataFormView IsEditorLabelVisible="False"
                       ContentPadding="12,0"                   
                       GroupHeaderPadding="2,8"
                       GroupHeaderBackgroundColor="#e6e6e6"
                       GroupHeaderTextColor="#000000"
                       AllowCollapseGroups="False"
                       RowSeparatorColor="#aaaaaa"
                       RowSeparatorThickness="1"
                       IsLastRowSeparatorVisible="False"/>
    </ContentPage>
    

    View Example