How to display Drop Down in xamarin form. IOS - xaml

Question

This Is My IOS IPad Page I want to display dropdown as show in image ,Pleases help me how can I write a code ,
I have use picker for that but the menu item is display on bottom ,How i resolve this issue

Answer 1

Here is a workaround that achieve such "Drop Down" via "control combination".
First, add a UITextField on the view to show the item selected.
UITextField _dropTextField;
UIView _dropDownView;
UIPickerView _pickerView;
public override void ViewDidLoad()
{
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.
this.View.BackgroundColor = UIColor.White;
// add textfield
_dropTextField = new UITextField();
_dropTextField.Frame = new CGRect(100, 100, 300, 30);
_dropTextField.BackgroundColor = UIColor.Gray;
this.View.AddSubview(_dropTextField);
// call CreateDropDownView
CreateDropDownView();
}
Second, define a method that create a custom UIView holds a UIPickerView.
// create a custom UIView to show pickView
private void CreateDropDownView()
{
_dropDownView = new UIView(new CGRect(_dropTextField.Frame.X, _dropTextField.Frame.Y,
_dropTextField.Frame.Width, 300));
_dropTextField.Delegate = this;
_pickerView = new UIPickerView();
_pickerView.Frame = new CGRect(_dropTextField.Bounds.X, _dropTextField.Bounds.Y + _dropTextField.Frame.Height, _dropTextField.Frame.Width, 300);
PeopleModel pickerModel = new PeopleModel(_dropTextField, _dropDownView);
_pickerView.Model = pickerModel;
_dropDownView.AddSubview(_pickerView);
}
Then, to show the UIView when TextField focused, you also need to implement interface IUITextFieldDelegate.
// show pickerview
[Export("textFieldShouldBeginEditing:")]
public bool ShouldBeginEditing(UITextField textField)
{
View.AddSubview(_dropDownView);
UIApplication.SharedApplication.KeyWindow.BringSubviewToFront(_pickerView);
return false;
}
As for the PeopleModel in the above code, please refer to "class PeopleModel" in this documentation. Also, you need to override some method in it.
private UITextField dropTextField;
private UIView dropDownView;
public PeopleModel(UITextField dropTextField, UIView dropDownView)
{
this.dropDownView = dropDownView;
this.dropTextField = dropTextField;
}
public override nint GetComponentCount(UIPickerView pickerView)
{
return 1;
}
// ...
public override void Selected(UIPickerView pickerView, nint row, nint component)
{
dropDownView.RemoveFromSuperview();
dropTextField.Text = $"{names[pickerView.SelectedRowInComponent(0)]}";
}
// ...