A visual state group is a named collection of mutually exclusive visual states for a .NET MAUI element. VisualStateManager uses groups to organize state-specific Setters, such as changing an item’s background when it is selected. section 10.2.2
Use visual state groups to structure state-based appearance:
- Place a group such as CommonStates inside VisualStateManager.VisualStateGroups, typically through a Style Setter. section 10.2.2
- Keep mutually exclusive states such as Normal and Selected together; only one state in the group can be active. section 10.2.2
- Define multiple groups when independent state dimensions must be active simultaneously. section 10.2.2
- Use the built-in CommonStates group or define custom visual states when the built-in states are insufficient. section 10.2.2 section 10.4
Highlighting a selected CollectionView item
Style the VerticalStackLayout used by a product-search CollectionView item. Put Normal and Selected in CommonStates, then set Selected’s BackgroundColor to the Secondary resource. Apply the style to the item layout so selected products receive a consistent highlight. section 10.2.2
Listing 10.13 The CollectionView in InputPage.xaml with VSM
<CollectionView ...>
<CollectionView.Resources> #1
<Style TargetType="VerticalStackLayout"> #2
<Setter Property="VisualStateManager.
VisualStateGroups"> #3
<VisualStateGroupList> #4
<VisualStateGroup x:Name=
"CommonStates"> #5
<VisualState x:Name=”Normal" /> #6
<VisualState x:Name="Selected"> #7
<VisualState.Setters> #8
<Setter Property="BackgroundColor"
Value="{
StaticResource Secondary}"/> #9
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</CollectionView.Resources>
<CollectionView.ItemsLayout>
...
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
...
</CollectionView.ItemTemplate>
</CollectionView>
Inspect the XAML structure for a CollectionView resource, target Style, CommonStates group, Normal and Selected states, and the Selected-state Setter. section 10.2.2
