Microsoft-ui-xaml: Proposal: Grouping support in ComboBox

[niels9001]

The WinUI Team has opened a Spec for this feature

Proposal: Grouping support in ComboBox

Summary

Grouping items in ComboBox is currently not supported. It was in WPF, and worked great. It's a gap we can bridge and to make it easier to port over WPF LOB apps to UWP.

Rationale

Support for item grouping would make it easier to port over WPF LOB apps to UWP.

Functional Requirements

| # | Feature | Priority |
|:-:|:--|:-:|
| 1 | ComboBox items can be grouped together in labeled categories. | Must |
| 2 | Optional setting allows groups to be collapsed. | Could |
| 3 | Multi-level groups. | Won't |

Important Notes

Open Questions

[predavid-zz]

To get the grouped behavior in the ComboBox, you could choose to add the TreeView control into it. Here is a link to the TreeView doc : https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/tree-view

[SavoySchuler]

@niels9001 Thanks for the great feedback! ComboBox isn't one of the controls available in WinUI yet - but we are planning to move it from the Windows 10 SDK to WinUI and make some improvements. We'll keep this issue open to track it as one of potential improvements to explore!

[SavoySchuler]

This proposal compliments the one I submitted for adding multi-select functionality to ComboBox. Should grouping support be implemented, group select/de-select would be a great addition to multi-select functionality for ComboBox.

[SavoySchuler]

@niels9001, I have updated this proposal with a Rationale and Functional Requirements section.

[mdtauk]

There should be styles and properties to allow the templating and styling of the Combobox Group Headings

[SavoySchuler]

@mdtauk I added your comment as Functional Requirement # 2!

[SavoySchuler]

@ChainReactive Did you ever implement a workaround in that time? I'd be eager to know if there's any pros or cons from existing 3rd party solutions you'd like us to be aware of?

[HappyNomad]

<!-- TODO: Uncomment below once grouping is possible in ComboBox -->
<!--<ComboBox.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ComboBox.GroupStyle>-->

Nope but users have complained about the lack of grouping.

[MikeHillberg]

Grouping in combo box is a standard part of the Ribbon UI as well.

[SavoySchuler]

@niels9001, @ChainReactive, and @mdtauk, thank you all for getting this feature started!

It has been approved and I have opened up a spec for it here.

We would be eager to see you all involved in our spec writing process also where you can start telling us more specifics about how you would like this feature to be implemented. It may be several months before we are able to fully commit PM & Dev resources to this feature, but your early engagement will still help jumpstart this development. Please let me know if you have any questions. I have added our default spec template and will jump into contribute when I can!

Please note that Multi-Select Functionality for ComboBox has _also_ been approved and these developments will inform and impact each other.

[SavoySchuler]

I'll be taking this again to pitch to refine the scope once more. @niels9001, @ChainReactive, and @mdtauk, were any of you _needing_ collapsible or multi-tiered groups for a published or in production app? Or are these two features properly labeled as a "could"?

[niels9001]

I personally would be fine with a simple implementation, that lets me group certain items. And a styleable groupheader.

Collapsing and multi-tiered groups would be a nice-to-have!

[SavoySchuler]

Re-pitched and marking "multi-level/hierarchical groups" as a requirement "won't" due to Flyout + TreeView solving same scenarios more capably (noting this capability could be due for a refresh via a separate proposal).

I am ready to revisit spec writing, but will be blocked on a dev resource commitment until a validation partner is located. @Niels9001, @ChainReactive, @mdtauk, could any of you point me to an app in your umbrella that you would like to use this feature in as soon as its available?

[mdtauk]

@SavoySchuler Can't cite an app specifically, but the Fluent Web ComboBox supports it, so that would bring parity, but there is also the Ribbon, which has headered sections in drop downs, and a UWP Ribbon has long been on the "coming soon" ticket.

[SavoySchuler]

Awesome.

Two customers direct messaged me to let me know they are planning to use this feature in their apps. As soon as I've wound down NumberBox, and as per the advice from @mrlacey, I will complete the first draft of the spec prior to publishing it on the spec repo - that way there's no time lost guessing what's an oversight vs. what's in-development. Until then, I welcome API, behavioral components, visual components, and accessibility consideration conversations here!

Regarding timeline, note that the preview of this feature will require the release of WinUI 3.0.

[mdtauk]

Awesome.

Two customers direct messaged me to let me know they are planning to use this feature in their apps. As soon as I've wound down NumberBox, and as per the advice from @mrlacey, I will complete the first draft of the spec prior to publishing it on the spec repo - that way there's no time lost guessing what's an oversight vs. what's in-development. Until then, I welcome API, behavioral components, visual components, and accessibility consideration conversations here!

Regarding timeline, note that the preview of this feature will require the release of WinUI 3.0.

ComboBoxGroup - A XAML element with a header property containing ComboBox Items

ComboBoxGroup.Header - Item that can not be hovered or selected, but is a header for grouping items

<ComboBox>
      <ComboBoxGroup Header="First Heading">
            <x:String>Blue</x:String>
            <x:String>Green</x:String>
            <x:String>Red</x:String>
            <x:String>Yellow</x:String>
      </ComboBoxGroup>
      <ComboBoxGroup Header="Second Heading">
            <x:String>Yes</x:String>
            <x:String>YASSS!</x:String>
      </ComboBoxGroup>
</ComboBox>

ComboBoxGroup should probably be designed to allow developers to derive from it, and create their own Groups with logic as they need.

Because the ComboBox uses a Flyout to display its contents, perhaps this Group element, should be a FlyoutGroup and maybe even a MenuFlyoutGroup which automatically handles Context Menu Radio Buttons, Context Menu Separators, etc.

[HappyNomad]

During a recent presentation to a stakeholder, the particular ComboBox's lack of grouping resurfaced as a usability issue. The grouping is essential to the sales pitch.

Regarding timeline, note that the preview of this feature will require the release of WinUI 3.0.

@SavoySchuler That timeline is disappointing. If it depends on WinUI 3.0 then why not include it in 3.0 itself rather than later?

I tried tweaking the ComboBox to make it more usable in the meantime. Another complaint is the drop down is too short. I set MaxDropDownHeight to a large number, but it has no effect! My googling indicates this is a lingering problem since 2012. Implementing grouping will be useless to me, unless the drop down can be taller. Can you include a fix in the scope here, or must I open a separate issue?

[michael-hawker]

@SavoySchuler wanted to point out this is also a WPF gap and a request we've had in the Toolkit here.

As a workaround, in the meantime, you can custom style the existing ComboBox template, swap the ScrollViewer>ItemsPresenter part to a ListView w/ Grouping enabled, and then bind the ListView's ItemsSource and SelectedItem as TemplateBindings. However, the Popup menu sticks around, so code is needed to dismiss it, especially on selection. Surprising as GroupStyle is still on ComboBox, it's just ignored.

[yoshiask]

Regarding timeline, note that the preview of this feature will require the release of WinUI 3.0.

This is rather unfortunate, as I'm currently working on a Ribbon control for the 7.0 release of the Toolkit which really needs this. As it stands, it looks like I'll be making my own custom control for this (for the Gallery).

[mdtauk]

I think it does require the source to be checked in before work can be done to it (flyouts for form controls currently can not match the compact density of the parent control for this reason)

Grouping in ComboBoxes and other Drop Downs is present in Fluent UI on the Web, so this would bring it to parity.