)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add custom keyboard to SfComboBox

Platform: Xamarin.Forms |
Control: SfComboBox |
Published Date: January 8, 2019 |
Last Revised Date: June 24, 2019

Step 1: Create a custom renderer for SfComboBox control.

A custom SfComboBox control can be created by sub-classing the SfComboBox control as demonstrated in the following codes.

XAML

Mainpage.Xaml
 
<ContentPage.Content>
           <ContentPage.Content>
        <StackLayout Padding="50">
            <local:CustomComboBox IsEditableMode="true" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

 

C#

MainPage.Xaml.cs
 
    public class CustomComboBox : SfComboBox 
    {
        public CustomComboBox()
        {
 
        }
    } 

 

The custom SfComboBox control is created in .NET Standard library project, and it is simply an SfComboBox control. The customization of the control will be carried out in the custom renderer, so no additional implementation is required in the custom SfComboBox control.

 

Step 2: Create a custom renderer in Android.

 

C#

[assembly : ExportRenderer(typeof(CustomComboBox),typeof(ComboBoxRenderer))]
 
namespace Auto_Renderer.Droid
{
   
    public class ComboBoxRenderer : SfComboBoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                   //-----######--------
                  // Set the Email keyboard for android 
                   //-----######--------
                Control.GetAutoEditText().InputType = Android.Text.InputTypes.TextVariationEmailAddress;
            }
        }
 
    }
} 

 

The call to the base class's OnElementChanged method instantiates an Android SfComboBox with a reference to assign the control to the renderer's Control property.

To add Email-Keyboard to SfComboBox in Android, use Android.Text.InputTypes.TextVariationEmailAddress

 

Step 3: Create a custom renderer in iOS.

 

C#

[assembly: ExportRenderer(typeof(CustomComboBox), typeof(ComboBoxRenderer))]
namespace Auto_Renderer.iOS
{
    public class ComboBoxRenderer : SfComboBoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SfComboBox> e)
        {
            base.OnElementChanged(e);
 
            if (Control != null)
            {
                   //-----######--------
                  // Set the Email keyboard for iOS 
                   //-----######--------
 
                Control.TextField.KeyboardType = UIKeyboardType.EmailAddress; 
            }
        }
    }
}

 

The call to the base class's OnElementChanged method instantiates an iOS SfComboBox with a reference to assign the control to the renderer's Control property. 

 

To add Email-Keyboard to SfComboBox in iOS, use UIKeyboardType.EmailAddress

 

Step 4: Create a custom renderer in UWP.

 

C#

[assembly: ExportRenderer(typeof(CustomComboBox), typeof(ComboBoxRenderer))]
namespace Auto_Renderer.UWP
{
    public class ComboBoxRenderer : SfComboBoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.ComboBox.SfComboBox> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                       //-----######--------
                      // Set the Email keyboard for UWP 
                     //-----######--------
 
                var scope = new InputScope();
                var name = new InputScopeName();
                name.NameValue = InputScopeNameValue.EmailNameOrAddress;
                scope.Names.Add(name);
                Control.InputScope = scope;
            }
        }
    }
}
 

 

The call to the base class's OnElementChanged method instantiates an SfComboBox control with a reference to assign the control to the renderer's Control property.

To add Email-Keyboard to SfComboBox in UWP, use InputScopeNameValue.EmailNameOrAddress.


You can download the entire source code of this demo.

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
Live Chat Icon