How To Apply Listview Selected Item Color In Xamarin.Forms Navigation?

Updated on Sep 14, 2025

Browse Code

Download

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

You can also refer the following article.

https://www.syncfusion.com/kb/11684/how-to-apply-listview-selected-item-color-in-xamarin-forms-navigation-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>

In the SelectionChangedCommand, using 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

SelectionNavigation