Change the color of the selected element

Question

Change the color of the selected element

валера карманов 396

2024-10-05_19-20-49

How to change the background of the element that was clicked in the "CollectionView" what can be done so that the selection animation affects the inner area of the clicked element.

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Microsoft External Staff

Hello,

The official documentation of CollectionView provides APIs and use cases for changing the background color of selected items. You can refer to the following documentation.

Change selected item color.

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="LightSkyBlue" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <Grid Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}"
                        SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        ...
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

валера карманов 396 Reputation points

2024-10-07T08:23:00.59+00:00
Thanks, it works, but when I click it, I go to another page like this

async void _OnSelectionChanged(object sender, SelectionChangedEventArgs e) { await Navigation.PushAsync(new CustomPage { BindingContext = e.CurrentSelection.FirstOrDefault() }); }

And after returning to the previous page, the clicked element retains the color that is used when clicked, this is how it should be, this color is not removed automatically, it must be changed manually after moving to another page?
валера карманов 396 Reputation points

2024-10-07T08:23:18.7633333+00:00

12345
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2024-10-08T00:55:19.11+00:00

Thanks for your feedback.

According to community policy, for a new question, it is recommended that you create a new thread for it.

Avoid posting multiple questions in a single thread To ensure that you receive a clear and helpful answer to your questions, it's important to post them individually. When you have multiple questions, each with its own distinct scenario, it can make it more difficult for the community to understand the problem and provide an accurate solution. For this reason, we recommend that you create separate threads for each of your questions. This way, the community can give you their undivided attention and provide the best possible response.
валера карманов 396 Reputation points

2024-10-08T06:31:18.34+00:00

As for me, I asked the question in the same topic to which it relates. The topic is related to changing the color when selecting an element in the "CollectionView", so I have the following question. After switching to another page, the selected color remains, can it be removed automatically or should it be done manually?
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2024-10-08T07:09:22.93+00:00
You need to manually delete the selected items. Please refer to the following code and official documentation.

// in xaml <CollectionView x:Name="ItemsListView" // in code-behind ItemsListView.SelectedItem = null; ItemsListView.SelectedItems.Clear();

Clear selections

The SelectedItem and SelectedItems properties can be cleared by setting them, or the objects they bind to, to null. When either of these properties are cleared, the SelectionChanged event is raised with an empty CurrentSelection property, and the SelectionChangedCommand is executed.
Buchfink Alexander 0 Reputation points

2025-11-22T10:50:15.25+00:00

Try this one: Set the collection view to disabled state and revert it to enabled. The selection color is gone. Looking at the visual states, this is normal behavior, but not the desired one. This is therefore not an acceptable solution.