Change Data Form Appearance
- 5 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 to modify the appearance of all data form instances that use these resources.
- Use a DataFormView object properties to customize a specific data form instance.
Resource Dictionaries
Each DevExpress Xamarin.Forms control (including a data form and editors that it displays) has a style resource dictionary that stores:
- a set of resources that define control-specific appearance settings (for example, font parameters, line thickness, element layout, and visibility settings).
- a Style instance with a collection of Setter objects that set control properties to resource values. Properties that specify control colors reference resources declared in a theme resource dictionary.
Style setters use resource keys with the DynamicResource markup extension to fetch values from a resource dictionary.
You can override resources or styles to customize a control’s appearance.
Show Data Form Style Resource Dictionary
The following resources define layout settings for a data form and its elements:
<ResourceDictionary
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:df="clr-namespace:DevExpress.XamarinForms.DataForm"
x:Class="DevExpress.XamarinForms.Editors.Themes.DataFormStyles">
<Thickness x:Key="DXDataFormContentPadding">10</Thickness>
<Thickness x:Key="DXDataFormGroupHeaderPadding">10</Thickness>
<x:Double x:Key="DXDataFormEditorLabelIndent">5</x:Double>
<Thickness x:Key="DXDataFormEditorPadding">0,5</Thickness>
<x:Double x:Key="DXDataFormEditorSpacing">10</x:Double>
<x:Boolean x:Key="DXDataFormReserveBottomTextLine">False</x:Boolean>
<Color x:Key="DXDataFormRowSeparatorColor">Transparent</Color>
<x:Double x:Key="DXDataFormRowSeparatorThickness">0</x:Double>
<x:Boolean x:Key="DXDataFormIsLastRowSeparatorVisible">False</x:Boolean>
<Style TargetType="df:DataFormView" ApplyToDerivedTypes="True" CanCascade="True">
<Setter Property="ContentPadding" Value="{DynamicResource DXDataFormContentPadding}"/>
<Setter Property="GroupHeaderBackgroundColor" Value="{DynamicResource DXDataFormGroupHeaderBackgroundColor}"/>
<Setter Property="GroupHeaderTextColor" Value="{DynamicResource DXDataFormGroupHeaderFontColor}"/>
<Setter Property="GroupHeaderPadding" Value="{DynamicResource DXDataFormGroupHeaderPadding}"/>
<Setter Property="EditorErrorColor" Value="{DynamicResource DXEditBaseErrorColor}"/>
<Setter Property="EditorHelpTextColor" Value="{DynamicResource DXEditBaseHelpTextColor}"/>
<Setter Property="EditorLabelColor" Value="{DynamicResource DXDataFormEditorLabelColor}"/>
<Setter Property="EditorLabelIndent" Value="{DynamicResource DXDataFormEditorLabelIndent}"/>
<Setter Property="EditorPadding" Value="{DynamicResource DXDataFormEditorPadding}"/>
<Setter Property="EditorHorizontalSpacing" Value="{DynamicResource DXDataFormEditorSpacing}"/>
<Setter Property="ReserveBottomTextLine" Value="{DynamicResource DXDataFormReserveBottomTextLine}"/>
<Setter Property="RowSeparatorColor" Value="{DynamicResource DXDataFormRowSeparatorColor}"/>
<Setter Property="RowSeparatorThickness" Value="{DynamicResource DXDataFormRowSeparatorThickness}"/>
<Setter Property="IsLastRowSeparatorVisible" Value="{DynamicResource DXDataFormIsLastRowSeparatorVisible}"/>
</Style>
</ResourceDictionary>
You can also use the DataFormView object properties to specify these settings for a data form.
Show Editor Style Resource Dictionary
The following resources define the appearance and layout settings for an editor’s elements:
<ResourceDictionary
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dxe="clr-namespace:DevExpress.XamarinForms.Editors"
x:Class="DevExpress.XamarinForms.Editors.Themes.EditorsStyles">
<!-- The border thickness for an editor in each state and the radius of edit box corners. -->
<x:Double x:Key="DXEditBaseBorderThickness">1</x:Double>
<x:Double x:Key="DXEditBaseFocusedBorderThickness">2</x:Double>
<x:Double x:Key="DXEditBaseDisabledFilledBorderThickness">0</x:Double>
<x:Double x:Key="DXEditBaseDisabledOutlinedBorderThickness">1</x:Double>
<CornerRadius x:Key="DXEditBaseCornerRadius">4</CornerRadius>
<!-- An editor's minimum height, and the position of its elements. -->
<x:Double x:Key="DXEditBaseBoxMinHeight">-1</x:Double>
<x:Double x:Key="DXEditBaseIconIndent">8</x:Double>
<x:Double x:Key="DXEditBaseIconSpacing">8</x:Double>
<x:Double x:Key="DXEditBaseAffixIndent">4</x:Double>
<x:Double x:Key="DXEditBaseBottomTextTopIndent">0</x:Double>
<x:Double x:Key="DXTextEditBaseCharacterCounterIndent">4</x:Double>
<!-- The font size of an editor's input text, label, help/error text and prefix/suffix.-->
<x:Double x:Key="DXEditBaseTextFontSize">16</x:Double>
<x:Double x:Key="DXEditBaseLabelFontSize">12</x:Double>
<x:Double x:Key="DXEditBaseBottomTextFontSize">12</x:Double>
<x:Double x:Key="DXEditBaseAffixFontSize">16</x:Double>
<!-- The visibility of an editor's icons. -->
<dxe:IconVisibility x:Key="DXTextEditBaseClearIconVisibility">Auto</dxe:IconVisibility>
<dxe:IconVisibility x:Key="DXPasswordEditClearIconVisibility">Never</dxe:IconVisibility>
<!--Editor styles.-->
<!--...-->
</ResourceDictionary>
Show Theme Resource Dictionaries
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:
<ResourceDictionary
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DevExpress.XamarinForms.Editors.Themes.DarkTheme"
xmlns:themes="clr-namespace:DevExpress.XamarinForms.Editors.Themes">
<!-- Colors of an editor in the default and error state. -->
<Color x:Key="DXEditBaseFilledBackgroundColor">#1fffffff</Color>
<Color x:Key="DXEditBaseOutlinedBackgroundColor">Transparent</Color>
<Color x:Key="DXEditBaseTextColor">#ffffff</Color>
<Color x:Key="DXEditBaseLabelColor">#aaaaaa</Color>
<Color x:Key="DXEditBaseIconColor">#b0ffffff</Color>
<Color x:Key="DXEditBaseAffixColor">#b0ffffff</Color>
<Color x:Key="DXEditBasePlaceholderColor">#aaaaaa</Color>
<Color x:Key="DXEditBaseHelpTextColor">#aaaaaa</Color>
<Color x:Key="DXEditBaseErrorColor">#ff3f48</Color>
<Color x:Key="DXEditBaseBorderColor">#aaaaaa</Color>
<!-- Colors of an editor in the focused state. -->
<Color x:Key="DXEditBaseFocusedLabelColor">#2088ff</Color>
<Color x:Key="DXEditBaseFocusedBorderColor">#2088ff</Color>
<!-- Colors of an editor in the disabled state. -->
<Color x:Key="DXEditBaseDisabledFilledBackgroundColor">#0affffff</Color>
<Color x:Key="DXEditBaseDisabledOutlinedBackgroundColor">Transparent</Color>
<Color x:Key="DXEditBaseDisabledTextColor">#6b6b6b</Color>
<Color x:Key="DXEditBaseDisabledLabelColor">#6b6b6b</Color>
<Color x:Key="DXEditBaseDisabledAffixColor">#6b6b6b</Color>
<Color x:Key="DXEditBaseDisabledIconColor">#6b6b6b</Color>
<Color x:Key="DXEditBaseDisabledHelpTextColor">#6b6b6b</Color>
<Color x:Key="DXEditBaseDisabledBorderColor">#6b6b6b</Color>
<!-- Colors of a combo box' drop-down list. -->
<Color x:Key="DXComboBoxDropDownBackgroundColor">#424242</Color>
<Color x:Key="DXComboBoxDropDownItemTextColor">#e7e7e7</Color>
<Color x:Key="DXComboBoxDropDownSelectedItemBackgroundColor">#2b4b6f</Color>
<Color x:Key="DXComboBoxDropDownSelectedItemTextColor">#e7e7e7</Color>
<!-- Colors of a data form's editor labels and group headers. -->
<Color x:Key="DXDataFormEditorLabelColor">#aaaaaa</Color>
<Color x:Key="DXDataFormGroupHeaderBackgroundColor">#424242</Color>
<Color x:Key="DXDataFormGroupHeaderFontColor">#e7e7e7</Color>
<ResourceDictionary.MergedDictionaries>
<themes:ButtonStyles/>
<themes:DataFormStyles/>
<themes:EditorsStyles/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Data Form Properties
A 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.
Show Available Properties
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 a 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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" xmlns:dxdf="clr-namespace:DevExpress.XamarinForms.DataForm;assembly=DevExpress.XamarinForms.Editors" xmlns:dxe="clr-namespace:DevExpress.XamarinForms.Editors;assembly=DevExpress.XamarinForms.Editors" 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> <x:Double x:Key="DXEditBaseBorderColor">Transparent</x:Double> <x:Double x:Key="DXEditBaseFocusedBorderColor">Transparent</x:Double> <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>