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