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.

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.

Change the color of the selected element

Accepted answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,011 Reputation points Microsoft Vendor

2024-10-07T02:40:49.1933333+00:00
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.
Please sign in to rate this answer.

1 person found this answer helpful.
валера карманов 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.) 44,011 Reputation points Microsoft Vendor

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.) 44,011 Reputation points Microsoft Vendor

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.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Change the color of the selected element

0 additional answers

Your answer