Articles in this section
Category / Section

How to apply ListView selected item color in Xamarin.Forms navigation (SfListView)?

1 min read

You can apply the selection color before navigating to another page using thread in Xamarin.Forms SfListView.

XAML

Bind SfListView.SelectionChangedCommand to navigate to the next page.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
  <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}" SelectionChangedCommand="{Binding SelectionCommand}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <Grid x:Name="grid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                            <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C#

In the SelectionChangedCommand, use MainThread to navigate to another page.

public class ContactsViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Contacts> ContactsInfo { get; set; }
    public Command<object> SelectionCommand { get; set; }
 
    public ContactsViewModel()
    {
        ContactsInfo = new ObservableCollection<Contacts>();
        SelectionCommand = new Command<object>(OnItemSelected);
        GenerateInfo();
    }
 
    private void OnItemSelected(object obj)
    {
        var selectedItem = (obj as Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs).AddedItems[0] as Contacts;
        var newPage = new NewPage();
        newPage.BindingContext = selectedItem;
 
        Device.BeginInvokeOnMainThread(async () =>
        {
            await Task.Delay(200);
            await App.Current.MainPage.Navigation.PushAsync(newPage);
        });
    }
}

Output

Demo image for updating selection before navigating to another page in Xamarin.Forms SfListView.

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied