Category / Section
How to show the snack bar at the bottom of list?
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