Microsoft-ui-xaml: Proposal: Update the designs of ListView and GridView!

[anawishnoff]

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?

[chingucoding]

How would the dark and high contrast variation of the new styles look like?

@mdtauk I think this might be interesting for you!

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

[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]

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

The Corner Radius values are changing to 4px for controls, and 8px for Overlays.

The 4px grid that WinUI uses for its layout - may be the reason for this change in value - it was partially discussed in another issue

_Originally posted by @Felix-Dev in https://github.com/microsoft/microsoft-ui-xaml/pull/3514#discussion_r513780900_

[Jaiganeshkumaran]

This looks great but instead of the navigation view like selection for list view, why not highlight the border like what GridView does?

[mdtauk]

This looks great but instead of the navigation view like selection for list view, why not highlight the border like what GridView does?

Multiple list items beside each other, could look very messy and visually heavy with borders around everything.

It could also make it harder to distinguish between a selected item, and a focused item

[Jaiganeshkumaran]

How about highlighting with an accent colour like the old design?

[mdtauk]

How about highlighting with an accent colour like the old design?

I would guess they are trying to create less cluttered approaches to handling list selections, and to better distinguish between item states like Hover and pressed, focused states, and selected states.

[Jaiganeshkumaran]

For single selection, it's fine but multiple selections look weird

[robloo]

ListView

Pros:

1. I like the change for selection to just be a colored bar to the side. It fits with other conventions such as in the NavView too.
2. That solves some contrast issues when the user selects an accent color that won't quite work with the ListViewItem content.

Cons:
The rounded corners and spacing on/between ListViewItems doesn't look right to me:

1. It looks a bit unprofessional for some reason. Like something for a school classroom.
2. The density is a problem. ListView is used to display data -- with virtualization a lot of data. I don't want the padding there and the first thing I would do is remove it so a decent number of items can be displayed when needed.
3. I thought we had this decided a while ago... rounded corners on elements in a list don't look right. If you want to round a list view you can only round the top/bottom/left/right corners of the ListView itself -- not the items.

GridView

Pros:
For the GridView the rounded corners and padding actually work better. That control is generally used to display different types of data and your proposal works there.

Cons:
You are sticking with the old-style selection border around the entire content. Seems this should align somehow with the new ListView selection indicator.

Overall

I think it's great that Microsoft is looking at refreshed designs. But as always before you finish with the last (actually adopting Fluent 1.x in the entire OS) you seem to be moving on to something else. Is more fragmentation a KPI? :)

This is a good time to mention we need AlternatingRowBackground support like what we had in WPF.

[mdtauk]

For single selection, it's fine but multiple selections look weird

That may well be valid feedback. The proposed list view Selected indicator falls in line with controls like the NavigationView and Pivot. Now does that present a behavioural expectation from a list view? Would it confuse people to have a ListView with this style, alongside the NavigationView's sidebar?

Xbox's Notification display has the new indicator full height with the ListView Item.

1. The density is a problem. ListView is used to display data -- with virtualization a lot of data. I don't want the padding there and the first thing I would do is remove it so a decent number of items can be displayed when needed.

This is something that the Compact resources could mitigate for.

1. I thought we had this decided a while ago... rounded corners on elements in a list don't look right. If you want to round a list view you can only round the top/bottom/left/right corners of the ListView itself -- not the items.

Providing there is enough spacing between items, a list view of "cards" may not look bad.

Other ways to handle it is a border/separator between items.

---

List and Grid Views are some of the most customised elements used in apps I would say. So whatever the default is, should not get in the way of whatever app does with theirs.

Something like Xbox or Netflix would use a card or album art style grid or list - whilst

Outlook would be mostly text, icons, or profile images.

Twitter would be blocks of text.

Do these lists exist in a box within a page, or filling columns of a UI layout? This would greatly alter how these defaults would look.

[Jaiganeshkumaran]

@mdtauk Apps are free to customize but after a point, it causes inconsistency. Simple customizations are fine but customization like changing how the selection is done should not be done.

[mdtauk]

@mdtauk Apps are free to customize but after a point, it causes inconsistency. Simple customizations are fine but customization like changing how the selection is done should not be done.

If a developer has not customised the style or template of their List and Grid Views, these would automatically be the new defaults.

The ListViewItems are just containers displaying the Xaml UI that the dev has chosen. Selection and states are handled by the ViewItem

Also the item background is transparent until you Hover and Press them. If Selection is a bar indicator on the side, then it doesn't need a visible background colour - which makes the rounded corners and gaps between items less noticable.

[Jaiganeshkumaran]

The new styles seem to bit larger which can be reduced for density purposes but separate cards look better

[Felix-Dev]

It would be nice if as part of this work item we could improve the customization story for the selection checkbox of the GridView. See https://github.com/microsoft/microsoft-ui-xaml/issues/2067 for more details. Depending on how this will be implemented, we might not have to introduce new APIs here.

[mdtauk]

It would be nice if as part of this work item we could improve the customization story for the selection checkbox of the GridView. See #2067 for more details. Depending on how this will be implemented, we might not have to introduce new APIs here.

Maybe add a GridViewItemCheckmark API where you can replace the default checkbox to add some other kind of element. Maybe it has a placement option too, which could provide greater customisation without the need to re-template.

[anawishnoff]

