How to change colour in collection view upon single selection-CodePudding

<CollectionView x:Name="nList" SelectionMode="Single" VerticalScrollBarVisibility="Always" SelectionChanged="OnMakingSelection" >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>

                           
                            <SwipeView>
                                <SwipeView.RightItems>
                                    <SwipeItem Text="Delete" BackgroundColor="Red" Invoked="Delete_Btn" >

                                    </SwipeItem>
                                </SwipeView.RightItems>

                                <StackLayout BackgroundColor="AntiqueWhite">


                                <Label Text="{Binding UserNotes}" TextColor="Black" FontFamily="PK" FontAttributes="Bold" FontSize="33"  HorizontalOptions="Center"/>
                                    <Label  x:Name="loclabel" Text= "{Binding Location}" FontAttributes="Bold" TextColor="Black"  HorizontalOptions="Center" />
                                    <Button  x:Name="mapbtnnn" Text="Open in Maps" FontFamily="PF"  Clicked="Button_Clicked_Map" BackgroundColor="PowderBlue"  CornerRadius="40"   HorizontalOptions="Center"></Button>
                                    <Image x:Name="Image" Source="{Binding Pic}" HeightRequest="90"  ></Image>
                                    <Label Text="*END OF NOTE*" FontAttributes="Bold" TextColor="Black"  HorizontalOptions="Center"/>


                                </StackLayout>

                            </SwipeView>
                            
                        </StackLayout>

                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Wanting to add colour to the selected item when sleceted.
Any tips,
I have tried a lot of steps online but none seem to work.
At the moment no colour is shown when selected

CodePudding user response：

Wanting to add color to the selected item when selected.

You could use visual-state-manager to change the color of selected item,set swip background color as white, and add VisualStateManager.VisualStateGroups for swip like below:

 <CollectionView x:Name="nList" SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <SwipeView BackgroundColor="White">
                        <SwipeView.RightItems>
                            <SwipeItem Text="Delete" BackgroundColor="Red"  >

                            </SwipeItem>
                        </SwipeView.RightItems>
                        <StackLayout Padding="5" Orientation="Vertical">
                            <Label LineBreakMode="WordWrap" Text="{Binding Name}" />
                        </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>
    </StackLayout>

Code behind:

 public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();

        nList.ItemsSource = new List<Contact>

        { 
            new Contact("JP Morgan"),
            new Contact("Andrew Carnegie"),
            new Contact("Steve Jobs")
        };
    }
}

public class Contact
{
    public string Name { get; set; }
    public Contact(string name)
    {
        Name = name;
    }
}