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?

[marcelwgn]

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.

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.

This is something that the Compact resources could mitigate for.

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.

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?

[anawishnoff]

@shaheedmalik @mdtauk @nikhil-anilkumar

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.

There are definitely similarities to the XBOX design - however I think that rounding the full backplate of the item (i.e. all four corners) is necessary to align it with other WinUI controls that have already been rounded. I'd love to have consistency all around, but this is the first step we'll have to take 😊.

---

@Felix-Dev - yes, I believe the plans are to remove the tilt animations for ListView and GridView items. ListView items will have a new animation that involves the blue selection indicator.

---

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

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

The Fluent Xaml Theme Editor comes to mind - it lets you play around with corner radii, colors, themes and the like. Though it would be awesome to have some kind of Intellisense for styles. I think that the first step is to document these built-in styles/resources in our guidance docs so they're more discoverable, and to make sure we think carefully before making something a lightweight style resource vs. a property or new API.

In the rounding ListView/GridView corners case, I think ListViewItemCornerRadius and GridViewItemCornerRadius theme resources make sense, as rounding is a purely stylistic change and these resources make it so you don't have to re-template. And, ListView.CornerRadius and ListViewItem.CornerRadius are properties that also shouldn't be over-written (these can be used to un-round if desired).

[marcelwgn]

Are there any updates on this? Compared to the new fluent design controls, the current GridView and ListView look out of place, especially since those controls still have the reveal effect applied to them. Modifying them is also not the easiest thing because of how those controls work, having them be updated to fit in with the other controls and the new fluent design system would be amazing, especially since those controls are commonly used among apps.

[bdbai]

May I know whether these changes will come to WinUI 2.x? It would be great to see the new designs in a UWP!

[dylech30th]

@bdbai It's already come to WinUI 2.x, this is also the default style for Windows 11

[robloo]

I agree that new ListView style needs to come over to WinUI2 and Windows 10 -- I'm not sure if it is even default on Windows 11.

https://github.com/microsoft/microsoft-ui-xaml/issues/6469

[bdbai]

@dylech30th thanks for pointing that out! However, I could not see the new appearance in a WinUI 2.7.1 UWP project on Windows 10. Steps to reproduce:

1. Create a new UWP project in Visual Studio 2022.
2. Install the latest WinUI 2 package.
3. Apply WinUI resources to App.xaml.

   <Application
   x:Class="App3.App"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:App3"
   xmlns:controls="using:Microsoft.UI.Xaml.Controls">
   <Application.Resources>
       <controls:XamlControlsResources>
           <controls:XamlControlsResources.MergedDictionaries>
               <!-- Other app resources here -->
           </controls:XamlControlsResources.MergedDictionaries>
       </controls:XamlControlsResources>
   </Application.Resources>
   </Application>

4. Put a ListView in MainPage.

   <Page
   x:Class="App3.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:App3"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
   xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
   
   <Grid>
       <ListView SelectionMode="Single">
           <x:String>aa</x:String>
           <x:String>bb</x:String>
           <x:String>cc</x:String>
       </ListView>
   </Grid>
   </Page>

5. Hit F5.

The app turns out to use the legacy style of ListView:

Did I miss anything?

[dylech30th]

Since I'm using WinUI 3 not 2 so I cannot give a definite answer, but from the official documentation it seems that the control with new designs in WinUI 2 are laid in different namespaces, maybe you need to prefix the control with the correct namespace, in your case is muxc

[dylech30th]

@bdbai You can follow this tutorial, it explains the steps in detail

[bdbai]

@dylech30th I tried to prepend muxc: to ListView, but build failed:

Build started...
1>------ Build started: Project: App3, Configuration: Debug x64 ------
1>C:\Users\bdbai\source\repos\App3\MainPage.xaml(13,10): XamlCompiler error WMC0001: Unknown type 'ListView' in XML namespace 'using:Microsoft.UI.Xaml.Controls'
========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========
========== Deploy: 0 succeeded, 0 failed, 0 skipped ==========

Anyway, thanks for your help😊

[robloo]

@bdbai

Did I miss anything?

You didn't miss anything. There is no new ListView Style in WinUI 2. I've looked through the styles for this extensively in process of fixing #6469 in an app. I ended up writing my own style based on ComboBoxItem which uses the same selection pills.

[bdbai]

@robloo

I ended up writing my own style based on ComboBoxItem which uses the same selection pills.

Cool! I noticed a few controls in WinUI 2 that already adopted the new designs for lists, but never thought of exploiting them as a workaround. Thanks for the creative idea!

[dylech30th]

@bdbai

Did I miss anything?

You didn't miss anything. There is no new ListView Style in WinUI 2. I've looked through the styles for this extensively in process of fixing #6469 in an app. I ended up writing my own style based on ComboBoxItem which uses the same selection pills.

@robloo I also tried and proved that you are correct, but that really makes me curious about how Xaml Controls Gallery can reveal the correct style for ListView using WinUI 2

[AtosNicoS]

Hi, in winui3 the corners are already rounded. Do you know how to revert it?

[michael-hawker]

We also just hit the issue where the WinUI 2 styles on Win 10 for ListView don't match the updated style. This is particularly odd when trying to run the same code with WinUI 3 as it'll properly use the new style.

There's a behavior difference here as the inbox style default's to HorizontalContentAlignment of Left and not Stretch like the new styles, so it means extra XAML is required for this one combination...

Is there a way when referencing the WinUI 2 package to use the new ListViewItem style or is there some OS limitation here? FYI @chigy

[robloo]

There's a behavior difference here as the inbox style default's to HorizontalContentAlignment of Left and not Stretch like the new styles, so it means extra XAML is required for this one combination...

WinUI 3 was supposed to finally default to the expected stretch and that was heavily discussed in another issue and PR. Sounds like it never got in the WinUI 3 repo?

[michael-hawker]

There's a behavior difference here as the inbox style default's to HorizontalContentAlignment of Left and not Stretch like the new styles, so it means extra XAML is required for this one combination...

WinUI 3 was supposed to finally default to the expected stretch and that was heavily discussed in another issue and PR. Sounds like it never got in the WinUI 3 repo?

@robloo sorry for confusion, WinUI 3 is fine as is WinUI 2 on Win 11 - they use the new style which does have HorizontalContentAlignment to stretch and the new left-hand indicator.

But if you're still using WinUI 2 on Windows 10, then the new style with this stretch property and the indicatior are not used and instead the old Reveal style. Which means as an app developer my app has a different experience still using the old inbox styles even though I'm supposed to get the new style by using WinUI 2.

See here, same app, same XAML:

On the left is WinUI 3, and on the right is WinUI 2 (both on Windows 10). But if you run the WinUI 2 app on Windows 11, it'll look like the WinUI 3 app (as I'd expect). At least I think that's what @niels9001 told me, don't have my Win 11 machine with this code up atm.

In either case, since I expect to get the new updates styles by using WinUI 2, I'd expect the apps design to be identical so I don't have to worry about nuances between Windows 10 and 11 and delivering the same experience to the end-user.

For us with the toolkit, it means we have to explicitly call out setting the HorizontalContentAlignment of the container here in the sample for Windows 10 UWP only... 😢 - If WinUI 2 properly provided the correct default ListViewItem style here (which I feel is the root issue here), then they'd be identical instead.

[niels9001]

Same app, same XAML on UWP on W11:

[DJRM2021]

Are there any updates on this matter? Thanks!