SfTextInputLayout different Hint and Outline colour/thickness

[Geoff]

Hi,

I have a couple questions about the SfTextInputlayout with ContainerType Outline.  

1. Is there a way to have separate colours for the Hint and Outline?  
2. Can the Hint size and Outline thickness be configured?
   

Thanks,

Geoff

[Lakshmi Radha Krishnan]

Hi Geoff,

 

Greetings from Syncfusion.

 

Query 1: Is there a way to have separate colours for the Hint and Outline?  

 

Yes, you can provide different color for the Hint and Outline in the SfTextInputLayout using the unique color key specified in the SyncfusionThemeDictionary. Please refer the below code snippet.

 

Reference Link: https://help.syncfusion.com/xamarin/themes/keys#sftextinputlayout

 

Code Snippet:

 

App.xaml:

 

<Application.Resources>

    <syncTheme:SyncfusionThemeDictionary>

        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries>

            <ResourceDictionary>

                <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String>

                <Color x:Key="SyncPrimaryLightColor">Green</Color>

                <Color x:Key="SyncPrimaryColor">Red</Color>

                <Color x:Key="SfTextInputLayoutHintColor">Blue</Color>

                <Color x:Key="SfTextInputLayoutLineColor">Aqua</Color>

            </ResourceDictionary>

        </syncTheme:SyncfusionThemeDictionary.MergedDictionaries>

    </syncTheme:SyncfusionThemeDictionary>

</Application.Resources>

 

 

Query 2: Can the Hint size and Outline thickness be configured?

 

You can change the hint size using the FontSize property in the HintLabelStyle property and the outline thickness can be changed using the FocusedStrokeWidth and UnfocusedStrokeWidth property. Please check the reference link.

 

Link:

https://help.syncfusion.com/xamarin/sftextinputlayout/how-to#customize-the-thickness-of-stroke

https://help.syncfusion.com/xamarin/sftextinputlayout/custom-font#hint

 

Code Snippet:

 

Xaml:

 

<inputLayout:SfTextInputLayout Hint="Hint" ContainerType="Outlined" FocusedStrokeWidth="4" UnfocusedStrokeWidth="4">

            <inputLayout:SfTextInputLayout.HintLabelStyle>

                <inputLayout:LabelStyle FontSize="15"/>

            </inputLayout:SfTextInputLayout.HintLabelStyle>

            <Entry />

</inputLayout:SfTextInputLayout>

 

 

We have attached the sample, please download it from the following location.

 

Sample: https://www.syncfusion.com/downloads/support/forum/148404/ze/TextInputLayoutSample1790275936

 

Please let us know if you need further assistance on this.

 

Regards,

Lakshmi R. 

[Mark]

Along the same lines, is it possible to change the background of the hint? It looks pretty weird when i have a white background for the main control. I still want the main hint (ideally centered but that doesn't seem possible), but when the control is focused and the hint raises to the top, i'd like more control either over colour or preventing it from raising up.

[Divya Venkatesan]

Hi Mark, 

 

Greetings from Syncfusion. 

 

Query 1: is it possible to change the background of the hint? 

Applying background color to hint label cannot be done as per our current design. Because the position of the floated hint has been divided into two-half, one half is placed inside the control and the remaining half is placed outside the control. Hence, it will not look good if we apply a background color to it. 

 

Query 2: preventing hint from raising up. 

You can hide the hint on focus instead of raising up by setting EnableFloating property of SfTextInputLayout as false. 

 

Code snippet [Xaml]: 

 

<inputLayout:SfTextInputLayout EnableFloating="False" Hint="Name"> 

    <Entry /> 

</inputLayout:SfTextInputLayout> 

 

UG link: https://help.syncfusion.com/xamarin/text-input-layout/getting-started#adding-hint  

 

Please let us know if you need any further assistance. 

 

Regards, 

Divya Venkatesan 

[Laurence Cortana]

Hello,

I am also interested in a solution for outlined entries. I would really like to have the ability to set the hint's background color (while focused) to half blue - half white, considering Mark's example. Is there a way this could be achieved? Thanks in advance. 

[Ramya Soundar Rajan]

Hi Laurence Cortana,

We have checked your reported query. We would like to inform you that from our current implementation, we can’t give the two colors for the hint background color for the SfTextInputLayout.  

 

Regards, 

Ramya S