Skip to content

ListViewExtensions.AlternateColor only gets applied on hover #327

New issue
New issue
Closed
#566
Closed
ListViewExtensions.AlternateColor only gets applied on hover#327
#566
Assignees
Arlodotexe
Labels
help wantedExtra attention is needed

Description

@insomniachi
insomniachi
opened on Dec 26, 2021

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
image

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.

Activity

  2. Arlodotexe commented on Dec 28, 2021

    @Arlodotexe
    Arlodotexe
    on Dec 28, 2021
    Member

    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?

  3. michael-hawker commented on Jan 19, 2022

    @michael-hawker
    michael-hawker
    on Jan 19, 2022
    Member

    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.

  4. Arlodotexe commented on Jan 20, 2022

    @Arlodotexe
    Arlodotexe
    on Jan 20, 2022
    Member

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

  5. michael-hawker commented on Jan 20, 2022

    @michael-hawker
    michael-hawker
    on Jan 20, 2022
    Member

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

  6. Arlodotexe commented on Jan 20, 2022

    @Arlodotexe
    Arlodotexe
    on Jan 20, 2022
    Member

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

  7. Arlodotexe
    self-assigned this
    on Jan 20, 2022

  8. 0x5bfa commented on Dec 15, 2022

    @0x5bfa
    0x5bfa
    on Dec 15, 2022
    Contributor

    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.

    F4AE56D0-1F49-4E8D-A408-7E649DDAC387

  9. huynhsontung commented on Mar 11, 2023

    @huynhsontung
    huynhsontung
    on Mar 11, 2023

    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;
}

  10. TyJOrtiz commented on Apr 10, 2023

    @TyJOrtiz
    TyJOrtiz
    on Apr 10, 2023

    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

  11. michael-hawker commented on Apr 10, 2023

    @michael-hawker
    michael-hawker
    on Apr 10, 2023
    Member

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

  12. niels9001 commented on Apr 11, 2023

    @niels9001
    niels9001
    on Apr 11, 2023
    Collaborator

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

  13. TyJOrtiz commented on Apr 11, 2023

    @TyJOrtiz
    TyJOrtiz
    on Apr 11, 2023

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

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

  14. TyJOrtiz
    added a commit that references this issue on Apr 11, 2023

    Same fix for WinUI 3 alternate background

    ce4f7e8

  15. michael-hawker commented on Apr 11, 2023

    @michael-hawker
    michael-hawker
    on Apr 11, 2023
    Member

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

  16. huynhsontung commented on Apr 12, 2023

    @huynhsontung
    huynhsontung
    on Apr 12, 2023

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

  17. huynhsontung commented on Apr 12, 2023

    @huynhsontung
    huynhsontung
    on Apr 12, 2023

    image

    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.

  18. TyJOrtiz commented on Apr 12, 2023

    @TyJOrtiz
    TyJOrtiz
    on Apr 12, 2023

    Could this have something to do with it?

    image

  19. michael-hawker commented on Apr 14, 2023

    @michael-hawker
    michael-hawker
    on Apr 14, 2023
    Member

    @TyJOrtiz where is that from?

  20. TyJOrtiz commented on Apr 14, 2023

    @TyJOrtiz
    TyJOrtiz
    on Apr 14, 2023

    rightlick "ListViewItemPresenter" - go to definition image

  21. Arlodotexe
    transferred this issue fromCommunityToolkit/WindowsCommunityToolkiton Jan 29, 2024
  22. Arlodotexe
    added this to Toolkit 8.xon Jan 29, 2024
  23. Arlodotexe
    moved this to 📋 Backlog in Toolkit 8.xon Jan 29, 2024
  24. Arlodotexe
    added
    help wantedExtra attention is needed
    on Apr 2, 2024

  25. jsidewhite commented on May 10, 2024

    @jsidewhite
    jsidewhite
    on May 10, 2024

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

  26. niels9001 commented on Nov 22, 2024

    @niels9001
    niels9001
    on Nov 22, 2024
    Collaborator

    @TyJOrtiz Do you think your fix in CommunityToolkit/WindowsCommunityToolkit#4865 is still applicable here?

  27. TyJOrtiz commented on Nov 27, 2024

    @TyJOrtiz
    TyJOrtiz
    on Nov 27, 2024

    @TyJOrtiz Do you think your fix in CommunityToolkit/WindowsCommunityToolkit#4865 is still applicable here?

    Sometimes the "fix" has issues where the alternate color won't load. but it's rare

  28. Arlodotexe
    closed this as completedin #566on Nov 27, 2024
  29. github-project-automation
    moved this from 📋 Backlog to ✅ Done in Toolkit 8.xon Nov 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

help wantedExtra attention is needed

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions