Creating a Floating Label Layout in Xamarin.Forms DataForm
Tags: mobile, xamarin, android, dataform
Published: 2021-06-28 12:16:51

---
title: Creating a Floating Label Layout in Xamarin.Forms DataForm
published: true
date: 2021-06-28 11:00:21 UTC
tags: Mobile,Xamarin,Android,DataForm
canonical_url: https://www.syncfusion.com/blogs/post/creating-a-floating-label-layout-in-xamarin-forms-dataform.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Creating-a-Floating-Label-Layout-in-Xamarin.Forms-DataForm-672x372.png
---

The Syncfusion [Xamarin.Forms DataForm](https://www.syncfusion.com/xamarin-ui-controls/xamarin-dataform "Link to Xamarin.Forms DataForm") supports a floating label layout that includes features such as assistive labels, leading and trailing icons, and a password toggle icon to show or hide a password. It enhances the user experience of filling the DataForm by showing hints and error messages in a more intuitive way. In this blog, I will explain how to add a floating label layout in Xamarin.Forms DataForm control.

![Floating Label Layout in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Floating-Label-Layout-in-Xamarin.Forms-DataForm-1.png)<figcaption>Floating Label Layout in Xamarin.Forms DataForm</figcaption>

Before reading further, go through the [Getting Started with Xamarin.Forms DataForm documentation](https://help.syncfusion.com/xamarin/dataform/getting-started "Link to Getting Started with Xamarin DataForm documentation").

## Adding the floating label layout in the DataForm

By default, the DataForm arranges editors and their labels corresponding to data fields in the stack layout. You can enable the floating label layout in Xamarin.Forms DataForm by setting the [LayoutOptions](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.SfDataForm.html#Syncfusion_XForms_DataForm_SfDataForm_LayoutOptions "Link to LayoutOptions property of Xamarin DataForm") property of the [DataForm](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.SfDataForm.html "Link to the Class SfDataForm") or [DataFormItem](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.DataFormItem.html "Link to the Class DataFormItem of Xamarin DataForm") to [TextInputLayout](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.LayoutType.html#Syncfusion_XForms_DataForm_LayoutType_TextInputLayout "Link to TextInputLayout property of Xamarin DataForm").

Refer to the following code.

```html
<dataForm:SfDataForm x:Name="dataForm" LayoutOptions="TextInputLayout">
 <dataForm:SfDataForm/>
```

## Editors supported in DataForm floating label layout

The Xamarin.Forms DataForm supports the floating label layout for the following editors:

- Text editor
- Password editor
- Masked edit text editor
- Numeric editor
- Multiline text editor
- Date editor
- Time editor
- Picker editor
- Drop-down editor
- Autocomplete editor

## Features of DataForm floating label layout

Important features of the floating label layout are:

- [Different container types](#container-types)
- [Leading and trailing views](#leading-and-trailing-views)
- [Assistive labels](#assistive-labels)
- [Color customizations](#color-customizations)

### Container types

Containers help us enhance the appearance of the editor views and provide some contrast between editors and assistive labels. The three container types are:

- Outlined
- Filled
- None

Refer to the following code.

```html
<dataForm:SfDataForm
        x:Name="dataForm"
          ContainerType="Outlined">
</dataForm:SfDataForm>
```

The default container type is **Outlined**. You can also set the container type to **Filled** and **None**.

![Outlined Container in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Outlined-Container-in-Xamarin.Forms-DataForm.png)<figcaption>Outlined Container in Xamarin.Forms DataForm</figcaption>

### Leading and trailing views

Adding a leading icon helps indicate the expected input types, such as birth dates, phone numbers, or passwords. Use the trailing icons to include clear buttons, error icons, voice input symbols, and drop-down symbols.

To add these icons, use the [LeadingView](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.TextInputLayoutSettings.html#Syncfusion_XForms_DataForm_TextInputLayoutSettings_LeadingView "Link to LeadingView property of Xamarin DataForm") and [TrailingView](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.TextInputLayoutSettings.html#Syncfusion_XForms_DataForm_TextInputLayoutSettings_TrailingView "Link to TrailingView property of Xamarin DataForm") properties in the [TextInputLayoutSettings](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.TextInputLayoutSettings.html "Link to the Class TextInputLayoutSettings of Xamarin DataForm") of the [DataFormItem](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.DataFormItem.html "Link to the Class DataFormItem of Xamarin DataForm"). Use the [LeadingViewPosition](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.TextInputLayoutSettings.html#Syncfusion_XForms_DataForm_TextInputLayoutSettings_LeadingViewPosition "Link to the LeadingViewPosition property of Xamarin DataForm") and [TrailingViewPosition](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.TextInputLayoutSettings.html#Syncfusion_XForms_DataForm_TextInputLayoutSettings_TrailingViewPosition "Link to the TrailingViewPosition property of Xamarin DataForm") properties to change the position of the leading and trailing views respectively.

Refer to the following code example.

```csharp
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem1(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.Name.Equals("ContactNumber"))
        {
            e.DataFormItem.TextInputLayoutSettings = new TextInputLayoutSettings()
            {
                LeadingView = new Label()
                {
                    VerticalTextAlignment = Device.RuntimePlatform == Device.iOS ? TextAlignment.Center : TextAlignment.Start,
                    FontSize = Device.RuntimePlatform == Device.iOS ? 18 : 24,
                    Text = "F",
                    FontFamily = Device.RuntimePlatform == Device.iOS ? "ContactsIcons" :
                                                            Device.RuntimePlatform == Device.Android ? "ContactsIcons.ttf#ContactsIcons" : "Assets/Fonts/ContactsIcons.ttf#ContactsIcons"
                },

                TrailingView = new Label()
                {
                    VerticalTextAlignment = Device.RuntimePlatform == Device.iOS ? TextAlignment.Center : TextAlignment.Start,
                    FontSize = Device.RuntimePlatform == Device.iOS ? 18 : 24,
                    Text = "A",
                    FontFamily = Device.RuntimePlatform == Device.iOS ? "ContactsIcons" : Device.RuntimePlatform == Device.Android ? "ContactsIcons.ttf#ContactsIcons" : "Assets/Fonts/ContactsIcons.ttf#ContactsIcons"
                },
            };
        }
    }
}
```

![Leading and Trailing View Icons in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Leading-and-Trailing-View-Icons-in-Xamarin.Forms-DataForm.png)<figcaption>Leading and Trailing View Icons in Xamarin.Forms DataForm</figcaption>

### Helper text, error text, and character counter

Displaying helper and error texts is essential to all types of form-filling. With these assistive labels, we can communicate to the users what type of input is expected. We can also show error messages when the typed input is not in the expected format.

#### Helper text label

Display a watermark in the editor fields to provide a hint for users. It can be set using [Prompt](https://help.syncfusion.com/xamarin/sfdataform/working-with-dataform#setting-watermark "Link to Setting watermark documentation"). The helper text in the Xamarin.Forms DataForm floating label layout can be collapsed by setting the [ShowHelperText](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.SfDataForm.html#Syncfusion_XForms_DataForm_SfDataForm_ShowHelperText "Link to ShowHelperText property of Xamarin DataForm") to false in the DataForm or [TextInputLayoutSettings](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.TextInputLayoutSettings.html "Link to the Class TextInputLayoutSettings of Xamarin DataForm").

Refer to the following code.

```html
<dataForm:SfDataForm x:Name=”dataForm” LayoutOptions=”TextInputLayout" ShowHelperText="False">
  <dataForm:SfDataForm/>
```

![Helper Text Label in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Helper-Text-Label-in-Xamarin.Forms-DataForm.png)<figcaption>Helper Text Label in Xamarin.Forms DataForm</figcaption>

#### Validation label

Also, the Xamarin.Forms DataForm allows you to display validation messages for the data provided.

Refer to the following code example.

```csharp
private string _Name;

[Required(AllowEmptyStrings = false, ErrorMessage = "Name should not be empty")]
[StringLength(10, ErrorMessage = "Name should not exceed 10 characters")]
public string Name
{
    get { return this._Name; }
    set
    {
        this._Name = value;
        this.RaisePropertyChanged("Name");
    }
}
```

![Validation Label in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Validation-Label-in-Xamarin.Forms-DataForm.png)<figcaption>Validation Label in Xamarin.Forms DataForm</figcaption>

#### Counter label

Use this label to display the character count limitation in a given form field validation. To enable this feature, set the [ShowCharCount](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.DataForm.DataFormItem.html#Syncfusion_XForms_DataForm_DataFormItem_ShowCharCount "Link to ShowCharCount property of Xamarin DataForm") property to true. The character limit can be set using the  **StringLength**  attribute.

Refer to the following code example.

```csharp
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Password")
    {
        e.DataFormItem.ShowCharCount = true;
    }
}

private string _Password;

[Required(AllowEmptyStrings = false, ErrorMessage = "Password should not be empty")]
[StringLength(10, ErrorMessage = "Password should not exceed 10 characters")]
public string Password
{
    get { return this._Password; }
    set
    {
        this._Password = value;
        this.RaisePropertyChanged("Password");
    }
}
```

![Character Counter Label in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Counter-Label-in-Xamarin.Forms-DataForm.png)<figcaption>Character Counter Label in Xamarin.Forms DataForm</figcaption>

### Color customizations

Customize the in-focus, out-of-focus, error, valid message, and container colors to enrich the appearance of your application.

Refer to the following code example.

```csharp
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
dataForm.ContainerBackgroundColor = Color.Silver;

private void DataForm_AutoGeneratingDataFormItem1(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.Name == "Name")
        {
            e.DataFormItem.FocusedColor = Color.Violet;
            e.DataFormItem.UnfocusedColor = Color.Silver;
            e.DataFormItem.ErrorMessageColor = Color.DarkRed;
            e.DataFormItem.ValidMessageColor = Color.BlueViolet;
        }
    }
}
```

![Color Customizations in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Color-Customizations-in-Xamarin.Forms-DataForm.png)<figcaption>Color Customizations in Xamarin.Forms DataForm</figcaption>

## GitHub repository

You can get the complete code example for the [Xamarin.Forms DataForm with floating labels on GitHub.](https://github.com/SyncfusionExamples/Floating-label-editors-in-xamarin.forms-dataform "Link to Xamarin.Forms DataForm with Floating labels demo on GitHub")

## Conclusion

Thanks for reading! In this blog post, we’ve discussed how to add a [floating label layout](https://help.syncfusion.com/xamarin/dataform/floating-label-layout "Link to Floating label layout in Xamarin DataForm documentation") in our [Xamarin.Forms DataForm](https://www.syncfusion.com/xamarin-ui-controls/xamarin-dataform "Link to Xamarin.Forms DataForm") control. This feature helps modernize the look of your data form by showing assistive labels, leading and trailing icons, and more. For more details,  go through our [floating label layout in Xamarin DataForm documentation](https://help.syncfusion.com/xamarin/dataform/floating-label-layout "Link to Floating label layout in Xamarin DataForm documentation"). Try out the procedures in this blog post and leave your comments in the feedback section below!

The Syncfusion [Xamarin](https://www.syncfusion.com/xamarin-ui-controls "Link to Xamarin UI controls") suite has over 155 controls from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and RTE. Use them to build mesmerizing applications!

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Create a Choropleth Map in a Xamarin Application](https://dev.to/syncfusion/how-to-create-a-choropleth-map-in-a-xamarin-application-38bc "Link to How to Create a Choropleth Map in a Xamarin Application blog")
- [Easily Create a Meeting Room Calendar Using Xamarin.Forms Scheduler](https://dev.to/karthickramasamy08/easily-create-a-meeting-room-calendar-using-xamarin-forms-scheduler-58c3-temp-slug-6689711 "Link to Easily Create a Meeting Room Calendar Using Xamarin.Forms Scheduler blog")
- [Overview of the Best and Most Popular Xamarin.Forms Controls](https://dev.to/sureshmohan/overview-of-the-best-and-most-popular-xamarin-forms-controls-3d0c-temp-slug-2325662 "Link to Overview of the Best and Most Popular Xamarin.Forms Controls blog")
- [5 Tips to Easily Use the Grid for Layouts in Xamarin.Forms](https://dev.to/karthickramasamy08/5-tips-to-easily-use-the-grid-for-layouts-in-xamarin-forms-1npm-temp-slug-2577644 "Link to 5 Tips to Easily Use the Grid for Layouts in Xamarin.Forms blog")