Some troubles using SfTextInputLayout and MVVM

[Denis]

Hi all, i'm trying to create a registration dialog using SfPopup and SfTextInputLayout (with Entries inside) bounded to a ViewModel class (very simple with name,surname,username & password -> all strings).

<sfPopup:SfPopup.ContentTemplate>
                <DataTemplate>
                    <VerticalStackLayout>


                        <inputLayout:SfTextInputLayout
                            x:Name="edRegisterUsernameLayout"
                            BackgroundColor="Transparent"
                            HelperText="Inserire il nome utente"
                            ContainerBackground="Transparent"
                            Margin="0,10,0,0"
                            HeightRequest="50"
                            WidthRequest="270"
                            LeadingViewPosition="Outside">
                                <Entry
                                    x:Name="edRegisterUsernName"
                                    BackgroundColor="#30ffffff"
                                    FontSize="18"
                                    Text="{Binding Username}"
                                />
                            <inputLayout:SfTextInputLayout.LeadingView>
                                <Label Text="" FontFamily="FontAwesome.ttf" FontSize="30" Margin="0,0,5,0" Padding="0,0,0,0" WidthRequest="30"/>
                            </inputLayout:SfTextInputLayout.LeadingView>
                        </inputLayout:SfTextInputLayout>
 ... (other fields)                  
                    </VerticalStackLayout>
                </DataTemplate>
            </sfPopup:SfPopup.ContentTemplate>
        </sfPopup:SfPopup>

    
 public class PopupViewModel : INotifyPropertyChanged

    {
        public event PropertyChangedEventHandler PropertyChanged;


        public void OnPropertyChanged([CallerMemberName] string name = "") =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));


        private string _username { get; set; }
        private string _name { get; set; }
        private string _surname { get; set; }
        private string _pass { get; set; }


        public string Username {
            get => _username;
            set
            {
                _username = value;
                OnPropertyChanged("Username");
            }
        }


        public string Name {
            get => _name;
            set
            {
                _name = value;
                OnPropertyChanged("Name");
            }
        }
        public string Surname
        {
            get => _surname;
            set
            {
                _surname = value;
                OnPropertyChanged("Surname");
            }
        }
        public string Password{
            get =>_pass;
            set
            {
                _pass = value;
                OnPropertyChanged("Password");
            }
        }
}

Seems that popup fields cannot got focus (as they're read only)... If i use only entries all works fine... any solution?

[Brundha Velusamy]

Hi Denis,

 

We are able to reproduce the reported at our end. The reported issue rises cause of the lower height request of the TextInputLayout. We would like to clarify that If we want to use the control with specific height (lower than default height), we suggests to override the default padding value using InputViewPadding instead of HeightRequest(lower than default height value), because we implement the control with default top and bottom padding value as (16). 

 

We have prepared the workaround for issue as shown in the code snippet below. We have attached the sample for your reference.

 

Please refer the below code snippet for this,

 

Code Snippet:

 

<core:SfTextInputLayout BackgroundColor="Transparent"

                                HelperText="Inserire il nome utente"

                                ContainerBackground="Transparent"

                                Margin="0,10,0,0"

                               InputViewPadding="1"

                                WidthRequest="270"

                                LeadingViewPosition="Outside">

           <Entry

                x:Name="edRegisterUsernName"

                BackgroundColor="#30ffffff"

               FontSize="18"

               Text="{Binding Description}"/>

 

</core:SfTextInputLayout>

 

Please take a look at the provided sample and let us know if you need any other details.

 

Regards,

Brundha V

Attachment: TextInputLayout_FocusIssue_970766cf.zip

[Denis]

Thank you, I'll try!

[Preethi Rajakandham]

Hi Denis,

You're welcome. Please play around with the suggested workaround. Until then, we will wait to hear from you.