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.

xaml

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

 

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

C#

 
public partial class MainPage: ContentPage
 {
     public MainPage()
      {
        InitializeComponent();
      }
 
     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.

 

C#

 
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
                    
             };
            
            grid.Children.Add(label1);
            grid.Children.Add(button);
            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?
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