Introduction To ReturnType Key

Today, I would like to tell you about Entry Key ReturnType. How to change ReturnKeyType keys like Search, Done, Next etc. In this article I am using Xamarin Forms PORTABLE and XAML.

 

Introduction

Today, I would like to tell you about Entry Key ReturnType. I'll tell you how to change ReturnKeyType keys like Search, Done, Next etc. In this article, I am using Xamarin.Forms PORTABLE and XAML.

Entry handles the Keyboard return key description.

  • In  iOS
    We have UITextField which has a ReturnKeyType property that you can set to a pre-assigned list.

  • In Android
    We have EntryEditText which has an ImeOptions property which helps in changing the EditText Key for Keyboard button.

Implementation

Open Visual Studio and select a "New Project".

Xamarin

Select Cross-Platform App, give the project a name, and set the project path. After that, click OK.

Xamarin

Select the template as "Blank App" and code sharing as "PCL".

Xamarin

Right-click on PCL project and select Add >> New Item or Add >> Class.

Xamarin

Now, we are creating a class CustomKeyEntry.cs and write the following C# code.

Xamarin

CustomKeyEntry.cs

  1. public class CustomKeyEntry : Entry  
  2.     {  
  3.         // Need to overwrite default handler because we cant Invoke otherwise  
  4.         public new event EventHandler Completed;  
  5.   
  6.         public static readonly BindableProperty ReturnTypeProperty = BindableProperty.Create(nameof(ReturnType),  
  7.             typeof(ReturnType), typeof(CustomKeyEntry),  
  8.             ReturnType.Done,   BindingMode.OneWay);  
  9.   
  10.         public ReturnType ReturnType  
  11.         {  
  12.             get { return (ReturnType)GetValue(ReturnTypeProperty); }  
  13.             set { SetValue(ReturnTypeProperty, value); }  
  14.         }  
  15.   
  16.         public void InvokeCompleted()  
  17.         {  
  18.             if (this.Completed != null)  
  19.                 this.Completed.Invoke(thisnull);  
  20.         }  
  21.     }  
  22.     public enum ReturnType  
  23.     {  
  24.         Go,  
  25.         Next,  
  26.         Done,  
  27.         Send,  
  28.         Search  
  29.     }  
  30. }  

We need to set ReturnType property in Android and iOS project.

Let us start with Android….

We have to create a Class in Android Project and render the entry.

Then, we set all the properties during the initialization of  PCL Project.

Xamarin

Please make sure to add dependency ([assembly: ExportRenderer(typeof(CustomKeyEntry), typeof(CustomKeyEntryRenderer))]) of Android (CustomEntryRndered) and PCL(CustomEntry).

CustomKeyEntryRenderer.cs

  1. public class CustomKeyEntryRenderer : EntryRenderer  
  2.     {  
  3.         protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)  
  4.         {  
  5.             base.OnElementChanged(e);  
  6.   
  7.             CustomKeyEntry entry = (CustomKeyEntry)this.Element;  
  8.   
  9.             if (this.Control != null)  
  10.             {  
  11.                 if (entry != null)  
  12.                 {  
  13.                     SetReturnType(entry);  
  14.   
  15.                     // Editor Action is called when the return button is pressed  
  16.                     Control.EditorAction += (object sender, TextView.EditorActionEventArgs args) =>  
  17.                     {  
  18.                         if (entry.ReturnType != ReturnType.Next)  
  19.                             entry.Unfocus();  
  20.   
  21.                         // Call all the methods attached to custom_entry event handler Completed  
  22.                         entry.InvokeCompleted();  
  23.                     };  
  24.                 }  
  25.             }  
  26.         }  
  27.   
  28.         private void SetReturnType(CustomKeyEntry entry)  
  29.         {  
  30.             ReturnType type = entry.ReturnType;  
  31.   
  32.             switch (type)  
  33.             {  
  34.                 case ReturnType.Go:  
  35.                     Control.ImeOptions = Android.Views.InputMethods.ImeAction.Go;  
  36.                     Control.SetImeActionLabel("Go", ImeAction.Go);  
  37.                     break;  
  38.                 case ReturnType.Next:  
  39.                     Control.ImeOptions = ImeAction.Next;  
  40.                     Control.SetImeActionLabel("Next", ImeAction.Next);  
  41.                     break;  
  42.                 case ReturnType.Send:  
  43.                     Control.ImeOptions = ImeAction.Send;  
  44.                     Control.SetImeActionLabel("Send", ImeAction.Send);  
  45.                     break;  
  46.                 case ReturnType.Search:  
  47.                     Control.ImeOptions = ImeAction.Search;  
  48.                     Control.SetImeActionLabel("Search", ImeAction.Search);  
  49.                     break;  
  50.                 default:  
  51.                     Control.ImeOptions = ImeAction.Done;  
  52.                     Control.SetImeActionLabel("Done", ImeAction.Done);  
  53.                     break;  
  54.             }  
  55.         }  
  56.     }  

