VisualStateManager does not seem to work on Android

[david-maw]

Description

Using a VisualStateManager to highlight selected items in a CollectionView works fine in Windows but not in Android. The sample one I'm using here is:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup Name="CommonStates">
        <VisualState Name="Normal" />
        <VisualState Name="Selected">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Yellow" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

This should highlight any selected items (if there are any) by drawing their background in yellow.

Steps to Reproduce

1. Unzip MAUIListEntry-VisualState.zip
2. Compile and run it on Windows
3. Click on one of the list items, note its background changes to yellow
4. click on the other one, note that its background changes to yellow and the one that was formerly yellow goes back to white
5. Recompile and run the program on Android
6. Repeat actions 3 & 4 and observe that the list item background does not change.

Version with bug

Preview 14 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 11, Windows 10

Did you find any workaround?

You can code around it for single selections using the SelectionChanged event to explicitly handle changing background color but I've no idea how general that solution is.

Relevant log output

No response

[Amir-Care]

Verified repro with Version 17.2.0 Preview 2.0 [32208.484.main]
Sample project: #5449.zip

[antonfirsov]

There are two issues here:

1. VisualStateManager.GoToState is not hooked into the Android adapter code. This is easy to fix. However after doing so there is a bigger problem:
2. "Switching back" to unselected state seems to be implemented by setting the property (in this case BackgroundColor) to null which doesn't do anything. This is essentially identical to Setting View.BackgroundColor = null doesn't reset the color on Android #5973 which is by design. Can anyone suggest how to address this?

This is where BackgroundColor's UnApply lands:

maui/src/Controls/src/Core/Setter.cs

Lines 120 to 121 in de09524

	else
	targetObject.ClearValue(Property, fromStyle);

Then in ClearValue it will set newValue == null:

maui/src/Controls/src/Core/BindableObject.cs

Line 85 in de09524

object newValue = bpcontext.StyleValueSet ? bpcontext.StyleValue : property.GetDefaultValue(this);

[antonfirsov]

@david-maw this is going to be essentially fixed with #6249 in the next release, but note that you have to define a default BackgroundColor for your grid, otherwise VisualStateManager won't be able to determine what color to switch back to after deselection:

maui/src/Controls/samples/Controls.Sample/Pages/Controls/CollectionViewGalleries/SelectionGalleries/VisualStatesGallery.xaml

Lines 15 to 32 in e79f133

	<Grid ColumnDefinitions="*,Auto" BackgroundColor="White">
	<VisualStateManager.VisualStateGroups>
	<VisualStateGroup Name="CommonStates">
	<VisualState Name="Normal" />
	<VisualState Name="Selected">
	<VisualState.Setters>
	<Setter Property="BackgroundColor" Value="Yellow" />
	</VisualState.Setters>
	</VisualState>
	</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	<Grid Grid.ColumnSpan="2" Margin="10,0,10,0"
	RowDefinitions="Auto" ColumnDefinitions="*,*">
	<Label Text="{Binding ItemName}" Grid.Column="0"
	LineBreakMode="NoWrap"
	FontSize="Large" />
	</Grid>
	</Grid>

This is by design, see #6183 and #1485 for more info.

[david-maw]

Thanks for the fix @antonfirsov I can code around that constraint but it's a pain, there are a few consequences of that design decision that make migration from Xamarin harder, so I've raised Issue #6454 to track them. On the face of it that's an awkward design decision to detect and handle in migrated code, but there's undoubtedly more to it than I know.