A visual state is a named condition of a .NET MAUI visual element, associated with property values that describe its appearance. The VisualStateManager (VSM) groups these property setters and changes a view when its state changes. section 10.2.2
Use visual states to organize appearance changes that would otherwise require several triggers:
- Choose one of the built-in common states: Normal, Disabled, Focused, Selected, or PointerOver. section 10.2.2
- Place visual state groups in a Style through the VisualStateManager.VisualStateGroups setter. section 10.2.2
- Define additional states when the built-in common states do not describe the required condition. section 10.4
Style a selected CollectionView item
For a product-search CollectionView, style the VerticalStackLayout used by each item. Define Normal and Selected in the CommonStates group, then set Selected.BackgroundColor to the Secondary resource. Apply the reusable style to the layout with Style="{StaticResource ProductSelector}". This replaces the default orange selection with a theme-consistent color. 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 that places CommonStates and state-specific Setters inside a Style. section 10.2.2