Let’s come to iOS project. First, set the PCL(CustomEntry) property in iOS Project.

 Create a class by right-clicking on iOS Project and select Apple. Then select "Class" and give this class a name as CustomEntryRendered.cs.

Xamarin

Please make sure to add dependancy [assembly: ExportRenderer(typeof(CustomKeyEntry), typeof(CustomKeyEntryRenderer))].

Now,  let’s write some code for Entry and set the property.

CustomKeyEntryRenderer.cs

  1. public class CustomKeyEntryRenderer : EntryRenderer  
  2.     {  
  3.         protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)  
  4.         {  
  5.             base.OnElementChanged(e);  
  6.   
  7.             CustomKeyEntry entry = (CustomKeyEntry)this.Element;  
  8.   
  9.             if (this.Control != null)  
  10.             {  
  11.                 if (entry != null)  
  12.                 {  
  13.                     SetReturnType(entry);  
  14.   
  15.                     Control.ShouldReturn += (UITextField tf) =>  
  16.                     {  
  17.                         entry.InvokeCompleted();  
  18.                         return true;  
  19.                     };  
  20.                 }  
  21.             }  
  22.         }  
  23.   
  24.         private void SetReturnType(CustomKeyEntry entry)  
  25.         {  
  26.             ReturnType type = entry.ReturnType;  
  27.   
  28.             switch (type)  
  29.             {  
  30.                 case ReturnType.Go:  
  31.                     Control.ReturnKeyType = UIReturnKeyType.Go;  
  32.                     break;  
  33.                 case ReturnType.Next:  
  34.                     Control.ReturnKeyType = UIReturnKeyType.Next;  
  35.                     break;  
  36.                 case ReturnType.Send:  
  37.                     Control.ReturnKeyType = UIReturnKeyType.Send;  
  38.                     break;  
  39.                 case ReturnType.Search:  
  40.                     Control.ReturnKeyType = UIReturnKeyType.Search;  
  41.                     break;  
  42.                 case ReturnType.Done:  
  43.                     Control.ReturnKeyType = UIReturnKeyType.Done;  
  44.                     break;  
  45.                 default:  
  46.                     Control.ReturnKeyType = UIReturnKeyType.Default;  
  47.                     break;  
  48.             }  
  49.         }  
  50.     }  

Now, go to the PCL Project and write this code in MainPage.xaml.

Xamarin

As you can see in the above code, we have to set the view reference in xmlns:custom="clr-namespace:App1.CustomViews.KeyEntry" MainPage.xaml.

Write the following code for CustomKeyEntry.

MainPage.xaml

  1. <StackLayout Spacing="20" Padding="20">  
  2.       <key:CustomKeyEntry Placeholder="Done Key" ReturnType="Done" />  
  3.       <key:CustomKeyEntry Placeholder="Go Key" ReturnType="Go" />  
  4.       <key:CustomKeyEntry Placeholder="Next Key" ReturnType="Next" />  
  5.       <key:CustomKeyEntry Placeholder="Search Key" ReturnType="Search" />  
  6.       <key:CustomKeyEntry Placeholder="Send Key" ReturnType="Send" />  
  7.   </StackLayout>  

TADDAAAAA! :)

Now, your Custom Key Entry working!! If you want to watch this video tutorial, click here

Features of CustomReturnType controls

Custom ReturnType Property=(ReturnType="Search") 
and all public entry controls are available in this CustomKeyEntry.

 
Keep Share and Happy Coding...
:)