VisualStateManager (VSM) organizes property changes for a view’s visual states. It provides a simpler alternative to combining triggers when a control needs different appearances under named conditions. section 10.2.2
Apply VSM through a Style and its visual state groups:
- Create a Style for the target control or layout. section 10.2.2
- Assign a VisualStateGroupList to the Style’s VisualStateManager.VisualStateGroups property. section 10.2.2
- Add states such as Normal and Selected, then place property-changing Setters inside each state. section 10.2.2
- Scope the Style to the relevant control or layout, using the same Style hierarchy as other styles. section 10.2.2
Styling a selected CollectionView item
For a product-search CollectionView, style the VerticalStackLayout used by each item. Leave Normal empty and set Selected.BackgroundColor to the Secondary resource, replacing the default orange selection with a theme-consistent color. The Style can live in the CollectionView resources or in a theme resource dictionary and can then be applied with a StaticResource. 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>
Use the XAML listing to inspect the complete VSM structure, including the Style, CommonStates group, Normal and Selected states, and the BackgroundColor Setter. section 10.2.2
