Proposal: Update the designs of ListView and GridView!

Proposal: Update the designs of ListView and GridView!

Summary

I’m proposing design changes that would affect the way that ListView and GridView show items in their non-resting state (selected, on hover, etc.). The bulk of these design changes would be rounding the corners of List/GridView items, rounding the corners on their selection checkbox in multi-select mode, and changing the color scheme.

Rationale

• Many controls in WinUI have rounded corners, ListView and GridView should follow that trend and embrace the modern, Fluent look.
• The rounding could easily be turned off, if desired, with the ControlCornerRadius ThemeResource.

Scope

Capability	Priority
ListView and GridView items will have rounded corners when selected, hovered, or in any other non-rest state.	Must
ListView items use a tickmark identifier to show which item is selected.	Must
GridView items should have a white inner border to allow the outer accent-color border to be more visible and distinguishable.	Must
ListView and GridView items will have rounded checkboxes when in multiple selection states.	Should
This proposal won’t add new APIs or change the functionality of either of these controls.	Won’t

Important Notes

Design Mockups

Here are some mockups of the visual updates for ListView and GridView, with before and after shots:

GridView in single selection mode:

GridView in multiple selection mode:

ListView in single selection mode:

ListView in multiple selection mode:

A closer look at ListView with items of different sizes, as well as items in different states (hover, selected, focused, etc.):

Open Questions

• Are there corner cases that will be affected by this new design?

[dotMorten]

Personally if I wanted rounded corners, I’d put corner radius inside my item template. I do however see the issue with the selection box then not matching it. I’d be worried though that this breaks the look of existing apps though, and adds unexpected rounding on things that doesn’t look well for the specific design. Is there a guarantee that the corners of the item inside the item template won’t “peek out” in the corners but get correctly clipped regardless of the content inside it? (including swap chains)

The rounding could easily be turned off, if desired, with the ControlCornerRadius ThemeResource.

Please don’t do just this. It’s not discoverable, and takes a considerable amount of time to find. Instead I’d suggest adding an ItemCornerRadius property to the control. See #1626. It might also affect more controls than you intended (you might have a button inside the item template where you do want rounding).

Also I’ve found the default 2px rounding looks terrible on low-dpi devices. Has this been improved?

Another example where rounding can go wrong: https://github.com/microsoft/microsoft-ui-xaml/issues/1106

I do like this pun a lot

[mdtauk]

I will need to have a think on this before I make any concrete suggestions.

Things I would think about…

How will these work with Reveal and Xbox navigation/reveal focus visuals? There should be a distinct difference between items selected, hovered, and actually focused.

This now uses rounded corners

Xbox has a notification list that does something similar to what is being proposed.

---

Is the padding/margin between items, something that should be an exposed style value?

What about horizontally aligned and scrolling list views with text and other objects, does the selection indicator still go on the left (or right with RtL flow direction)?

Should there still be a style bundled which either falls back to the polls style, or enables the background colour of the list item to be used for selection indication?

How do these changes affect selected menu items and toggles? These currently use tick marks and radio bullets.

---

The selection border around these looks almost identical to the Focus Visual, with the white inner border. And on Xbox it would look like the Reveal Focus Visual without the glow.

---

The example of a selected item on the right, looks odd with the visual indicator not aligned to the text, thanks to the uneven bottom and top margins/padding. So how would the indicator align to the content presenter, and how are the margins handled on the content?

---

Also should the hover background be flush with the edges of the parent container of the list view. At the moment the background seems to butt up against the selection indicator, but that has some spacing between the edge of the container?