Search code examples
c#xamarin.formscollectionview

CollectionView SelectedItem is not highlighted in Xamarin Forms


I am trying to highlight Xamarin Forms CollectionView Item, but it seems it doesn't highlight. While debugging I found out that if I remove the SwipeView Gesture event it works as expected. Additionally, in the current code the selection item is changed, but the color is not changning. How can I highlight the selected item?

<CollectionView ItemsSource="{Binding SomeList}" 
SelectedItem="{Binding CurrentItem}" SelectionMode="Single" x:Name="itemView">
<CollectionView.ItemsLayout>
     <GridItemsLayout Orientation="Vertical" Span="1"/>
  </CollectionView.ItemsLayout>
  <CollectionView.ItemTemplate>
    <DataTemplate>
    <SwipeView>
     <SwipeView.GestureRecognizers>
         <SwipeGestureRecognizer Direction="Right"
          Command="{Binding BindingContext.SwipGestureCommand, Source={x:Reference itemView}}"
                                                            CommandParameter="right"/>
   </SwipeView.GestureRecognizers>
   <StackLayout Orientation="Vertical" Padding="5">
    <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 LineBreakMode="WordWrap"  Text="{Binding SomeText}"/>
        </StackLayout>
      </SwipeView>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

How to highlight the selected collectionview item?


Solution

  • Please upgrade Xamarin.Forms version to 4.6 and above, then modify your code like the following code,setting swip background color as white, and adding VisualStateManager.VisualStateGroups for swip.

     <CollectionView
                x:Name="itemView"
                ItemsSource="{Binding SomeList}"
                SelectionMode="Single">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="1" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <SwipeView BackgroundColor="White">
                            <SwipeView.GestureRecognizers>
                                <SwipeGestureRecognizer
                                    Command="{Binding BindingContext.SwipGestureCommand, Source={x:Reference itemView}}"
                                    CommandParameter="right"
                                    Direction="Right" />
                            </SwipeView.GestureRecognizers>
                            <StackLayout Padding="5" Orientation="Vertical">
                                <Label LineBreakMode="WordWrap" Text="{Binding SomeText}" />
    
                            </StackLayout>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Yellow" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </SwipeView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
    

    enter image description here