Articles in this section
Category / Section

How to show the snack bar at the bottom of list?

1 min read

SfListView can display a pop-up like, SnackBar using SfPopupLayout at any desired position of the list by tapping, double tapping, or holding the item.


<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
        <local:BookInfoRepository x:Name="viewModel" />
    <syncfusion:SfListView x:Name="listView" 
                   ItemsSource="{Binding BookInfo}">
                    <Label Text="{Binding BookName}" />
                    <Button Text="Show SnackBar" Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Name=listView}}" CommandParameter="{x:Reference Name=listView}" />


Here, ItemWidth sets the screen width for SfPopupLayout using the OnSizeAllocated method.


public partial class MainPage: ContentPage
     public MainPage()
     protected override void OnSizeAllocated(double width, double height)
         viewModel.ItemWidth = width;
         base.OnSizeAllocated(width, height);

SfPopupLayout is customized with label and button that displays when tapping the ListViewItem.



private void buttonTapped(object obj)
    var listview= obj as SfListView;
    popupLayout = new SfPopupLayout();
    popupLayout.PopupView.HeightRequest = 50;
    popupLayout.PopupView.WidthRequest = ItemWidth;
    popupLayout.PopupView.ContentTemplate = new DataTemplate(() =>
          var grid = new Grid();
          grid.BackgroundColor = Color.Black;
          var label1 = new Label()
              Text = "SnackView"
          var button = new Button()
               Text = "Action",
               TextColor = Color.Violet
            return grid;
    popupLayout.PopupView.ShowHeader = false;
    popupLayout.PopupView.ShowFooter = false;
    popupLayout.HeightRequest = 50;
    popupLayout.WidthRequest = 50;
    popupLayout.ShowRelativeToView(listview, RelativePosition.AlignBottom,0,0);


Run the application.



Sample Link : SnackBarSample




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