Home > Software engineering >  How to change colour in collection view upon single selection
How to change colour in collection view upon single selection

Time:04-28

<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;
    }
}
  • Related