Dropdown Control In Xamarin.Forms - Part One

Introduction

Dropdown in Xamarin.Forms

Coding Part

Step 1 - Creating a new Xamarin.Forms Project

Step 2 - Creating a Dropdown View in Xamarin.Forms .NET Standard Project

1. Create a class named “Dropdown” and inherit the Dropdown with “View”. That means the Dropdown is the child of View.
   
   1. public class Dropdown : View
   2. {
   3. //...
   4. }

2. Then, we will create the required bindable properties. First, we will see what are all the properties and events required for dropdown.
   
   
   • ItemsSource - To assign the list of data to be populated in the dropdown.
   • SelectedIndex - To identify the index of selected values from the ItemsSource.
   • ItemSelected - Event for performing an action when the item selected in the dropdown.
     
     
3. Create a bindable property for the ItemsSource as shown in below.
   
   1. public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
   2. propertyName: nameof(ItemsSource),
   3. returnType: typeof(List<string>),
   4. declaringType: typeof(List<string>),
   5. defaultValue: null);
   7. public List<string> ItemsSource
   8. {
   9. get { return (List<string>)GetValue(ItemsSourceProperty); }
   10. set { SetValue(ItemsSourceProperty, value); }
   11. }

4. Create a bindable property for the SelectedIndex, as shown below.
   
   1. public static readonly BindableProperty SelectedIndexProperty = BindableProperty.Create(
   2. propertyName: nameof(SelectedIndex),
   3. returnType: typeof(int),
   4. declaringType: typeof(int),
   5. defaultValue: -1);
   7. public int SelectedIndex
   8. {
   9. get { return (int)GetValue(SelectedIndexProperty); }
   10. set { SetValue(SelectedIndexProperty, value); }
   11. }

5. Create a custom event ItemSelected for dropdown control and invoke the event, as shown below.
   
   1. public event EventHandler<ItemSelectedEventArgs> ItemSelected;
   2. public void OnItemSelected(int pos)
   3. {
   4. ItemSelected?.Invoke(this, new ItemSelectedEventArgs() { SelectedIndex = pos });
   5. }

6. Here, ItemSelectedEventArgs is a child of EventArgs, as shown below.
   
   1. public class ItemSelectedEventArgs : EventArgs
   2. {
   3. public int SelectedIndex { get; set; }
   4. }

Full Code of Dropdown View

Step 3 - Wrapping Spinner for Dropdown control in Android Project

1. Create a class file named as “DropdownRenderer” in your Android client project and add a View Renderer.
   
   1. public class DropdownRenderer : ViewRenderer<Dropdown, Spinner>
   2. {
   3. Spinner spinner;
   4. public DropdownRenderer(Context context) : base(context)
   5. {
   7. }
   8. // ...
   9. }

2. Then, override the methods “OnElementChanged” and “OnElementPropertyChanged”. OnElementChanged method is triggered on element/control initiation. OnElementPropertyChanged method is called when the element property changes.
   
   
3. Set Native Control to ViewRenderer using SetNativeControl() method in OnElementChanged override method as shown in below.
   
   1. protected override void OnElementChanged(ElementChangedEventArgs<Dropdown> e)
   2. {
   3. base.OnElementChanged(e);
   5. if (Control == null)
   6. {
   7. spinner = new Spinner(Context);
   8. SetNativeControl(spinner);
   9. }
   10. //...
   11. }