Articles in this section
Category / Section

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

2 mins read

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

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