Articles in this section
Category / Section

How to show Xamarin.Forms ListView (SfListView) in popup using Rg.Plugin.Popup framework ?

4 mins read

You can load the Xamarin.Forms SfListView inside popup using Rg.Plugin.Popup framework. Please follow the below steps to work with Rg plugin popup.

Step 1: Install the Rg.Plugin.Popup Nuget package in the shared code project.

  

Step 2: Initialize the popup plugin in each platform.

In Android, initialize the plugin in MainActivity.cs page. Also, override the OnButtonPressed and invoke SendBackPressed for back button to work with the plugin.

namespace ListViewXamarin.Droid
{
    [Activity(Label = "ListViewXamarin", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
 
            base.OnCreate(savedInstanceState);
            Rg.Plugins.Popup.Popup.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
        
        public override void OnBackPressed()
        {
            if (Rg.Plugins.Popup.Popup.SendBackPressed(base.OnBackPressed))
            {
                // Do something if there are some pages in the `PopupStack`
            }
            else
            {
                // Do something if there are not any pages in the `PopupStack`
            }
        }
    }
}

In iOS, initialize the plugin in AppDelegate.cs page.

namespace ListViewXamarin.iOS  
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            SfListViewRenderer.Init();
            Rg.Plugins.Popup.Popup.Init();
            LoadApplication(new App());
 
            return base.FinishedLaunching(app, options);
        }
    }
}

In UWP, initialize the plugin in App.xaml.cs page.

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    ...
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();
 
        rootFrame.NavigationFailed += OnNavigationFailed;
 
        Rg.Plugins.Popup.Popup.Init();
        Xamarin.Forms.Forms.Init(e);
 
        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }
        }
        ...
}

Step 3:Use command to show the popup using PopupNavigation services in ViewModel class and bind the command to button.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             x:Class="ListViewXamarin.MyContentPage">
 
    <Button Text="Show Popup" 
            Command="{Binding ShowPopup}" 
            HeightRequest="50" 
            WidthRequest="150"
            HorizontalOptions="Center" 
            VerticalOptions="Center"
            BindingContext="{local:FileManagerViewModel}"/>
</ContentPage>

 

public Command ShowPopup { get; set; }
 
public ContactsViewModel()
{
    ShowPopup = new Command(ShowPopupPage);
}
private async void ShowPopupPage(object obj)
{
    await PopupNavigation.Instance.PushAsync(new MainPage());
}

Step 4: Create new page and add SfListView inside PopupPage.Content.

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.ListViewPage">
 
    <pages:PopupPage.BindingContext>
        <local:ContactsViewModel x:Name="vm"/>
    </pages:PopupPage.BindingContext>
 
    <pages:PopupPage.Content>
            <syncfusion:SfListView x:Name="listView" 
                                   AutoFitMode="Height" 
                                   ItemsSource="{Binding contactsinfo}"
                                   Margin="40">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid x:Name="grid" RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="1" />
                                    </Grid.RowDefinitions>
                                    <Grid RowSpacing="0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="70" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
 
                                        <Image Source="{Binding ContactImage}"
                                               HeightRequest="50" WidthRequest="50"/>
                                        <Grid Grid.Column="1">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                        <Label Text="{Binding ContactName}"/>
                                        <Label Grid.Row="1"
                                               Grid.Column="0"
                                               Text="{Binding ContactNumber}"/>
                                        </Grid>
                                            <Grid Grid.Row="0"
                                                  Grid.Column="2">
                                            <Label Text="{Binding ContactType}"/>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
    </pages:PopupPage.Content>
</pages:PopupPage>

Output

ListView in Rg.Popup

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