How to add custom keyboard to SfComboBox
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.
