We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve SingleDeSelect when use ListView with Rg.Plugin.Popup in Xamarin.Forms (SfListView)

Platform: Xamarin.Forms |
Control: SfListView

You can deselect the ListViewItem when navigating back to the ListView page in Xamarin.Forms SfListView.

XAML

Bind SfListView.TapCommand to show the Popup page using the Rg.Plugin.Popup framework. Bind SelectedItem to handle the selection.

<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" Title="ListViewPage">
 
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <syncfusion:SfListView x:Name="listView" ItemSize="60" TapCommand="{Binding ShowPopup}" ItemsSource="{Binding contactsinfo}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
            <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>
    </ContentPage.Content>
</ContentPage>

You can refer to our online document to work with Rg.Plugin.Popup using the link below,

https://www.syncfusion.com/kb/11353/how-to-show-xamarin-forms-listview-sflistview-in-popup-using-rg-plugin-popup-framework

C#

In the ShowPopup command, show the Popup page using the PushAsync method of the PopupNavigation service.

public class ContactsViewModel : INotifyPropertyChanged
{
    public Command<object> ShowPopup { get; set; }
    public ContactsViewModel()
    {
        ShowPopup = new Command<object>(ShowPopupPage);
    }
 
    private async void ShowPopupPage(object sender)
    {
        //Setting binding context for the popup page to show the tapped item.
        var popupPage = new ListViewPage();
        popupPage.BindingContext = this;
        await PopupNavigation.Instance.PushAsync(popupPage);
    }
}

Set the SelectedItem to null to disable the selection in the Close command and navigate back to the ListView page using the PopAsync method of the PopupNavigation service.

public class ContactsViewModel : INotifyPropertyChanged
{
    public Command<object> ClosePopup { get; set; }
    
    public ContactsViewModel()
    {
        ClosePopup = new Command<object>(ClosePopupPage);
    }
    
    private async void ClosePopupPage(object sender)
    {
        //Set selected item as null to clear the selection.
        SelectedItem = null;
        await PopupNavigation.Instance.PopAsync(true);
    }
}

Output

Demo to disable the selection when navigating back to ListView page in Xamarin.Forms SfListView.

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile