How to customize the properties of (outline border colors, hint name, helper text, error text, and char count) of TextInputLayout in Xamarin.Forms
The Syncfusion SfTextInputLayout control in Xamarin.Forms provides support for color customization in outline Border and assistive labels.
Refer to this Getting Started documentation to create a simple TextInputLayout sample.
Color Customization for Outline Border:
Color customization of outline border can be achieved by setting respective color for FocusedColor (focussed state) and UnfocusedColor (unfocussed state) properties of SfTextInputLayout as shown in below code snippet.
XAML:
<StackLayout VerticalOptions="Center" HorizontalOptions="StartAndExpand"> <inputLayout:SfTextInputLayout Hint="Email" ContainerType="Outlined" HelperText="Enter your email" FocusedColor=" DarkCyan" UnfocusedColor="Gray"><Entry/> </inputLayout:SfTextInputLayout> </StackLayout>
Color Customization for Assistive Labels:
By merging the below mentioned keys in application resources, it is possible to customize the appearance of the SfTextInputLayout without merging common theme resource and control style resource dictionaries as shown in below code snippet.
Assistive Label | Keys |
|---|---|
Hint | SyncPrimaryLightColor |
Helper Text | SfTextInputLayoutHelperTextColor |
Counter Text | SfTextInputLayoutCounterLabelColor |
Error Text | SfTextInputLayoutErrorTextColor |
XAML:
<Application.Resources> <syncTheme:SyncfusionThemeDictionary> <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> <ResourceDictionary> <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String> <!--Hint Color for focused state--> <Color x:Key="SyncPrimaryLightColor"> Black </Color> <!--Hint Color for default state--> <Color x:Key="SfTextInputLayoutHintColor">Gray</Color> <!--Border Color for focused state--> <Color x:Key="SyncPrimaryColor"> DarkCyan </Color> <!--Border Color for default state--> <Color x:Key="SfTextInputLayoutLineColor">Gray</Color> <!--Helper text Color for default state--> <Color x:Key="SfTextInputLayoutHelperTextColor"> BlueViolet</Color> <!--Character count text Color for default state--> <Color x:Key="SfTextInputLayoutCounterLabelColor"> DarkGoldenrod</Color> <!--Error text Color for default state--> <Color x:Key="SfTextInputLayoutErrorTextColor">Red</Color> </ResourceDictionary> </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> </syncTheme:SyncfusionThemeDictionary> </Application.Resources>
To know more information about customization using keys in theme dictionary, refer the documentation: keys
View the sample in GitHub
See also:
How to create a rounded corner textinputlayout
How to change the cursor color in textinputlayout
How to apply linebreakmode for labels in textinputlayout
Also refer our feature tour page to know more about the features available in TextInputLayout cotrol.
