We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfTextInputLayout different Hint and Outline colour/thickness

Thread ID:

Created:

Updated:

Platform:

Replies:

148404 Oct 17,2019 08:29 PM UTC Feb 7,2020 05:41 AM UTC Xamarin.Forms 3
loading
Tags: SfTextInputLayout
Geoff
Asked On October 17, 2019 08:29 PM UTC

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 [Syncfusion]
Replied On October 18, 2019 06:19 AM UTC

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
Replied On February 6, 2020 10:58 AM UTC

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 [Syncfusion]
Replied On February 7, 2020 05:41 AM UTC

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> 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Divya Venkatesan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon