Item in CollectionView is not highlighted if used in SwipeView ?

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.)

Today in MAUI there is the same problem. I explain our problem, I have this layout:
<DataTemplate>

<SwipeView>

<SwipeView.BotomItems>

<Border> here inside is my layout </Border

</SwipeView>
</DataTemplate>

If I put this code

 <VisualStateManager.VisualStateGroups>
 <VisualStateGroupList>
 <VisualStateGroup x:Name="CommonStates">
 <VisualState x:Name="Selected">
 <VisualState.Setters>
 <Setter Property="BackgroundColor" Value="{DynamicResource primary}" />
 </VisualState.Setters>
 </VisualState>
 <VisualState x:Name="Normal">
 <VisualState.Setters>
 <Setter Property="BackgroundColor" Value="{DynamicResource black025}" />
 </VisualState.Setters>
 </VisualState>
 </VisualStateGroup>
 </VisualStateGroupList>
 </VisualStateManager.VisualStateGroups>

Before </Swipeview> It changes the backgorund underneath my layout aka border because it changes the background color of the SWIPE ! while I need to change the background color of the <Border> to see it visually in UI !

If I move the visual state before </Border> it doesn't work.

So I neet to change the visual state of my element in order that user have a visual feedback, otherwise the swipe is underneath my layout, visible only if I swipe.

SOLUTION:

Add

 <Border x:Name="RootBorder"

Then add TargetName to redirect to the desired object.

 <VisualStateManager.VisualStateGroups>
 <VisualStateGroupList>
 <VisualStateGroup x:Name="CommonStates">
 <VisualState x:Name="Selected">
 <VisualState.Setters>
 <Setter TargetName="RootBorder" Property="BackgroundColor" Value="Red" />
 </VisualState.Setters>
 </VisualState>
 <VisualState x:Name="Normal">
 <VisualState.Setters>
 <Setter TargetName="RootBorder" Property="BackgroundColor" Value="White" />
 </VisualState.Setters>
 </VisualState>
 </VisualStateGroup>
 </VisualStateGroupList>
 </VisualStateManager.VisualStateGroups>

Hello,

Welcome to our Microsoft Q&A platform!

I test it through the code snippet you provided, and only add the content of SwipeView and RightItems, when click CollectionView ,it is highlighted. It works in both iOS and Android, I can't reproduce this issue.

<StackLayout> 
 <CollectionView 
 SelectionMode="Single" 
 ItemsSource="{Binding SourceList}"> 
 <CollectionView.ItemTemplate > 
 <DataTemplate> 
 <SwipeView > 
 <SwipeView.RightItems> 
 <SwipeItems><!--add SwipeItem--> 
 <SwipeItem Text="delete" BackgroundColor="Blue" Invoked="SwipeItem_Invoked"> 
 </SwipeItem> 
 </SwipeItems> 
 </SwipeView.RightItems> 
 <StackLayout><!--add this content--> 
 <Label Text="{Binding .}" HeightRequest="80"></Label> 
 </StackLayout> 
 
 </SwipeView> 
 </DataTemplate> 
 </CollectionView.ItemTemplate> 
 </CollectionView> 
 
 </StackLayout> 

Then I try to set SwipeView background color to white, and add VisualStateManager.VisualStateGroups , it also works, you could have a try.

<CollectionView 
 SelectionMode="Single" 
 ItemsSource="{Binding SourceList}"> 
 <CollectionView.ItemTemplate > 
 <DataTemplate> 
 <SwipeView BackgroundColor="White"> 
 <SwipeView.RightItems> 
 <SwipeItems> 
 <SwipeItem Text="delete" BackgroundColor="Blue" Invoked="SwipeItem_Invoked"> 
 </SwipeItem> 
 </SwipeItems> 
 </SwipeView.RightItems> 
 <StackLayout> 
 <Label Text="{Binding .}" HeightRequest="80"></Label> 
 </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> 

I'm afraid you could share more operation information, running environment and code snippets or share me a demo to test.
Best Regards,
Wenyan Zhang

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.