Styles not applying for HintLabelStyle?

[Jesse Knott]

Hello, I have found that the FontSize, FontColor, FontFamily, and FontAttributes fields are not applying to styling for the HintLabelStyle.

For instance this code

<Stylex:Name="FieldLabel"
ApplyToDerivedTypes="True"
CanCascade="True"
TargetType="textinputlayout:TextInputHintLabel">
<SetterProperty="FontFamily"Value="{StaticResourceKey=Baloo2-Regular}"/>
<SetterProperty="FontSize"Value="18"/>
<SetterProperty="BackgroundColor"Value="Red"/>
<SetterProperty="FontAttributes"Value="Bold"/>
Style>

Only changes the background color for the HintLabel to Red. None of the other fields are applied.
Is there something else I have to do? I Have applied the style nested 

<Style
ApplyToDerivedTypes="True"
CanCascade="True"
TargetType="textinputlayout:SfTextInputLayout">
<SetterProperty="HintLabelStyle"Value="{StaticResourceKey=FieldLabel}"/>
Style>

and I have tried applying the style directly

<textinputlayout:SfTextInputLayout
ContainerType="Outlined"
Hint="Manufacturer"
HintLabelStyle="{StaticResourceKey=FieldLabel}"
ShowHint="True">

However if I set it in the code behind 

mfgInput.HintLabelStyle=newSyncfusion.XForms.TextInputLayout.LabelStyle(){FontSize=30,FontAttributes=FontAttributes.Bold};

it does apply the text size, attributes, and family, but the other color settings don't seem available there?

Cheers!

[Sridevi Sivakumar]

Hi Jesse Knott, 

 

Greetings from Syncfusion. 

 

Query:  Only changes the background color for the HintLabel to Red. None of the other fields are applied. Is there something else I have to do? I Have applied the style nested

We have analyzed your shared code snippet. We can't use style for TextInputHintLabel to customize the the hint label text, because its style override by HintLabelStyle property values.  You can apply the style for hint label by using the below two solutions.

Solution 1: 
We can customize the hint label by applying the implicit style directly to the SfTextInputLayout as per below code snippet. 

[App.XAML] 

   <Application.Resources> 

        <ResourceDictionary> 

            <Style TargetType="{x:Type inputLayout:SfTextInputLayout}"> 

                <Setter Property="HintLabelStyle"> 

                    <Setter.Value> 

                        <inputLayout:LabelStyle FontSize="18" FontAttributes="Bold"> 

                            <inputLayout:LabelStyle.FontFamily> 

                                <OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf#Lobster-Regular" WinPhone="Assets/Fonts/Lobster-Regular.ttf#Lobster" /> 

                            </inputLayout:LabelStyle.FontFamily> 

                        </inputLayout:LabelStyle> 

                    </Setter.Value> 

                </Setter> 

            </Style> 

        </ResourceDictionary> 

    </Application.Resources> 

 

  

Solution 2:
Add the HintLableStyle in the Resources section and set the resource key value to the SfTextInputLayout HintLabelStyle as shown in the below code. 

[XAML]: 

          <ContentPage.Resources> 

                    <inputLayout:LabelStyle x:Key="HintLabelStyle" FontSize="18" FontAttributes="Bold"> 

                            <inputLayout:LabelStyle.FontFamily> 

                                <OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf#Lobster-Regular" WinPhone="Assets/Fonts/Lobster-Regular.ttf#Lobster" /> 

                            </inputLayout:LabelStyle.FontFamily> 

                    </inputLayout:LabelStyle> 

    </ContentPage.Resources> 

    <ContentPage.Content> 

        <inputLayout:SfTextInputLayout ContainerType="Outlined" Hint="Manufacturer" ShowHint="True"   HintLabelStyle="{StaticResource HintLabelStyle}"> 

            <Entry/> 

        </inputLayout:SfTextInputLayout> 

    </ContentPage.Content> 

 

Using HintLabelStyle, you can customize the fonts excepts it color. For customize the hint label color using the Syncfusion theme dictionary keys as shown in the below code.  
[MainPage.XAML] 

    <ContentPage.Resources> 

        <syncTheme:SyncfusionThemeDictionary> 

            <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

                <ResourceDictionary> 

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

                    <!--Hint Color for focused state--> 

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

                    <!--Hint Color for default state--> 

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

                </ResourceDictionary> 

            </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

        </syncTheme:SyncfusionThemeDictionary> 

    </ContentPage.Resources> 

 

For more information refer below KB
https://www.syncfusion.com/kb/11659/how-to-customize-the-properties-of-outline-border-colors-hint-name-helper-text-error-text

Please have a sample from the below link 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted_(1)_(1)-1245820554

Note: We don't have support for setting the background color to the hint label.

Let us know if you need any further assistance.

Regards,
Sridevi S. 

 

[Jesse Knott]

Thanks, I believe this has helped with the initial problem I have had. I am still testing, but I'd go ahead and mark this as working.
I am however having another problem similar to this, I'll post it in the forum in a new thread since it's a different control but similar issue.

[Eswaran Thirugnanasambandam]

Hi Jesse Knott, 

  

Thanks for your update.  

 

We are glad to hear that given suggestion works at your end. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Eswaran