Getting started
29 Jun 20188 minutes to read
This section explains the steps required to create combo box, populate it with data, and filter suggestions. Here, we create a simple sample is created for changing the resolution. and this This section covers only the minimal features that are needed to get started with the ComboBox combo box.
Referencing Essential Studio components in your solution
After installing Essential Studio for Xamarin, find all the required assemblies in the installation folders,
{Syncfusion Installed location}\Essential Studio {version number}\lib
The assembly reference to the iOS unified project is as follows.
iOS-unifed\Syncfusion.SfComboBox.iOS.dll
Adding SfComboBox
- Add namespace for the added assemblies.
using Syncfusion.iOS.ComboBox;
- Then add the SfComboBox control with a required optimal name by using the included namespace.
SfComboBox combobox = new SfComboBox();
Adding items
A NSMutableArray of string with resolution list is created and added to the combo box source. This list is populated as suggestion list by setting the ComboBoxSource property based on text entry.
// Add the combo box Control
SfComboBox combobox = new SfComboBox();
// Set a frame to display the control
combobox.Frame = new CoreGraphics.CGRect(25,100, UIScreen.MainScreen.Bounds.Width-50, 40);
//Add the items
NSMutableArray resolutionList = new NSMutableArray();
resolutionList .Add((NSString)" 1920 x 1080");
resolutionList .Add((NSString)" 1680 x 1050");
resolutionList .Add((NSString)" 1600 x 900");
resolutionList .Add((NSString)" 1440 x 900");
resolutionList .Add((NSString)" 1400 x 1050");
resolutionList .Add((NSString)" 1366 x 768");
resolutionList .Add((NSString)" 1280 x 1024");
resolutionList .Add((NSString)" 1280 x 960");
resolutionList .Add((NSString)" 1280 x 720");
resolutionList .Add((NSString)" 854 x 480");
resolutionList .Add((NSString)" 800 x 480");
resolutionList .Add((NSString)" 480 X 640");
resolutionList .Add((NSString)" 480 x 320");
resolutionList .Add((NSString)" 432 x 240");
resolutionList .Add((NSString)" 360 X 640");
resolutionList .Add((NSString)" 320 x 240");
combobox.ComboBoxSource = resolutionList;
this.Add(combobox);
Combo box modes
The SfComboBox supports both editable and non-editable text boxes to choose selected items in given data source. Users can select an item from the suggestion box.
N > The default value of the IsEditableMode property is false
Non-editable combo box
Non-editable mode is used to prevents users from typing and allows them to select items from the drop-down list. If the IsEditable
property is set to false, the combo box is non-editable mode. In non-editable mode, the suggestion box can be displayed by clicking the control or drop-down button.
// Add the combo box Control
SfComboBox combobox = new SfComboBox();
// Set a frame to display the control
combobox.Frame = new CoreGraphics.CGRect(25,100, UIScreen.MainScreen.Bounds.Width-50, 40);
// Set the non-editable mode
combobox.IsEditable = false;
//Add the items
NSMutableArray resolutionList = new NSMutableArray();
resolutionList .Add((NSString)" 1920 x 1080");
resolutionList .Add((NSString)" 1680 x 1050");
resolutionList .Add((NSString)" 1600 x 900");
resolutionList .Add((NSString)" 1440 x 900");
resolutionList .Add((NSString)" 1400 x 1050");
resolutionList .Add((NSString)" 1366 x 768");
resolutionList .Add((NSString)" 1280 x 1024");
resolutionList .Add((NSString)" 1280 x 960");
resolutionList .Add((NSString)" 1280 x 720");
resolutionList .Add((NSString)" 854 x 480");
resolutionList .Add((NSString)" 800 x 480");
resolutionList .Add((NSString)" 480 X 640");
resolutionList .Add((NSString)" 480 x 320");
resolutionList .Add((NSString)" 432 x 240");
resolutionList .Add((NSString)" 360 X 640");
resolutionList .Add((NSString)" 320 x 240");
combobox.ComboBoxSource = resolutionList;
this.Add(combobox);
Editable combo box
In editable mode, the combo box allows users to edit in the text box that shows suggestions in the drop-down list based on the input. With the previous codes, the IsEditableMode
property is set to true. This helps users to edit the SfComboBox control.
// Add the combo box Control
SfComboBox combobox = new SfComboBox();
// Set a frame to display the control
combobox.Frame = new CoreGraphics.CGRect(25,100, UIScreen.MainScreen.Bounds.Width-50, 40);
// Set the non-editable mode
combobox.IsEditable = true;
//Add the items
NSMutableArray resolutionList = new NSMutableArray();
resolutionList .Add((NSString)" 1920 x 1080");
resolutionList .Add((NSString)" 1680 x 1050");
resolutionList .Add((NSString)" 1600 x 900");
resolutionList .Add((NSString)" 1440 x 900");
resolutionList .Add((NSString)" 1400 x 1050");
resolutionList .Add((NSString)" 1366 x 768");
resolutionList .Add((NSString)" 1280 x 1024");
resolutionList .Add((NSString)" 1280 x 960");
resolutionList .Add((NSString)" 1280 x 720");
resolutionList .Add((NSString)" 854 x 480");
resolutionList .Add((NSString)" 800 x 480");
resolutionList .Add((NSString)" 480 X 640");
resolutionList .Add((NSString)" 480 x 320");
resolutionList .Add((NSString)" 432 x 240");
resolutionList .Add((NSString)" 360 X 640");
resolutionList .Add((NSString)" 320 x 240");
combobox.ComboBoxSource = resolutionList;
this.Add(combobox);
Selecting an item
When selecting an item from the drop-down list, the selection changed event will be called. Using the following code snippet, a dialogue box will be displayed when a new item is selected from the suggestion box.
// Add the combo box Control
SfComboBox combobox = new SfComboBox();
// Set a frame to display the control
combobox.Frame = new CoreGraphics.CGRect(5,100, UIScreen.MainScreen.Bounds.Width-5, 40);
// Set the non-editable mode
combobox.IsEditable = true;
//Add the items
NSMutableArray resolutionList = new NSMutableArray();
resolutionList .Add((NSString)" 1920 x 1080");
resolutionList .Add((NSString)" 1680 x 1050");
resolutionList .Add((NSString)" 1600 x 900");
resolutionList .Add((NSString)" 1440 x 900");
resolutionList .Add((NSString)" 1400 x 1050");
resolutionList .Add((NSString)" 1366 x 768");
resolutionList .Add((NSString)" 1280 x 1024");
resolutionList .Add((NSString)" 1280 x 960");
resolutionList .Add((NSString)" 1280 x 720");
resolutionList .Add((NSString)" 854 x 480");
resolutionList .Add((NSString)" 800 x 480");
resolutionList .Add((NSString)" 480 X 640");
resolutionList .Add((NSString)" 480 x 320");
resolutionList .Add((NSString)" 432 x 240");
resolutionList .Add((NSString)" 360 X 640");
resolutionList .Add((NSString)" 320 x 240");
combobox.ComboBoxSource = resolutionList;
combobox.SelectionChanged += SfCombo_SelectionChanged;
this.Add(combobox);
void SfCombo_SelectionChanged(object sender, Syncfusion.iOS.ComboBox.SelectionChangedEventArgs e)
{
//Create Alert
var okAlertController = UIAlertController.Create("Selected Month", e.Value+" month is selected", UIAlertControllerStyle.Alert);
//Add Action
okAlertController.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
// Present Alert
PresentViewController(okAlertController, true, null);
}
You can find the complete getting started sample from this here.