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:
- Override resources (values associated with predefined keys or implicit styles) to modify the appearance of all data form and editor instances that use these resources.
- Use DataFormView object properties to customize a specific data form instance.
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).
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 |
DXDataFormGroupHeaderPadding | 10 | The distance between the edges of the data form’s group headers and |
DXDataFormEditorLabelIndent | 5 | The distance between editors and their labels. |
DXDataFormEditorPadding | 0,5 | The distance between edges of the data form’s items |
DXDataFormEditorSpacing | 10 | The distance between editors in a row. |
DXDataFormReserveBottomTextLine | False | A value that specifies whether to reserve a line for help and |
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 |
You can also use the DataFormView object properties to specify these settings for a data form.
The following resources define the appearance and layout settings for an editor’s elements:
Resource Key | Default Value | Description |
|---|---|---|
DXEditBaseBorderThickness | 1 | The border thickness for an editor in each state and |
DXEditBaseBoxMinHeight | -1 | An editor’s minimum height, and the position of its elements. |
DXEditBaseTextFontSize | 16 | The font size of an editor’s input text, label, |
DXTextEditBaseClearIconVisibility | Auto | The visibility of an editor’s icons. |
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 | #1f000000 | #1fffffff | Colors of an editor in the default and error states. |
DXEditBaseFocusedLabelColor | #2088ff | #2088ff | Colors of an editor in the focused state. |
DXEditBaseDisabledFilledBackgroundColor | #0a000000 | #0affffff | Colors of an editor in the disabled state. |
DXComboBoxDropDownBackgroundColor | #ffffff | #424242 | Colors of a combo box drop-down list. |
DXDataFormEditorLabelColor | #9e9e9e | #aaaaaa | 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:
- 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.
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:
- 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. 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 |
|---|---|
|
|
- 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).
Use the following properties of the data form:
- IsEditorLabelVisible - to hide editor labels.
- ContentPadding - to specify the distance between editors and form borders or group headers.
- GroupHeaderPadding / GroupHeaderBackgroundColor / GroupHeaderTextColor - to adjust the appearance of group headers.
AllowCollapseGroups - to prevent users from collapsing groups, and hide the collapse/expand icon from group headers. - RowSeparatorColor / RowSeparatorThickness / IsLastRowSeparatorVisible - to customize row separators.
<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>