How to switch the focus from Xamarin.Forms text input layout to the next focusable control (SfTextInputLayout)
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.
|
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();
}
