Align the Helper Text/Error text that has Leading View Icon

[Yas]

Good day,

Would like to ask if there's a way to override the position of Helper/Error text on SfTextInputLayout  thas has Icon (LeadingVIew)? I need to align the helper text starting from the icon until the end of control.

Attachment: Capture_9de52239.zip

[Muneesh Kumar G]

Hi Abdiel corda, 

  

Greetings from Syncfusion.  

  

We have analyzed your requirement and we have achieved that by adding helper text in leading view as per the below code snippet.  

  

Code snippet 

 

<inputLayout:SfTextInputLayout Hint="Name" LeadingViewPosition="Inside"  

                                       ContainerType="Outlined"> 

             

            <Entry x:Name="entry" TextChanged="Entry_TextChanged"/> 

             

            <inputLayout:SfTextInputLayout.LeadingView> 

                <StackLayout Orientation="Horizontal" WidthRequest="120"> 

                    <Label  Text="&#x1F5D3;" Margin="5,0,5,0" VerticalTextAlignment="Center"/> 

                    <Label Text="Enter Name" x:Name="label1" VerticalTextAlignment="Center"/> 

                </StackLayout> 

                

            </inputLayout:SfTextInputLayout.LeadingView> 

             

        </inputLayout:SfTextInputLayout> 

 

 

private void Entry_TextChanged(object sender, TextChangedEventArgs e) 

        { 

            if(Regex.IsMatch(entry.Text, @"^[a-zA-Z]+$")) 

            { 

                label1.Text = "Enter Name"; 

                label1.TextColor = Color.Black; 

            } 

            else 

            { 

                label1.Text = "Invalid Name"; 

                label1.TextColor = Color.Red; 

            } 

        } 

 

We have prepared a sample based on this and it can be downloaded from the link below.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161850/ze/Sample881694657 

 

Let us know if you have any other queries.  

 

Thanks,  

Muneesh Kumar G  

 

[Yas]

Hi, thank you for your reply. My bad, my explanation was wrong, please see the my latest attached file for the requirement. 

Attachment: NEED_669ca56f.rar

[Muneesh Kumar G]

Hi Abdiel corda,  

 

Thanks for your update.  

 

We have analyzed your requirement and current we don’t have direct support for this. So, we have achieved that by extending SfTextInputLayout and changed helper label grid position as per the below code snippet.  

 

Code snippet 

 

public class SfTextInputLayoutExt : SfTextInputLayout 

    { 

                        public SfTextInputLayoutExt() :base() 

                           { 

                                    Grid grid = typeof(SfTextInputLayout).GetField("bottomGrid", System.Reflection.BindingFlags.NonPublic | 

                                                System.Reflection.BindingFlags.Instance).GetValue(this) as Grid; 

 

                                    Grid.SetColumn(grid, 0); 

                         } 

    } 

 

 

 

<local:SfTextInputLayoutExt Hint="Name" LeadingViewPosition="Inside"   

                                   HelperText="Enter Name" ShowHelperText="True" 

                                       ContainerType="Outlined"> 

 

        <Entry x:Name="entry" /> 

 

        <inputLayout:SfTextInputLayout.LeadingView> 

            <Label  Text="&#x1F5D3;"/> 

        </inputLayout:SfTextInputLayout.LeadingView> 

 

    </local:SfTextInputLayoutExt> 

 

 

Let us know if you have any other queries.  

 

Thanks, 

Muneesh Kumar G