Xamarin.forms: CollectionView Selected Item Highlight Colour

[ColdstarJoey]

Hi all,

how do I change the highlight color of the CollectionView selected item. everytime i press it, it is blue and i want it transparent

[Huaba93]

Do you need selection? How about SelectionMode="None"

[hartez]

@ColdstarJoey Which platform(s) are you targeting?

[hartez]

@ColdstarJoey There are a few different ways you can do this; the easiest is to add a Selected VisualState to your ItemTemplate and set the background color there.

I created a repo which demonstrates this (and a couple of other ways to set it).

Unfortunately, we've got a bug in the UWP implementation that prevents the color from changing. We're working on it: https://github.com/xamarin/Xamarin.Forms/issues/9578

[hartez]

And for the folks who don't feel like wading through my repo, here's the dead-simplest version of setting your ItemTemplate's background color to yellow when selected:

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" />
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

[ColdstarJoey]

Do you need selection? How about SelectionMode="None"

Yes due to you can't select anything on the collectionView without it

[ColdstarJoey]

And for the folks who don't feel like wading through my repo, here's the dead-simplest version of setting your ItemTemplate's background color to yellow when selected:

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single">
  <CollectionView.ItemTemplate>
      <DataTemplate>
          <Grid>
              <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup Name="CommonStates">
                      <VisualState Name="Normal" />
                      <VisualState Name="Selected">
                          <VisualState.Setters>
                              <Setter Property="BackgroundColor" Value="Yellow" />
                          </VisualState.Setters>
                      </VisualState>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

              <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
          </Grid>
      </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

I am working on Android Only. this has worked perfectly! Thanks for the quick reply and help

[AmrAlSayed0]

And for the folks who don't feel like wading through my repo, here's the dead-simplest version of setting your ItemTemplate's background color to yellow when selected:

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single">
  <CollectionView.ItemTemplate>
      <DataTemplate>
          <Grid>
              <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup Name="CommonStates">
                      <VisualState Name="Normal" />
                      <VisualState Name="Selected">
                          <VisualState.Setters>
                              <Setter Property="BackgroundColor" Value="Yellow" />
                          </VisualState.Setters>
                      </VisualState>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

              <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
          </Grid>
      </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

This works only when you want to actually set the background color for selected items, but if you want no background color at all (for example, taping an item would navigate to another page so no need to set color at all), setting the background color to transparent (ie. trying to clear it) would still show the orange selection color on Android. The way my view model is set up is listening to the SelectedItem property change and navigating when that happens.

There are 2 ways to solve that problem

1. Set the selected background color to the same color of the page's background.
2. Set SelectionMode to None and add Tap Recognizers in the item template.

I know it is easily fixable, but it would be so much better if we can customize this.

[hartez]

@AmrAlSayed0 You make a good point; I've created an issue to take a look at this problem: #9590.

[EmilAlipiev]

And for the folks who don't feel like wading through my repo, here's the dead-simplest version of setting your ItemTemplate's background color to yellow when selected:

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single">
  <CollectionView.ItemTemplate>
      <DataTemplate>
          <Grid>
              <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup Name="CommonStates">
                      <VisualState Name="Normal" />
                      <VisualState Name="Selected">
                          <VisualState.Setters>
                              <Setter Property="BackgroundColor" Value="Yellow" />
                          </VisualState.Setters>
                      </VisualState>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

              <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
          </Grid>
      </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

This doesnt work. if you select an item and select another item, both items are having Yellow backgroundcolor. It is not switching one from the other.

[denysvega]

@EmilAlipiev it seems you need to set SelectionMode="Single".

[Seuleuzeuh]

@denysvega the SelectionMode="Single" is already set.
@EmilAlipiev you have to set the BackgroundColor to the original in the VisualState Normal, for example

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" >
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

[SwingsetTheory]

For me setting the values to "transparent" actually creates a gray background when the item is selected.