How to change the background color of the selected item in a CollectionView

, , , , , 1

You have your nice app, you have created your wonderful CollectionView and everything looks amazing. Then you select an item on the CollectionView and the default background color is just awful. How many times did it happen? Let’s be honest, always! Let’s see together how to solve it once and for all.

Visual State Manager

The Visual State Manager gives us a way to make visual changes to the UI from our XAML. Each component in Xamarin.Forms has different visual states. If you consider a Button, it has different states: disabled, pressed, input focus. These states form a group:

In Xamarin.Forms the Visual State Manager defines one visual state group named “CommonStates”. This group has the following visual states:

  • “Normal”
  • “Disabled”
  • “Focused”
  • “Selected”

Every class derived from VisualElement support this state group.

Use the Visual State Manager with the CollectionView

The theory is nice but nothing is better than an example. So let’s see together how we can use the Visual State manager to easily change the background color of the selected item in our CollectionView (it works with a ListView as well)

Let’s say that we have the following CollectionView in our Xaml.

<CollectionView ItemsSource="{Binding YourList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="{Binding Name}" VerticalTextAlignment="Center" LineBreakMode="TailTruncation" MaxLines="1"/>
                <Label Text="{Binding Surname}" VerticalTextAlignment="Center" LineBreakMode="TailTruncation" MaxLines="1"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

To select the background color of our selected item, we now need to add the Visual State Manager. The result will be a code similar to this:

<CollectionView ItemsSource="{Binding YourList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">                        
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Label Text="{Binding Name}" VerticalTextAlignment="Center" LineBreakMode="TailTruncation" MaxLines="1"/>
                <Label Text="{Binding Surname}" VerticalTextAlignment="Center" LineBreakMode="TailTruncation" MaxLines="1"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

With these few lines of code, we have now used the “Selected” state to change the BackgroundColor to White. Of course you can use whatever color you like and of course you can change many other properties, not just the color.

In this case we have used only the Selected state, but as we have seen at the beginning of the article, there are several other states that we can use to customise our UI.

Conclusion

The Visual State Manager is incredibly powerful and it’s a great way to change our UI according to the state of the different controls in our pages.

In this case we have only changes the background color of the SelectedItem of our CollectionView, but potentially we can change everything we need to make wonderful app in Xamarin.Forms