Xamarin.forms: [Bug] iOS CollectionView not updating VisualState on pre-selected items when loaded

[MaxHampton]

Description

I am using a CollectionView to handle multiple selection on a bound ItemsSource. The bindings work fine for both ItemsSource and SelectedItems. I am using a templated view for the cells in the CollectionView, and have set up VisualState Setters for both the Selected and Normal states in the CommonStates VisualStateGroup.

On Android, when the CollectionView loads, the VisualStates are applied correctly, and pre-selected items in the bound SelectedItems property are displaying as expected.

On iOS, when the CollectionView loads, the VisualStates are not applied correctly. When the first item in ItemsSource is selected, the VisualState is applied. Any other selected items do not get the Visual State style, but get the default selected style. When the first item in ItemsSource is not selected, all selected items get the default selected styling, and none get the VisualState style.

Expected Behavior

Selected VisualState should behave the same on both platforms, with defined styles applied to selected cells when the CollectionView loads.

Actual Behavior

Selected VisualState is not applied at load time to all selected items in the bound collection. This VisualState is not applied until the user interacts with the CollectionView by selecting another item, or scrolling the view.

Basic Information

• Version with issue: 4.1.0.618606
• Last known good version: NA
• IDE: VS 2017 Enterprise
• Platform Target Frameworks:
  
  
  
  • iOS:
  
  
  • Android:
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:

Screenshots

Reproduction Link

[MaxHampton]

When selected items are scrolled out of view, then scrolled back into view, while the scroll gesture is still occurring the style is the default CollectionView selected style. When the scroll gesture ends, the VisualState styles are applied. This only occurs on iOS.

[PureWeen]

@MaxHampton this sounds like a duplicate of these
https://github.com/xamarin/Xamarin.Forms/issues/5563
https://github.com/xamarin/Xamarin.Forms/issues/5622#issuecomment-478171083

If your issues looks different can you attach a repro and we can reopen

[MaxHampton]

@PureWeen this isn't quite a duplicate of those tickets, but may be related. I'm attaching a screenshot to demonstrate the issue, I'll work on getting a repro together. The first row in the dialog is displaying with the style I have defined for VisualState Selected, the following two rows are selected and members of SelectedItems, but are displaying with the default Selected background, not the style defined in VisualState. The icon displayed on the right, empty checkbox, is defined in the "Normal" VisualState, while the checked checbox ImageSource is defined in the "Selected" VisualState.

[kajetangit]

@PureWeen I do not think it's a duplicate.
On iOS the issue can be replicated by adding the below to VerticalListMultiplePreSelectionPage.xaml
https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/CollectionViewDemos

<ContentPage.Resources>
    <Style TargetType="Grid">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="Red" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>

When the page is loaded pre-selected elements have grey background color.
After selection is changed all selected elements have red background color.

[hunii]

@PureWeen Definitely not same as those tickets. Have you tested? This exist on iOS

[JeffTobin]

having this problem as well in 4.4

[ValonK]

also having this issue in 4.4

[Jzrzmy]

Also having the issue in 4.5

[burakyigit]

also having this issue in 4.5

Does anyone have a workaround?

[lucas-zimerman]

Yeah it's happening in 4.8.0.
Pre selected item is marked with the default selected color, if you scroll it the color is then set to the VisualState Selected Color.
I also noticed that the Focused State doesn't seems to be working on ios

[astralmaster]

A year later, not even a workaround?

[lucas-zimerman]

A year later, not even a workaround?

before I mark select the selected item I added a delay of 1ms, that seems to do the trick

[shalinasanga]

why is this bug closed and even after a year we experiencing the issue.
programmatic scrolling, thread sleeps are not helping for me

[domagojmedo]

@PureWeen @samhouts why is this closed when the issue is still not fixed?

EDIT: I believe this is tracked at #9511