How to make editable dropdown or combobox in xamarin form.

BhautikBhautik Member ✭✭✭

Hello All,

How to make editable dropdown or combobox in xamarin form?

Tagged:

Answers

  • JohnHardmanJohnHardman GBUniversity mod

    @Bhautik said:
    Hello All,

    How to make editable dropdown or combobox in xamarin form?

    You can use a third-party component, such as https://www.syncfusion.com/xamarin-ui-controls/combobox
    or you can Google/search the forum as this question has been asked many times before.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Just be aware that you are drifting away from mobile software paradigms if you do.
    Mobile software doesn't generally use 'drop downs'. That's what the Picker is for.
    So if you need to stay with 1990's look and feel, go for it. Otherwise you might consider this being a good time to update the look of your new app to current expectations.

  • JarvanJarvan Member, Xamarin Team Xamurai

    You can try to custom a PickerRenderer.

    1. Create a CustomPicker.cs in shared project

        public class CustomPicker : Picker
        {
        }
    

    2. Create a CustomPickerRenderer.cs

    [assembly : ExportRenderer(typeof(CustomPicker),typeof(CustomPickerRenderer))]
    namespace App4.Droid
    {
        public class CustomPickerRenderer : PickerRenderer
        {
            public CustomPickerRenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
            {
                base.OnElementChanged(e);
                SetControlStyle();
            }
    
            protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                base.OnElementPropertyChanged(sender, e);
                SetControlStyle();
            }
    
            private void SetControlStyle() {
                if (Control != null) {
                    Drawable imageDropDownArrow = Resources.GetDrawable(Resource.Drawable.ddarrow);
                    imageDropDownArrow.SetBounds(5,5,5,5);
                    Control.SetCompoundDrawablesRelativeWithIntrinsicBounds(null,null,imageDropDownArrow,null);
                }
            }
        }
    }
    

    3. Introduct the custompicker in page.xaml

    <StackLayout>
        <Label Text="Custom_Dropdown"
                    HorizontalOptions="FillAndExpand" />
        <local:CustomPicker
                    WidthRequest="250"
                    HorizontalOptions="FillAndExpand">
            <Picker.Items>
                <x:String>Deep House</x:String>
                <x:String>Trance</x:String>
                <x:String>Progressive House</x:String>
                <x:String>New Age</x:String>
            </Picker.Items>
            <Picker.SelectedIndex>0</Picker.SelectedIndex>
        </local:CustomPicker>
    </StackLayout>
    

    As the picker shows:

  • BhautikBhautik Member ✭✭✭

    @yelinzh said:
    You can try to custom a PickerRenderer.

    1. Create a CustomPicker.cs in shared project

        public class CustomPicker : Picker
        {
        }
    

    2. Create a CustomPickerRenderer.cs

    [assembly : ExportRenderer(typeof(CustomPicker),typeof(CustomPickerRenderer))]
    namespace App4.Droid
    {
        public class CustomPickerRenderer : PickerRenderer
        {
            public CustomPickerRenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
            {
                base.OnElementChanged(e);
                SetControlStyle();
            }
    
            protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                base.OnElementPropertyChanged(sender, e);
                SetControlStyle();
            }
    
            private void SetControlStyle() {
                if (Control != null) {
                    Drawable imageDropDownArrow = Resources.GetDrawable(Resource.Drawable.ddarrow);
                    imageDropDownArrow.SetBounds(5,5,5,5);
                    Control.SetCompoundDrawablesRelativeWithIntrinsicBounds(null,null,imageDropDownArrow,null);
                }
            }
        }
    }
    

    3. Introduct the custompicker in page.xaml

    <StackLayout>
        <Label Text="Custom_Dropdown"
                    HorizontalOptions="FillAndExpand" />
        <local:CustomPicker
                    WidthRequest="250"
                    HorizontalOptions="FillAndExpand">
            <Picker.Items>
                <x:String>Deep House</x:String>
                <x:String>Trance</x:String>
                <x:String>Progressive House</x:String>
                <x:String>New Age</x:String>
            </Picker.Items>
            <Picker.SelectedIndex>0</Picker.SelectedIndex>
        </local:CustomPicker>
    </StackLayout>
    

    As the picker shows:

    But its input is not editable.

  • JarvanJarvan Member, Xamarin Team Xamurai

    What feature do you want to achieve? Type sth in the editText, then get the relevant items?

Sign In or Register to comment.