Wow, lots of feedback already! Thanks everyone for your suggestions and thoughts. Going to do my best to address all of the open-ended feedback here. I've read all of the comments and have started compiling a list of feedback to take back to the team.

@chingucoding I don't have mockups for the high-contrast view yet, but here's a look at dark mode for ListView and GridView:

@mdtauk

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

This is definitely something that we want to stay customizable with the new design changes. It's currently possible by editing the ListViewItemContainerStyle, and I think that should stay consistent when the new design is introduced.

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

This is a great question! It would make sense to change the alignment of the indicator based on the orientation of the overall ListView, similar to how NavigationView does. I'm going to add this to my list to look into/prototype.

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?

We'll be implementing an easy global way to un-round the corners of items, but if someone wants to go back to the original styling, I think that's probably best done by editing the control template directly. We do want people to use the new designs after all 😊.

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

I think the idea would be to eventually phase these changes out so that all list-type controls use the new designs as well. Like for MenuFlyout, the items would have the rounded backplate on hover, and then have the indicator once selected. I don't think it would affect toggles though - only controls with lists inside them.

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?

This is a good callout - honestly I think it's a mistake that the text is not vertically aligned in that mockup, but it brings up a good point! The indicator would align to the center of the content presenter, assuming that text is vertically centered (as I believe is the default alignment in a ListViewItem? correct me if I'm wrong). Creating text that is not center-aligned vertically would be a design choice.

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?

There is intentional spacing between all sides of the ListViewItem and the ListView parent container - this makes the rounded, different-colored backplate stand out more easily imo.

Regarding your comments on XBOX - I've taken it as an action item to look deeper into XBOX scenarios, will get back to you with more details on that one.

@dotMorten

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)

This is definitely an issue that we're aware of and something I'll be discussing with the engineering side of the team before any implementation. With this as a default design there should be no corner-peeking happening.

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).

Thanks for this feedback, I'm definitely trying to figure out a way to make the rounded corners easy to turn off... I think the main thing I'm getting at is that if someone wanted to turn rounded corners off all together for LVs/GVs in their app, they'd use this. I'm also considering the idea of having more specific ThemeResources - say, GridViewItemCornerRadius and ListViewItemCornerRadius. For a per-control basis, I think it'd make more sense to just edit the control template/corner radii directly? Please let me know your thoughts!

@robloo

The density is a problem. ListView is used to display data -- with virtualization a lot of data. I don't want the padding there and the first thing I would do is remove it so a decent number of items can be displayed when needed.

(answer may also be relevant to @Jaiganeshkumaran, @mdtauk):
I'm actually proposing that the entire footprint of a ListViewItem (i.e. if you drew a rectangle around the entire item) stay the same as previously. The rounded backplate of the item is definitely pushed more inside, but there shouldn't actually be any more padding between each item when it comes down to the rectangular footprint. Does that make sense?

You are sticking with the old-style selection border around the entire content. Seems this should align somehow with the new ListView selection indicator.

It's definitely been difficult to figure out how to upgrade GridView for this reason, since it's often displaying images. For non-image scenarios, I think there would be more noticeable updates. I'll update the issue and post a separate comment with these mockups once I clean some things up.

@Felix-Dev

It would be nice if as part of this work item we could improve the customization story for the selection checkbox of the GridView. See #2067 for more details. Depending on how this will be implemented, we might not have to introduce new APIs here.

I like your proposal here - are you talking about specifically customizing the degree of roundness of the checkbox corners? If so, I think new, specific ThemeResources would be the way to go, I'm just wondering how popular this customization use case would be.

[mdtauk]

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).

@dotMorten @anawishnoff This has given me a thought. Is there some way to bubble up the default lightweight styles for the controls through Autocomplete or some kind of designer UI / Fluent Theme Editor / Figma Plugin - to make these more discoverable. Now they are being formalised with WinUI 3.X

[mdtauk]

Looking at this image from the Xbox - the edge of the List Item has a selected indicator, rounded only on one side, and the full height of the item container.

[shaheedmalik]

Looking at this image from the Xbox - the edge of the List Item has a selected indicator, rounded only on one side, and the full height of the item container.

It definitely should match up with Xbox.

[Poopooracoocoo]

god the listview updates suck. imagine using file explorer with selected states looking like that. y'all need jeebus

[nikhil-anilkumar]

Selected Items in ListView could use a drop shadow like box similar to the Xbox selection outlines. That would make much more sense to see that it is "selected".

[shaheedmalik]

Looking at this image from the Xbox - the edge of the List Item has a selected indicator, rounded only on one side, and the full height of the item container.

Looking at the what the list looks like on Xbox again, that's a best way of having a list without "bubbling up" everything. It retains the cleanness of rounded style while keeping the cleanness of the square style.

[Jaiganeshkumaran]

@anawishnoff Please don't remove default reveal effect for list view items. It's so good and I don't want to see it becoming disabled by default.

[Felix-Dev]

@anawishnoff ListView and GridView items come with a tilt effect by default - like buttons. The tilt effect for buttons, however, appears ready to be removed as part of a design update for buttons (see https://github.com/microsoft/microsoft-ui-xaml/issues/242#issuecomment-721299484) I suspect the proposed design update here would also include removing the current default tilt effect for these controls. Is that correct?