ListViewExtensions.AlternateColor only gets applied on hover

[insomniachi]

Describe the bug

ListViewExtensions.AlternateColor only gets applied on hover over the item on WinUI3 1.0

Regression

No response

Reproducible in sample app?

• This bug can be reproduced in the sample app.

Steps to reproduce

Repro on sample app ListViewExtensions page

Expected behavior

Alternate color should get applied when listview loads

Screenshots

No response

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

17.0.4

Device form factor

Desktop

Nuget packages

CommunityToolkit 7.1.2

Additional context

No response

Help us help you

Yes, but only if others can assist.

[ghost]

Hello athulrajts, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[Arlodotexe]

Can confirm that this bug is also present in the Sample app. Should help expedite the fix. @michael-hawker got a project board for this?

[michael-hawker]

The UWP code is here: https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/main/Microsoft.Toolkit.Uwp.UI/Extensions/ListViewBase/ListViewExtensions.AlternateRows.cs

The WinUI 3 code is here: https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/winui/CommunityToolkit.WinUI.UI/Extensions/ListViewBase/ListViewExtensions.AlternateRows.cs

I don't see anything that jumps out as obvious that would be broken here in WinUI 3 land, but there could be some other underlying change or potential issue that we need to raise in the platform.

[Arlodotexe]

@michael-hawker The issue can be repro'd in the Toolkit Sample App, doesn't seem to be specific to WinUI 3.

[michael-hawker]

@Arlodotexe I'm seeing this work on my machine in the version from the store on Windows 10, so this looks to be a Win 11 specific issue then... 🙁

I also noticed if I toggle the theme combo box then the already loaded sample works fine, so this could be an initial loading/timing issue maybe? Want to dig-in and take a look and see if anything obvious stands out?

[Arlodotexe]

@michael-hawker Looks like you're right, it's working as expected on Windows 10 but not on Windows 11. I can investigate this 🙂

[0x5bfa]

Me too(win11/winui3). Not until hover on ListView, it is enabled correctly. The problem seems to be that the problem is not colored when the item is loaded.

[huynhsontung]

I have a working fix for this issue in my UWP app. I can also confirm that this issue only occurs in Windows 11. This fix works on both Windows 10 and 11.

private void UpdateAlternateLayout(SelectorItem itemContainer, int itemIndex)
{
    if (itemIndex < 0 || AlternateBackground == null) return;
    Brush evenBackground = AlternateBackground;
    itemContainer.Background = itemIndex % 2 == 0 ? evenBackground : null;
    if (itemContainer.FindDescendant<Border>() is not { } border) return;
    border.Background = itemIndex % 2 == 0 ? evenBackground : null;
}

[TyJOrtiz]

Will this ever be fixed or is this something everyone's just going to have to create a workaround for? @huynhsontung could you show me how you implemented this fix please?

Thanks

[michael-hawker]

@huynhsontung your fix/patch seems to indicate that the Win11 style has an extra border with a color on it compared to just the container in Win10? This looks like a unique approach you've taken vs. modifying our extension? @niels9001 have you played much with the styling in this area before? I actually just found this exact bug filed in the platform repo as well: microsoft/microsoft-ui-xaml#6635

@TyJOrtiz this is an open source project, anyone can open a PR to submit a fix for this. We have an initial port of this code to our unified infrastructure for supporting both UWP and WinUI 3 though now that we just started putting together. We'll have it published soon, that'd be the best place to start a fix moving forward at this point.

[niels9001]

@michael-hawker Hmm, not ran into this particular issue. I do know that altering ItemContainerStyles for the ListView or GridView starts messing with styles. It somehow defaults back to the platform styles (e.g. the Reveal styles). Not sure why that is, and why some of these styles are missing for ListView and GridView in the repo.. something we might want to check with the platform team.

[TyJOrtiz]

The ControlTemplate for the default WinUI listviewitem contains a "ListViewItemPresenter" while the non-WinUI listviewitem contains a Grid.

That might be the reason there's an issue with setting the alternate background?

[michael-hawker]

@TyJOrtiz see my comment on the platform issue here, they both use the same presenter: microsoft/microsoft-ui-xaml#6635 (comment) - maybe you were looking at the 'extended' style which has the Grid? That's not the default one.

Would prefer to understand the root cause here over bringing in the Visual Tree extensions and hacking at this as the original solution was rather straight-forward vs. having to spend extra overhead in navigating the visual tree.

Is there a general overall better pattern for this in XAML these days that we should just recommend instead?

[huynhsontung]

@TyJOrtiz My code snippet is part of my custom solution for implementing alternating ListView using XAML Behaviors. See here for the full behavior. Looks like you already figured out how to apply the fix.

@michael-hawker I suspect there is a Border in the ListViewItemPresenter with its background being set by visual states. This behaviour is only observed in Win 11. Whether the Border was there in Win 10, I'm not entirely sure as I don't have a Win 10 machine to test this. This is very much a hack as there is no way to change the default background colour for ListViewItemPresenter and its template is not available anywhere.

[huynhsontung]

With the current method of setting the background of the SelectorItem (or ListViewItem), here are my observations:

• At the start Border background is transparent and ListViewItem background is the alternate colour.
• After mouse over, both Border and ListViewItem have the same alternate colour.

So the alternate colour is visible only because it is set on the Border afterward.

[TyJOrtiz]

Could this have something to do with it?

[michael-hawker]

@TyJOrtiz where is that from?

[TyJOrtiz]

rightlick "ListViewItemPresenter" - go to definition

[jsidewhite]

+1 would love a fix for this for our DevHome ListView