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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to switch the focus from Xamarin.Forms text input layout to the next focusable control (SfTextInputLayout)

Platform: Xamarin.Forms |
Control: SfTextInputLayout |
Published Date: July 24, 2020 |
Last Revised Date: July 24, 2020

 

The Syncfusion SfTextInputLayout in Xamarin enables the user to move to the next entry control while Next button is pressed for ReturnType as shown in the following image.

 

Focus switch to another element

 

 

Let us have a UI construction like setting TextInputLayout container with input view as entry along with the multiple entry controls inside the stack layout. In that case, move the focus to the next focusable element with the following steps:

 

Step 1: Set the entry ReturnType property to Next and invoke the Completed event in TextInputLayout. So, when selecting the Next button, move to the next editable element.

 

<StackLayout x:Name="Layout" Margin="10,40,10,10">
        <inputLayout:SfTextInputLayout x:Name="textInputLayout" ContainerType="Filled" Hint="Message" UnfocusedColor="DarkGray">
        <!--Invoke Completed event and set Next as ReturnType-->
            <Entry Completed="Handle_Completed" ReturnType="Next" TabIndex="1" />
        </inputLayout:SfTextInputLayout>
        <inputLayout:SfTextInputLayout x:Name="textInputLayout1" ContainerType="Filled" Hint="Message" UnfocusedColor="DarkGray">
            <Entry Completed="Handle_Completed" ReturnType="Next" TabIndex="2" />
        </inputLayout:SfTextInputLayout>
        <inputLayout:SfTextInputLayout x:Name="textInputLayout2" ContainerType="Filled" Hint="Message" UnfocusedColor="DarkGray">
            <Entry Completed="Handle_Completed" ReturnType="Next" TabIndex="3" />
        </inputLayout:SfTextInputLayout>
        <Entry Completed="Handle_Completed" ReturnType="Next" TabIndex="4" />
    </StackLayout>

 

Step 2: Inside the completed event, get the current index of the visual element using the TabIndex property.

 

Step 3: Iterate the next element using the FindNextElement method from the parent layout. Set focus for the next element, that is iterated from FindNextElement method.

 

void Handle_Completed(object sender, System.EventArgs e)
{
            var tabs = Layout.GetTabIndexesOnParentPage(out int count, false);
            var visual = sender as Xamarin.Forms.VisualElement;
            var currentIndex = visual.TabIndex;
            var nextFocus = Layout.FindNextElement(true, tabs, ref currentIndex);
 
            (nextFocus as Xamarin.Forms.VisualElement)?.Focus();
}

 

View the Sample in GitHub.

 

See also

How to create a rounded corner SfTextInputLayout in Xamarin.Forms

How to vertically center align icons in leading and trailing views

How to apply LineBreakMode for labels in SfTextInputLayout

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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