Custom selection styles for items in CollectionView are ignored when programmatically selecting an item

[tschbc]

Description

Programmatically selecting an item in a CollectionView does not respect the VisualStateManager in its ItemTemplate (applied by styles or otherwise). Selecting the item as a user (tap / click) works.

Steps to Reproduce

1. Create a new MAUI app and replace default views with a CollectionView. Set its SelectionMode to "Single." Subscribe to its "Loaded" event. Add a VisualStateManager to its ItemTemplate that changes the BackgroundColor to Aqua when Selected.

2. Assign a list of strings to the CollectionView's ItemSource and, when its Loaded event fires, set the CollectionView's SelectedItem to the second string from the list.

3. On Windows: When the CollectionView loads, the second item is selected with the default selection style:

Clicking a different item correctly applies the custom selection style:

4. On iOS 17.0 simulator it's even worse. When the CollectionView loads and the second item is selected it just disappears:

Selecting a different item doesn't bring it back:

And when selecting a different item again, either the SelectionMode or VisualStateManager breaks, applying selection styles to multiple items:

Link to public reproduction project repository

https://github.com/tschbc/SelectionStyleIssue

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Windows

Affected platform versions

windows10.0.19041.0, iOS 17.0

Did you find any workaround?

No

Relevant log output

No response

[tschbc]

Playing around with this a bit more and it gets weirder.

For iOS, I selected the first item instead of second in the Loaded event and the styles were applied correctly, but the second item is still missing:

Single-selection is still broken though:

[sharpwood]

I also found the same problem. This problem does not seem to appear on Android.

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 2(8.0.3). Repro on Windows 11, Android 14.0-API34, iOS 17.0 and MacCatalyst with below Project:
SelectionStyleIssue.zip

Windows: When the CollectionView loads, the second item is selected with the default selection style -> Clicking a different item correctly applies the custom selection style.

Android: Applying selection styles to multiple items

iOS: When the CollectionView loads, the second item is disappeared, and applying selection styles to multiple items.

Mac: Applying selection styles to multiple items.

[jeremy-visionaid]

ListView appears to be similarly affected :(

[ssamix]

    <CollectionView x:Name="xxx"

HorizontalScrollBarVisibility="Never"
ItemsSource="{Binding Products}"
SelectionMode="Single"
VerticalScrollBarVisibility="Never">

private void MyPage_Loaded(object? sender, EventArgs e)
{

    xxx.SelectedItem = ((ObservableCollection<ProductItem>)xxxx.ItemsSource).FirstOrDefault();

}

First item is selected as default but no color on selected background how to fix it .. I think it is bug ...

[Phantom-KNA]

I also found the same problem. This problem does not seem to appear on Android.

The same for Android

[LeoJHarris]

Any update? VisualStateGroups are not working in iOS when programmatically selecting an item in a CollectionView with SelectionMode="Single". These do not get applied at all:

 <VisualState Name="Selected">
      <VisualState.Setters>
            <Setter TargetName="nameLabel" Property="Label.TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="{DynamicResource BrandPrimaryColor}" />
      </VisualState.Setters>
</VisualState>

[mybadstudios]

Visual Studio 2022, Windows platform, Same issue. :(
Setting the selected item during OnAppearing after a short delay but still no luck.

I added a ListViewObj_PropertyChanged function and when the Answer property changes I manually update a Label to show the content of the selected item. This way I can see when the values change so I can say that when the page loads Answer has a value of null so there is nothing highlighted. After a short delay I manually set the value and the Label updates but the color remains unchanged. I then click on something else and the Label updates but the color still remains unchanged. I then click on the first value again and from now on the colors change perfectly.

[LeoJHarris]

Visual Studio 2022, Windows platform, Same issue. :(
Setting the selected item during OnAppearing after a short delay but still no luck.

I added a ListViewObj_PropertyChanged function and when the Answer property changes I manually update a Label to show the content of the selected item. This way I can see when the values change so I can say that when the page loads Answer has a value of null so there is nothing highlighted. After a short delay I manually set the value and the Label updates but the color remains unchanged. I then click on something else and the Label updates but the color still remains unchanged. I then click on the first value again and from now on the colors change perfectly.

Are you able to share some of the implementation for this? I've tried putting a delay timer that starts when the pages appearing method is called. Sometimes, it works but not always, android seems to respond better.

[rodolfo-sousa]

I'm having problems in removing the selecteditem background color in Windows (WinUI).

I tried with styles:
<VisualState x:Name="Selected"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Transparent" /> </VisualState.Setters> </VisualState>

and this in Platforms\Windows\App.xaml:
<maui:MauiWinUIApplication.Resources> <ResourceDictionary> <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="#ff000000" /> <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="#ff000000" /> <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="#ff000000" /> <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#ff000000" /> </ResourceDictionary> </maui:MauiWinUIApplication.Resources>

[BeepBeepBopBop]

Hello, after spending a lot of time struggling with a lot of weird issues even with the most basic usage of CollectionView (especially on Windows) I decided to implement a CustomCollectionView control based on custom VisualStates and GestureRecognizers.

It is very basic and you probably will have to modify it to make it suit your needs but if you currently are where I was just a few months ago struggling to learn MAUI/XAML, it will at least give you a good base to move forward with a solution that works for you.

[LeoJHarris]

Is this actually a bug with iOS or do you just need to delay preselection until everything is fully loaded?

I got this working for styles to show on programmatically preselecting an item in CollectionView by delaying the selection until the page fully appeared and the CollectionView was loaded and including some timers to delay things a little but more and finally set SelectedItem = null before setting the row i wanted to preselect. I dont have any issues now and row highlights with selection styles every time on iOS:

Using Prism's OnAppearing from our VM and the Init method but you can do this from code behind methods also

private void collectionView_Loaded(object? sender, System.EventArgs e)
{
    if (CollectionView is not null)
    {
        _ = _dispatcher.Dispatch(async () =>
        {
            await Task.Delay(400).ConfigureAwait(true);

            CollectionView.SelectedItem = null;
            CollectionView.SelectedItem = ViewModels.FirstOrDefault() // Get which ever view model to preselect
        });
    }
}

public override void Initialize(INavigationParameters parameters)
{
      base.Initialize(parameters);
      CollectionView.Loaded += collectionView_Loaded;
}

public override void OnAppearing()
{
    base.OnAppearing();

    if (FirstLoad)
    {
      FirstLoad = false;
      ViewModels.ReplaceRange(); // Load the Collection on page Appearing
    }
}