As you know, combobox dropdowns allow users to quickly select a value from a list. Though a combobox is a common UI element within desktop applications, it may be challenging to incorporate it inside a mobile app. In this blog post, I'll describe instances where you should stick to a different dropdown mode and which DevExpress .NET MAUI ComboBox APIs to use for the best possible mobile-first user experience.
Challenges when Using Dropdowns in Mobile Apps
The limited mobile app viewport should always be considered when designing a mobile application. If you decide to use a classic (dropdown) combobox, you may encounter challenges as the control has a small footprint in its collapsed state and users may find it difficult to select values from a small dropdown.
Our .NET MAUI ComboBoxEdit gives you a few options to address dropdown/selection-related UX issues:
1. Popup Mode
In this mode, our ComboBox opens as a standard modal dropdown. Despite visual similarities, this mode offers the following advantages:
- It can fit more list items if you open it in full screen.
- The popup appears in the same location each time users activate it. This produces a more intuitive/predictable user experience.
To display our .NET MAUI Combobox dropdown in a Popup, set the ComboBoxEdit.PickerShowMode to Popup.
2. Bottom Sheet Mode
The DevExpress .NET MAUI Suite includes a BottomSheet control. This control is a resizable panel displayed at the bottom of the screen. With our v23.1 release, the ComboBoxEdit can display its item list within this BottomSheet. You may want to consider this option if most used list items are at the top of your list. In this instance, users can select an item when the BottomSheet is partially expanded but still have the ability to expand the list as needed.
Set the ComboBoxEdit.PickerShowMode to BottomSheet to display the dropdown within the BottomSheet.
3. Separate Page Mode
If your item list spans a full page (or larger), Separate Page mode is a good choice as it allows you to display the list on a separate page. You can enable this UI option by setting the ComboBoxEdit.PickerShowMode to Page.
Conclusion
The three options I've outlined in this post should address a variety of usage scenarios. If you have a specific use-case our Combobox does not effectively address, feel free to submit a support ticket using the DevExpress Support Center. We'll be happy to review your usage requirements and follow up with you.
If you are new to .NET MAUI or our .NET MAUI product line, be sure to follow the DevExpress .NET MAUI Blog for more mobile UI-related tips and tricks.