Forum Xamarin Xamarin.Forms

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 admin

    @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?

  • MowCeffMowCeff Member ✭✭
    edited April 2

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

    Hello, I know it's been a while but I see this post can be relevant to me. I want to, if possible, have my picker with default items and if these items don't suit the user pleasure, he can put a new item in the picker and use this value to whatever the pickers does. Any way to achieve that ? Thanks :)

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited April 2

    You can add an Entry for the user to add the custom item and add a Button to complete the input event. Then detect the button's click event to add the item to the picker.

  • rsscorpiorsscorpio Member
    I want to reduce Picker Control popup width. Please help
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @rsscorpio said:
    I want to reduce Picker Control popup width. Please help

    Picker comes from the operating system. Either Android or iOS or Windows.
    If you want to change how it is rendered, you'll have to make a CustomerRenderer for it.
    Check out the Xamarin Documentation for CustomerRenderer

Sign In or Register to comment.