The .NET MAUI ListView control allows multiple item selections using the SelectionMode property. To access the selected items within the TapCommand, bind the SelectedItems property to your ViewModel, which holds the collection of currently selected items, and process them inside your command. XAML <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" SelectionMode="Multiple" SelectionGesture="Tap" SelectedItems="{Binding SelectedItems}" TapCommand="{Binding TapCommand}" ItemSize="100"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="10"> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> <RowDefinition Height="0.6*" /> </Grid.RowDefinitions> <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="21" /> <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> ViewModel public class BookInfoRepository { private ObservableCollection<object>? selectedItems = new ObservableCollection<object>(); public ObservableCollection<object>? SelectedItems { get { return selectedItems; } set { this.selectedItems = value; } } public ICommand TapCommand { get; set; } public BookInfoRepository() { TapCommand = new Command(ExecuteTapCommamd); } private void ExecuteTapCommamd(object obj) { // SelectedItems contains the currently selected items. var _selectedItems = this.SelectedItems; } } Download the complete sample on GitHub Conclusion: I hope you enjoyed learning how to get the selected items using TapCommand in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
When working with the .NET MAUI ListView, you may encounter situations where the keyboard covers part of the ListView, making it difficult for users to interact with all items. This guide will help you adjust the layout so the ListView resizes appropriately when the keyboard opens and closes. Android For Android, you can set the WindowSoftInputModeAdjust property to Resize. This automatically resizes the layout, ensuring all ListView items are visible when the keyboard is displayed. public class MainActivity : MauiAppCompatActivity { protected override void OnCreate(Bundle? savedInstanceState) { base.OnCreate(savedInstanceState); // Set WindowSoftInputModeAdjust to Resize App.Current!.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>() .UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize); } } iOS Currently, iOS does not offer a direct API to automatically resize the application when the keyboard appears. You can manage this by manually adjusting the layout’s margin using keyboard events: ObserveWillShow: Triggered when the keyboard is about to appear. ObserveWillHide: Triggered when the keyboard is about to disappear. By handling these events, you can dynamically adjust the page’s bottom margin to prevent the keyboard from covering ListView items, allowing users to scroll and view all content seamlessly. public partial class MainPage : ContentPage { # if IOS private NSObject? _keyboardShowObserver; private NSObject? _keyboardHideObserver; #endif public MainPage() { InitializeComponent(); var numbers = Enumerable.Range(1, 20).ToList(); NumberListView.ItemsSource = numbers; # if IOS // Subscribe to keyboard show and hide notifications _keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardWillShow); _keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardWillHide); #endif } #if IOS // This method is triggered when the iOS keyboard is about to appear. It calculates the height of the keyboard and adjusts the page layout by calling AdjustScrollViewPadding to adjusts the bottom margin of the page content based on the height of the keyboard when it appears. private void OnKeyboardWillShow(object? sender, UIKeyboardEventArgs args) { var keyboardFrame = args.FrameEnd; AdjustScrollViewPadding(keyboardFrame.Height); } // This method is triggered when the keyboard disappears. // It resets the margin to 0 so the layout returns to normal. private void OnKeyboardWillHide(object? sender, UIKeyboardEventArgs args) { AdjustScrollViewPadding(0); } // This method dynamically adjusts the bottom margin of the page content based on the height of the keyboard when it appears or disappears. private void AdjustScrollViewPadding(double keyboardHeight) { var pageContent = this.Content as View; if (pageContent != null) { // Adjust the margin to accommodate the keyboard height pageContent.Margin = new Thickness(0, 0, 0, keyboardHeight); } } // This method is triggered when the page is about to disappear, such as when navigating away from the current page. It ensures proper cleanup by unsubscribing from the keyboard notifications, preventing potential memory leaks. protected override void OnDisappearing() { base.OnDisappearing(); // Unsubscribe from notifications to avoid memory leaks _keyboardShowObserver?.Dispose(); _keyboardHideObserver?.Dispose(); } #endif Conclusion: I hope you enjoyed learning how to resize .NET MAUI ListView (SfListView). You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can get the position relative to the ListViewItem by getting its Y position and calculating the position by subtracting that Y-position value from the position you received in the ItemTapped,ItemDoubleTapped or ItemLongPressed event. private void listView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e) { var listViewItemYPosition = GetListViewItemPosition(GetListViewItem(e.DataItem)); var positionYBasedOnItem = e.Position.Y - listViewItemYPosition; } private object GetListViewItem(object obj) { var item = obj as SimpleModel; var Layout = listView.ItemsLayout as LinearLayout; var rowItems = Layout!.GetType().GetRuntimeFields().First(p => p.Name == "items").GetValue(Layout) as IList; foreach (ListViewItemInfo iteminfo in rowItems) { if (iteminfo.Element != null && iteminfo.DataItem == item) { itemView = iteminfo.Element as View; return itemView; } } return itemView; } private double GetListViewItemPosition(object obj) { var platformView = (obj as ListViewItem)!.Handler!.PlatformView; #if WINDOWS var native = platformView as Microsoft.UI.Xaml.UIElement; var point = native!.TransformToVisual(null).TransformPoint(new Windows.Foundation.Point(0, 0)); return point.Y; #elif ANDROID var native = platformView as Android.Views.View; var point = new int[2]; native!.GetLocationOnScreen(point); return point[1] / DeviceDisplay.MainDisplayInfo.Density; #elif IOS var native = platformView as UIKit.UIView; var point = native!.ConvertPointToView(new CoreGraphics.CGPoint(0, 0), null); return point.Y; #endif return 0; } Output Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to touch the position to the corresponding item in the .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can display an empty view in a group without items in .NET MAUI ListView by handling the visibility of the view within the GroupHeaderTemplate. Step 1: When a group has no items, add dummy items to make the group header visible and set the dummy item height to 0. private void listView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e) { var item = e.DataItem as Contacts; GroupResult group = null; if (item != null) { foreach (var a in this.listView.DataSource!.Groups) { if (a.Key.ToString() == item.Group) { group = a; break; } } if (group!.Count == 1 && item.ContactName != "") { var record = new Contacts() { ContactName = "", ContactNumber = ""}; record.Group = item.Group; viewModel.ContactsInfo!.Add(record); } if (item.ContactName != "") { viewModel.ContactsInfo!.Remove(item); } } } private void ListView_QueryItemSize(object sender, QueryItemSizeEventArgs e) { // set item size as 0 for dummy item to make invisible in view. var item = e.DataItem as Contacts; if (item != null && item.ContactName == "") { e.ItemSize = 0; e.Handled = true; } } Step 2: Change the visibility and HeightRequest of an EmptyView grid inside the GroupHeaderTemplate based on the item count in the group. <listView:SfListView.GroupHeaderTemplate> <DataTemplate> <Grid BackgroundColor="Teal" RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto"> <Label Text="{Binding Key}" FontSize="22" TextColor="White" FontAttributes="Bold" VerticalOptions="Center" Margin="10,0,0,0" /> <Image Grid.Column="1" Source="addcontact.png" Margin="0,0,20,0" HeightRequest="20" WidthRequest="20"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="AddContact_Tapped" CommandParameter="{Binding .}"/> </Image.GestureRecognizers> </Image> <Grid x:Name="groupEmptyView" BackgroundColor="LightCoral" Grid.Row="1" IsVisible="{Binding . , Converter= {StaticResource EmptyViewHeightConverter}}" HeightRequest="{Binding ., Converter={StaticResource EmptyViewHeightConverter}}"> <Label VerticalOptions="Center" VerticalTextAlignment="Center" HorizontalOptions="Center" HorizontalTextAlignment="Center" Text="No Items"/> </Grid> </Grid> </DataTemplate> </listView:SfListView.GroupHeaderTemplate> Output Download the complete sample from GitHub. Conclusion: I hope you enjoyed learning how to show an empty view in a group without items in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI Cartesian Charts can be added inside the SfListView control. By using the ItemTemplate property, you can incorporate charts into the list view by following these steps: Step 1 Let’s define the Model class holds the XValue and YValue properties to generate the chart data points. C# public class Model { public string XValue { get; set; } public double YValue { get; set; } public Model(string x, double y) { XValue = x; YValue = y; } } Step 2 The SeriesViewModel class stores and manages chart data. It contains: Data1 - Stores monthly data. Data2 - Contains categories of engineering fields. Data3 - Holds car brand data. ChartTitle - Sets the chart title. C# public class SeriesViewModel { public ObservableCollection<Model> Data1 { get; set; } public ObservableCollection<Model> Data2 { get; set; } public ObservableCollection<Model> Data3 { get; set; } public string? ChartTitle { get; set; } public ChartSeriesCollection? Series { get; set; } public SeriesViewModel() { Data1 = new ObservableCollection<Model>(); Data2 = new ObservableCollection<Model>(); Data3 = new ObservableCollection<Model>(); Data1.Add(new Model("Jan", 10)); Data1.Add(new Model("Feb", 15)); Data1.Add(new Model("Mar", 20)); Data1.Add(new Model("Apr", 15)); Data1.Add(new Model("May", 10)); Data2.Add(new Model("EEE", 20)); Data2.Add(new Model("CSE", 35)); Data2.Add(new Model("ECE", 10)); Data2.Add(new Model("Civil", 25)); Data2.Add(new Model("IT", 14)); Data3.Add(new Model("Benz", 13)); Data3.Add(new Model("Audi", 18)); Data3.Add(new Model("Volvo", 29)); Data3.Add(new Model("BMW", 17)); Data3.Add(new Model("Jaguar", 19)); } } Step 3 To bind data to the SfListView, we need to create a ViewModel class responsible for binding the necessary data. This can be accomplished using the following code snippet. C# public class ViewModel { public ObservableCollection<SeriesViewModel> SeriesItems { get; set; } public ViewModel() { SeriesItems = new ObservableCollection<SeriesViewModel>(); SeriesViewModel model = new SeriesViewModel(); SeriesItems.Add(new SeriesViewModel() { ChartTitle = "Column Chart", Series = new ChartSeriesCollection() { new ColumnSeries() { ItemsSource=model.Data2, XBindingPath="XValue", YBindingPath="YValue" } }, }); SeriesItems.Add(new SeriesViewModel() { ChartTitle = "Line Chart", Series = new ChartSeriesCollection() { new LineSeries() { ItemsSource=model.Data3, XBindingPath="XValue", YBindingPath="YValue" } }, }); SeriesItems.Add(new SeriesViewModel() { ChartTitle = "Spline Chart", Series = new ChartSeriesCollection() { new SplineSeries() { ItemsSource=model.Data1, XBindingPath="XValue", YBindingPath="YValue" } }, }); } } Step 4 By declaring the SfListView and binding its properties from the ViewModel class, incorporate the chart control into the SfListView. To achieve this, refer to the following code example. XAML <list:SfListView x:Name="sfListView" ItemsSource="{Binding SeriesItems}" ItemSize="210" > <list:SfListView.ItemTemplate> <DataTemplate> <ViewCell> <chart:SfCartesianChart x:Name="chart" Series="{Binding Series}"> <chart:SfCartesianChart.Title> <Label Text="{Binding ChartTitle}" HorizontalOptions="Center" FontAttributes="Bold"></Label> </chart:SfCartesianChart.Title> <chart:SfCartesianChart.XAxes> <chart:CategoryAxis></chart:CategoryAxis> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis></chart:NumericalAxis> </chart:SfCartesianChart.YAxes> </chart:SfCartesianChart> </ViewCell> </DataTemplate> </list:SfListView.ItemTemplate> </list:SfListView> Output Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to add the .NET MAUI Cartesian Charts in a ListView. You can refer to our .NET MAUI Charts feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to create and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView allows you to animate items as they come into view by overriding the OnItemAppearing method of ListViewItem. This method is raised when an item appears in the view, allowing for animation customization. This can be achieved by extending the ItemsGenerator class, applying animation for the listview items using the OnItemAppearing method and aborting animation for the collapsed item using the PropertyChanged event. public class Behaviours: Behavior<SfListView> { private SfListView listView; protected override void OnAttachedTo(BindableObject bindable) { listView = bindable as SfListView; listView.ItemsGenerator = new ItemGeneratorExt(listView); base.OnAttachedTo(bindable); } } Extending the ItemsGenerator class: public class ItemGeneratorExt: ItemsGenerator { public SfListView ListView { get; set; } public ItemGeneratorExt(SfListView listview): base(listview) { ListView = listview; } protected override ListViewItem OnCreateListViewItem(int itemIndex, ItemType type, object data = null) { if (type == ItemType.Record) return new ListViewItemExt(ListView); return base.OnCreateListViewItem(itemIndex, type, data); } } Customize ListViewItem to apply animations when an item appears. public class ListViewItemExt: ListViewItem { private SfListView _listView; public ListViewItemExt(SfListView listView) { _listView = listView; } protected override void OnItemAppearing() { this.Opacity = 0; this.FadeTo(1, 400, Easing.SinInOut); base.OnItemAppearing(); } } Download the complete sample from GitHub. Conclusion: I hope you enjoyed learning how to animate items in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) can be easily integrated within the .NET MAUI TabView (SfTabView). This guide will demonstrate how to achieve this setup effectively. XAML Create a separate XAML file for the SfListView to encapsulate its configuration. <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MauiListView" xmlns:sync="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" x:Class="MauiListView.BookPage"> <sync:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="100"> <sync:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="10"> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> <RowDefinition Height="0.6*" /> </Grid.RowDefinitions> <Label x:Name="label" Text="{Binding BookName}" FontSize="21" FontAttributes="Bold" /> <Label Grid.Row="1" Text="{Binding BookDescription}" FontSize="15" /> </Grid> </DataTemplate> </sync:SfListView.ItemTemplate> </sync:SfListView> </ContentView> XAML Configure the SfTabView in your MainPage.xaml to include the ListView. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView" xmlns:local="clr-namespace:MauiListView" x:Class="MauiListView.MainPage"> <tabView:SfTabView TabBarBackground="#dddddd"> <tabView:SfTabItem Header="Books"> <tabView:SfTabItem.Content> <local:BookPage/> </tabView:SfTabItem.Content> </tabView:SfTabItem> <tabView:SfTabItem Header="Inbox"> <tabView:SfTabItem.Content> <local:InboxPage/> </tabView:SfTabItem.Content> </tabView:SfTabItem> <tabView:SfTabItem Header="Contacts"> <tabView:SfTabItem.Content> <local:ContactPage/> </tabView:SfTabItem.Content> </tabView:SfTabItem> </tabView:SfTabView> </ContentPage> Output Download the complete sample from GitHub. Conclusion: I hope you enjoyed learning how to load the SfListview within SfTabview in .NET MAUI. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI ListView (SfListView), data items can be passed to the ViewModel using the EventsToCommand behavior to adhere to the MVVM pattern. This article demonstrates how to pass item data as a command parameter in the ItemTapped command. C# public class ContactsViewModel { Command<object> tapCommand; public Command<object> TapCommand { get { return tapCommand; } protected set { tapCommand = value; } } public ContactsViewModel() { tapCommand = new Command<object>(OnTapped); } public void OnTapped(object obj) { var name = (obj as Contacts).ContactName ; var alert = Application.Current.MainPage.DisplayAlert("Parameter Passed","Name:" + name,"Cancel"); } } Associate the command with the appropriate event of SfListView using behaviors. Xaml <listView:SfListView x:Name="listView"> <listView:SfListView.Behaviors> <local:EventToCommandBehavior EventName="ItemTapped" Command="{Binding TapCommand}" Converter="{StaticResource EventArgs}" /> </listView:SfListView.Behaviors> </listView:SfListView> Create a CustomConverter to extract ItemData from ItemTappedEventArgs. C# public class CustomConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { object eventArgs = null; Syncfusion.Maui.ListView.ItemTappedEventArgs eventArg = null; if (value is Syncfusion.ListView.XForms.ItemTappedEventArgs) { eventArg = value as Syncfusion.Maui.ListView.ItemTappedEventArgs; eventArgs = eventArg.DataItem; } return eventArgs; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } When a ListViewItem is tapped, the ItemData is returned from CustomConverter to the command in the ViewModel, enabling the desired operation to be performed. Output Download the complete sample from GitHub. Conclusion: I hope you enjoyed learning how to pass the item data as a command parameter in the ItemTapped command. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView allows you to convert the events into commands using Behaviors to follow the MVVM pattern. C# To achieve this, need to create a command for the ItemTapped event of the SfListView in the ViewModel. public class ContactsViewModel : INotifyPropertyChanged { #region Properties public Command<Syncfusion.Maui.ListView.ItemTappedEventArgs> tapCommand; public Command<Syncfusion.Maui.ListView.ItemTappedEventArgs> TapCommand { get { return tapCommand; } set { tapCommand = value; OnPropertyChanged("TapCommand"); } } #endregion #region Constructor public ContactsViewModel() { TapCommand = new Command<Syncfusion.Maui.ListView.ItemTappedEventArgs>(OnTapCommand); } private void OnTapCommand(Syncfusion.Maui.ListView.ItemTappedEventArgs obj) { var name = (obj.DataItem as Contacts).ContactName; var number = (obj.DataItem as Contacts).ContactNumber; App.Current.MainPage.DisplayAlert(name, "Number:" + number, "Ok"); } XAML Associate the command to the appropriate event of SfListView using Behaviors, as shown below. <syncfusion:SfListView x:Name="listView" > <syncfusion:SfListView.Behaviors> <local:EventToCommandBehavior EventName="ItemTapped" Command="{Binding TapCommand}"> </local:EventToCommandBehavior> </syncfusion:SfListView.Behaviors> </syncfusion:SfListView> Now, when an item in the ListView is tapped, the corresponding Command in the ViewModel will be invoked automatically, performing the desired operation, as illustrated in the screenshot. Output Download the complete sample from GitHub. Conclusion: I hope you enjoyed learning how to convert events into commands in .NET MAUI ListView (SfListView). You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView allows displaying a .NET MAUI Popup (SfPopup) as a context menu with different menu items when an item is long pressed. This is achieved by customizing the ListView and using a custom view. The popup menu is displayed based on the touch position using the Position property from the ItemLongPress event. Defining ListView: <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"> <ContentPage.BindingContext> <local:ContactsViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content> <Grid > <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding contactsinfo}"> <syncfusion:SfListView.Behaviors> <local:Behavior/> </syncfusion:SfListView.Behaviors> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <StackLayout> <Grid VerticalOptions="Center"> <Image Source="{Binding ContactImage}" Grid.Column="0"/> <StackLayout Grid.Column="1"> <Label Text="{Binding ContactName}"/> <Label Text="{Binding ContactNumber}"/> </StackLayout> </Grid> <StackLayout HeightRequest="1" BackgroundColor="Gray"/> </StackLayout> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </Grid> </ContentPage.Content> </ContentPage> Defining Popup with Sort, Delete, and Cancel options: public class Behavior : Behavior<SfListView> { SfListView ListView; int sortorder = 0; Contacts item; View itemView; SfPopup popupLayout; protected override void OnAttachedTo(SfListView listView) { ListView = listView; ListView.ItemLongPress += ListView_ItemLongPress; ListView.ScrollStateChanged += ListView_ScrollStateChanged; ListView.ItemTapped += ListView_ItemTapped; base.OnAttachedTo(listView); } private void ListView_ItemTapped(object sender, ItemTappedEventArgs e) { if (popupLayout != null) { popupLayout.Dismiss(); } } private void ListView_ScrollStateChanged(object sender, ScrollStateChangedEventArgs e) { if (popupLayout != null) { popupLayout.Dismiss(); } } private void ListView_ItemLongPress(object sender, ItemLongPressEventArgs e) { item = e.DataItem as Contacts; var Layout = ListView.ItemsLayout as LinearLayout; var rowItems = Layout!.GetType().GetRuntimeFields().First(p => p.Name == "items").GetValue(Layout) as IList; foreach (ListViewItemInfo iteminfo in rowItems) { if(iteminfo.Element != null && iteminfo.DataItem == item) { itemView = iteminfo.Element as View; break; } } popupLayout = new SfPopup(); popupLayout.HeightRequest = 150; popupLayout.WidthRequest = 100; popupLayout.ContentTemplate = new DataTemplate(() => { var mainStack = new StackLayout(); mainStack.BackgroundColor = Colors.Teal; var deletedButton = new Button() { Text = "Delete", HeightRequest=50, BorderWidth=1, BorderColor = Colors.White, BackgroundColor=Colors.Teal, TextColor = Colors.White }; deletedButton.Clicked += DeletedButton_Clicked; var Sortbutton = new Button() { Text = "Sort", BorderWidth = 1, HeightRequest = 50, BorderColor = Colors.White, BackgroundColor = Colors.Teal, TextColor = Colors.White, }; Sortbutton.Clicked += Sortbutton_Clicked; var Dismiss = new Button() { Text = "Cancel", HeightRequest = 50, BorderWidth = 1, BorderColor = Colors.White, BackgroundColor = Colors.Teal, TextColor = Colors.White, }; Dismiss.Clicked += Dismiss_Clicked; mainStack.Children.Add(deletedButton); mainStack.Children.Add(Sortbutton); mainStack.Children.Add(Dismiss); return mainStack; }); popupLayout.PopupStyle.CornerRadius = 5; popupLayout.ShowHeader = false; popupLayout.ShowFooter = false; popupLayout.ShowRelativeToView(itemView, PopupRelativePosition.AlignBottomRight); } private void Dismiss_Clicked(object? sender, EventArgs e) { popupLayout.Dismiss(); } private void Sortbutton_Clicked(object? sender, EventArgs e) { if (ListView == null) return; ListView.DataSource.SortDescriptors.Clear(); popupLayout.Dismiss(); ListView.DataSource.LiveDataUpdateMode = LiveDataUpdateMode.AllowDataShaping; if (sortorder == 0) { ListView.DataSource.SortDescriptors.Add(new SortDescriptor { PropertyName = "ContactName", Direction = ListSortDirection.Descending }); sortorder = 1; } else { ListView.DataSource.SortDescriptors.Add(new SortDescriptor { PropertyName = "ContactName", Direction = ListSortDirection.Ascending }); sortorder = 0; } } private void DeletedButton_Clicked(object sender, EventArgs e) { if (ListView == null) return; var source = ListView.ItemsSource as IList; if (source != null && source.Contains(item)) { source.Remove(item); App.Current.MainPage.DisplayAlert("Alert", item.ContactName + " is deleted", "OK"); } else App.Current.MainPage.DisplayAlert("Alert", "Unable to delete the item", "OK"); item = null; source = null; } } Due to limitations in accurately obtaining the touch position relative to the selected item during the LongPress event, the popup is strategically positioned at the bottom right of the screen, ensuring a consistent and visually appealing user experience. Download the complete sample from GitHub Conclusion: I hope you enjoyed learning how to add a context menu for items in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI ListView, you can customize the GroupHeaderTemplate by binding properties in the ViewModel to elements within the template. This approach allows elements to be shown or hidden dynamically based on ViewModel properties, which will automatically update the UI when these properties change at runtime. Create a ViewModel with a property that can be bound to the IsVisible property of elements in the GroupHeaderTemplate. Implement INotifyPropertyChanged to notify the UI of changes. C# public class ContactsViewModel : INotifyPropertyChanged { private bool isLabelVisible = false; public bool IsLabelVisible { get { return isLabelVisible; } set { isLabelVisible = value; OnPropertyChanged("IsLabelVisible"); } } } XAML <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:YourNamespace" xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" x:Class="YourNamespace.MainPage"> <ContentPage.BindingContext> <local:ContactsViewModel /> </ContentPage.BindingContext> <ContentPage.Resources> <DataTemplate x:Key="GroupHeaderTemplate"> <ViewCell> <ViewCell.View> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="30" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="40" /> </Grid.ColumnDefinitions> <Image x:Name="NormalImage" Grid.Column="0" HorizontalOptions="Center" Source="{Binding IsExpand, Converter={StaticResource BoolToImageConverter}}" VerticalOptions="Center" /> <Label x:Name="label" Text="{Binding Key}" Grid.Column="1" IsVisible="{Binding Source={x:Reference listView}, Path=BindingContext.IsLabelVisible}" /> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </ContentPage.Resources> <listView:SfListView x:Name="listView" GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"> <!-- Other ListView properties and configurations here --> </listView:SfListView> </ContentPage> Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to customize the group header template using MVVM in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView facilitates displaying an activity indicator for each item while its data is being loaded in the background. To achieve this, place both an ActivityIndicator and a Button in the same row of a Grid element inside the ItemTemplate of SfListView. Maintain a bool property in your model class, which is bound to their IsVisible property to control their visibility at runtime, as demonstrated in the code snippets below. C# namespace ListViewMaui { public class BookInfo : INotifyPropertyChanged { private string bookName; private string bookDescription; private bool isDescriptionVisible; private bool isButtonVisible; public bool isIndicatorVisible; public BookInfo() { } public string BookName { get { return bookName; } set { bookName = value; OnPropertyChanged("BookName"); } } public bool IsDescriptionVisible { get { return isDescriptionVisible; } set { isDescriptionVisible = value; OnPropertyChanged("IsDescriptionVisible"); } } public string BookDescription { get { return bookDescription; } set { bookDescription = value; OnPropertyChanged("BookDescription"); } } public bool IsButtonVisible { get { return isButtonVisible; } set { isButtonVisible = value; OnPropertyChanged("IsButtonVisible"); } } public bool IsIndicatorVisible { get { return isIndicatorVisible; } set { isIndicatorVisible = value; OnPropertyChanged("IsIndicatorVisible"); } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string name) { if (this.PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(name)); } } } Disable the visibility of the Description and ActivityIndicator initially when adding items to the collection. C# namespace ListViewMaui { public class BookInfoRepository : INotifyPropertyChanged { private ObservableCollection<BookInfo> newBookInfo; public event PropertyChangedEventHandler PropertyChanged; public ObservableCollection<BookInfo> NewBookInfo { get { return newBookInfo; } set { this.newBookInfo = value; } } public void OnPropertyChanged(string name) { if (this.PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(name)); } public BookInfoRepository() { GenerateNewBookInfo(); } private void GenerateNewBookInfo() { NewBookInfo = new ObservableCollection<BookInfo>(); NewBookInfo.Add(new BookInfo() { BookName = "Machine Learning Using C#", BookDescription = "You’ll learn several different approaches to applying machine learning", IsIndicatorVisible = false, IsButtonVisible = true, IsDescriptionVisible = false }); NewBookInfo.Add(new BookInfo() { BookName = "Object-Oriented Programming in C#", BookDescription = "Object-oriented programming is the de facto programming paradigm", IsIndicatorVisible = false, IsButtonVisible = true, IsDescriptionVisible = false }); NewBookInfo.Add(new BookInfo() { BookName = "C# Code Contracts", BookDescription = "Code Contracts provide a way to convey code assumptions", IsIndicatorVisible = false, IsButtonVisible = true, IsDescriptionVisible = false }); } } } Bind the boolean values to the IsVisible properties to toggle between the ActivityIndicator and the Button while loading the description. XAML <ContentPage> <ContentPage.BindingContext> <local:BookInfoRepository x:Name="ViewModel" /> </ContentPage.BindingContext> <sync:SfListView x:Name="listView" AutoFitMode="Height" BackgroundColor="#d3d3d3" SelectionMode="None" ItemsSource="{Binding NewBookInfo}"> <sync:SfListView.ItemTemplate> <DataTemplate> <Frame HasShadow="True" Margin="5,5,5,0"> <Grid Padding="5"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="2*" /> </Grid.RowDefinitions> <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="19" /> <Button Grid.Row="1" Clicked="Button_Clicked" Text="Load Description" IsVisible="{Binding IsButtonVisible}" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Grid.Row="1" Text="{Binding BookDescription}" FontSize="15" IsVisible="{Binding IsDescriptionVisible}" /> <ActivityIndicator Grid.Row="1" IsEnabled="True" IsRunning="True" IsVisible="{Binding IsIndicatorVisible}" /> </Grid> </Frame> </DataTemplate> </sync:SfListView.ItemTemplate> </sync:SfListView> </ContentPage> In the Button’s Clicked event, retrieve the row data from its BindingContext and update the boolean values accordingly C# public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private async void Button_Clicked(object sender, EventArgs e) { var model = ((sender as Button).BindingContext as BookInfo); model.IsIndicatorVisible = true; model.IsButtonVisible = false; await Task.Delay(2000); model.IsDescriptionVisible = true; model.IsIndicatorVisible = false; } } Output: Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to display a busy indicator on each item in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data. Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI ListView (SfListView), you can remove an item by using a button placed inside the ItemTemplate of the SfListView. XAML Bind a ViewModel command to the Button’s Command property within the ListView. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewMaui" xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" x:Class="ListViewMaui.MainPage"> <ContentPage.BindingContext> <local:ContactsViewModel /> </ContentPage.BindingContext> <ContentPage.Content> <Grid RowSpacing="0"> <listView:SfListView x:Name="listView" ItemSize="70" SelectionMode="Multiple" IsStickyFooter="True" ItemsSource="{Binding Items}" ItemSpacing="0,0,5,0"> <listView:SfListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid x:Name="grid" RowSpacing="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="70" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" /> <Label Grid.Row="1" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" /> </Grid> </Grid> <StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/> </Grid> <Button WidthRequest="150" Text="Delete" Grid.Column="1" Command="{Binding Source={x:Reference listView}, Path=BindingContext.DeleteCommand}" CommandParameter="{Binding .}" /> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> </Grid> </ContentPage.Content> </ContentPage> C# In the ViewModel, implement a command handler to remove the selected item from the collection. using System; using System.Collections.Generic; namespace ListViewMaui { public class ContactsViewModel : INotifyPropertyChanged { public Command<object> DeleteCommand { get; set; } public ContactsViewModel() { DeleteCommand = new Command<object>(OnTapped); } private void OnTapped(object obj) { var contact = obj as Contacts; Items.Remove(contact); App.Current.MainPage.DisplayAlert("Message", "Item Deleted :" + contact.ContactName, "Ok"); } } } Output: Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to remove a ListView item using a button in the ItemTemplate in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI ListView, you can display the count of items in the footer by directly binding the count property of the ItemsSource within the FooterTemplate. <listView:SfListView.FooterTemplate> <DataTemplate> <StackLayout Orientation="Horizontal" HorizontalOptions="Start" VerticalOptions="Center" Padding="10,0,0,0"> <Label Text="Items Count" TextColor="Black" FontSize="Medium"/> <Label Text="{Binding Items.Count}" TextColor="Black" FontSize="Medium"/> </StackLayout> </DataTemplate> </listView:SfListView.FooterTemplate> Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to show the item count in the footer of the .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can access a named SfListView defined inside a DataTemplate of SfPopup by using Behavior. XAML In SfPopup’s ContentTemplate, add a behavior to the parent Grid of ListView. <popup:SfPopup x:Name="popupLayout"> <popup:SfPopup.ContentTemplate> <DataTemplate> <Grid> <Grid.Behaviors> <local:GridBehavior/> </Grid.Behaviors> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button Text="Find ListView" x:Name="listviewButton" BackgroundColor="LightGray"/> <sfListView:SfListView x:Name="listView" ItemSpacing="5" ItemsSource="{Binding Items}" SelectionMode="Single" Grid.Row="1"> <sfListView:SfListView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" RowSpacing="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"/> <Label Grid.Column="1" VerticalOptions="Center" HorizontalOptions="StartAndExpand" LineBreakMode="NoWrap" Text="{Binding ContactName}" FontSize="Medium" /> </Grid> </DataTemplate> </sfListView:SfListView.ItemTemplate> </sfListView:SfListView> </Grid> </DataTemplate> </popup:SfPopup.ContentTemplate> </popup:SfPopup> C# You can access the ListView instance using the ChildAdded event or the FindByName method in behavior. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; Button button; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } //Method 1 : Get SfListView reference using Grid.ChildAdded Event private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfListView) { listView = e.Element as SfListView; listView.RefreshView(); } } protected override void OnDetachingFrom(BindableObject bindable) { grid.ChildAdded -= Grid_ChildAdded; listView = null; grid = null; base.OnDetachingFrom(bindable); } } C# You can also get the ListView using FindByName method from the Parent element. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; Button button; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } //Method 1 : Get SfListView reference using Grid.ChildAdded Event private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } //Method 2 : Get SfListView reference using FindByName private void Button_Clicked(object sender, EventArgs e) { listView = grid.FindByName<SfListView>("listView"); App.Current.MainPage.DisplayAlert("Information", "ListView instance obtained", "Ok"); listView.ItemTapped += ListView_ItemTapped; } private void ListView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e) { App.Current.MainPage.DisplayAlert("Information", "ListView ItemTapped", "Ok"); } protected override void OnDetachingFrom(BindableObject bindable) { button.Clicked -= Button_Clicked; grid.ChildAdded -= Grid_ChildAdded; listView.ItemTapped -= ListView_ItemTapped; listView = null; button = null; grid = null; base.OnDetachingFrom(bindable); } } Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to access a named ListView inside a XAML DataTemplate in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In the .NET MAUI ListView (SfListView), the item background color will not be displayed for the selected item if the background color is defined for the ItemTemplate, which is the actual behavior in the framework. However, this can be achieved through a workaround by defining a property in the data model and using a custom converter. Define the IsSelected property in the model class to indicate whether the item is selected. This property will be updated when the selection is performed using the SelectionChanged event. Based on this property, the background color of the View defined in the ItemTemplate property can be changed by a custom converter class. C# The SfListView SelectionChanged EventArgs contains two properties: AddedItems and RemovedItems. Here, get the data of the selected item. public class Behavior:Behavior<SfListView> { private SfListView listView; protected override void OnAttachedTo(SfListView bindable) { listView = bindable; listView.SelectionChanged += ListView_SelectionChanged; base.OnAttachedTo(bindable); } #region CallBacks private void ListView_SelectionChanged(object sender, ItemSelectionChangedEventArgs e) { for (int i = 0; i < e.AddedItems.Count; i++) { var item = e.AddedItems[i]; (item as MusicInfo).IsSelected = true; } for (int i = 0; i < e.RemovedItems.Count; i++) { var item = e.RemovedItems[i]; (item as MusicInfo).IsSelected = false; } } #endregion protected override void OnDetachingFrom(SfListView bindable) { listView.SelectionChanged -= ListView_SelectionChanged; listView = null; base.OnDetachingFrom(bindable); } } XAML Bind the ItemTemplate Background using the Converter value, where the background color of the ItemTemplate will change based on the selected items. <ContentPage> <ContentPage.BindingContext> <local:SelectionViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Resources> <ResourceDictionary> <local:SelectionBoolToImageConverter x:Key="BoolToImageConverter"/> <local:SelectionBoolToBackGroundColorConverter x:Key="BoolToColorConverter"/> </ResourceDictionary> </ContentPage.Resources> <Grid Margin="0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <listView:SfListView x:Name="listView" ItemsSource="{Binding MusicInfo}" SelectionGesture="Tap" SelectionMode="Single" AutoFitMode="Height" ItemSpacing="5" ItemSize="70"> <listView:SfListView.Behaviors> <local:Behavior/> </listView:SfListView.Behaviors> <listView:SfListView.ItemTemplate> <DataTemplate x:Name="ItemTemplate" > <Grid x:Name="grid" RowSpacing="0" ColumnSpacing="0" BackgroundColor="{Binding Path=IsSelected, Converter={StaticResource BoolToColorConverter}}"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0" Grid.Row="0" ColumnSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Source="{Binding SongThumbnail}" HeightRequest="35" WidthRequest="35" VerticalOptions="Center" HorizontalOptions="Center"/> <Grid Grid.Column="1" RowSpacing="1" Padding="15,0,0,0" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding SongTitle}" FontSize="18" /> <Grid RowSpacing="0" ColumnSpacing="0" Padding="0,0,0,5" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="0.4*" /> </Grid.ColumnDefinitions> <Label TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding SongAuther}" FontSize="12" VerticalTextAlignment="Center" /> <Label TextColor="#474747" Margin="0,0,10,0" Grid.Column="1" LineBreakMode="NoWrap" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Text="{Binding SongSize}" FontSize="12" /> </Grid> </Grid> <Image Grid.Column="2" x:Name="selectionImage" Margin="10,0,10,0" HeightRequest="30" WidthRequest="30" VerticalOptions="Center" HorizontalOptions="Center" IsVisible="True" Source="{Binding Path=IsSelected, Converter={StaticResource BoolToImageConverter}}"/> </Grid> <StackLayout Grid.Row="1" HeightRequest="1"/> </Grid> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> </Grid> </ContentPage> Change the background color of the view based on the IsSelected property using the SelectionBoolToBackgroundColorConverter class. public class SelectionBoolToBackgroundColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (bool)value == true ? Color.FromRgb(211,211,211) : Color.White; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Output Download the complete sample on GitHub. Conclusion: I hope you enjoyed learning how to apply selected item background color in .NET MAUI ListView. Refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ListView documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI ListView and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI ListView (SfListView), you can add an item at a specific index in a specific group using the KeySelector property and the Key value of each group. Each group is identified by its Key, which holds the underlying data related to the group. When a new item is added at runtime, you need to determine which group the item belongs to by using PropertyInfoCollection, PropertyName, and KeySelector. After identifying the desired group’s GroupResult value, insert the item into a specified index. C# To add new data to the underlying collection in the ViewModel class, var contact = new Contact(); contact.ContactName = "Adam"; contact.ContactNumber = "783-457-567"; contact.ContactImage ="image"+r.Next(0, 28)+".png"; //Adding data into underlying collection ViewModel.ContactItems.Add(contact); To determine which group the newly added item belongs to using the KeySelector property and the Key value of the group, pass the underlying data to the parameter in the GetGroupResult method. internal void GetGroupResult(object ItemData) { var descriptor = listView.DataSource.GroupDescriptors[0]; object key; if (descriptor.KeySelector == null) { var propertyInfoCollection = new PropertyInfoCollection(ItemData.GetType()); key = propertyInfoCollection.GetValue(ItemData, descriptor.PropertyName); } else key = descriptor.KeySelector(ItemData); itemGroup = this.listView.DataSource.Groups.FirstOrDefault(x => x.Key == key); descriptor = null; key = null; } To add the data into a specific group at a specific index, internal void InsertItemInGroup(List<object> items, object Item, int InsertAt) { items.Remove(Item); items.Insert(InsertAt, Item); } Output Download the complete sample on GitHub.ConclusionI hope you enjoyed learning how to add an item at a specific index in a grouped .NET MAUI ListView (SfListView).You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView allows you to refresh items at runtime by updating the ItemsSource at specific time intervals using the PropertyChanged event. The following example illustrates how to change the ItemsSource using the PropertyChanged event by timer. C# public class Behavior : Behavior<ContentPage> { #region Fields private Syncfusion.Maui.ListView.SfListView listView; #endregion #region Overrides protected override void OnAttachedTo(ContentPage bindable) { InitializeTimer(); listView = bindable.FindByName<Syncfusion.Maui.ListView.SfListView>("listView"); listView.PropertyChanged += ListView_PropertyChanged; base.OnAttachedTo(bindable); } private void ListView_PropertyChanged(object sender, PropertyChangedEventArgs e) { if (e.PropertyName == "ItemsSource") InitializeTimer(); } private async void InitializeTimer() { await WaitAndExecute(2000, () => { var viewmodel = new ContactInfoRepository(); listView.ItemsSource = viewmodel.ContactInfo; }); } private async Task WaitAndExecute(int milisec, Action actionToExecute) { await Task.Delay(milisec); actionToExecute(); } protected override void OnDetachingFrom(ContentPage bindable) { listView = null; base.OnDetachingFrom(bindable); } #endregion } Download the complete sample on GitHubConclusionI hope you enjoyed learning how to refresh items at runtime using a timer in the .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) allows you to automatically bring the selected item into the view when it changes at runtime by using the ScrollToRowIndex method. C# In the SfListView.PropertyChanged event, obtain the SelectedItem index from the DisplayItems, adjust the index based on the header and group header, and pass it to the ScrollToRowIndex method. public class ListViewBehavior : Behavior<SfListView> { private SfListView ListView; protected override void OnAttachedTo(SfListView bindable) { ListView = bindable; ... ListView.PropertyChanged += ListView_PropertyChanged; base.OnAttachedTo(bindable); } private void ListView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) { if (e.PropertyName == "SelectedItem") { ListView.Dispatcher.Dispatch(async () => { await Task.Delay(100); if (this.ListView.DataSource.DisplayItems.Count > 0) { var selectedItemIndex = ListView.DataSource.DisplayItems.IndexOf(ListView.SelectedItem); selectedItemIndex += (ListView.HeaderTemplate != null && !ListView.IsStickyHeader && !ListView.IsStickyGroupHeader) ? 1 : 0; (ListView.ItemsLayout as LinearLayout).ScrollToRowIndex(selectedItemIndex); } }); } } } Output Download the complete sample on GitHub Conclusion I hope you enjoyed learning how to automatically scroll to bring the selected item into view in .NET MAUI ListView (SfListView). You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In the .NET MAUI ListView (SfListView), you can add a separator line to items with grouping enabled. To hide the separator line for the last item in a group, use a converter bound to the IsVisible property XAML Define the SfListView.ItemTemplate with a StackLayout having a HeightRequest as 1 to display the separator line. Utilize a converter to control the visibility of the separator for the last item in each group. <ContentPage x:Class="ListViewMaui.MainPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewMaui" xmlns:ListView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"> <ContentPage.Resources> <ResourceDictionary> <local:SeparatorVisibilityConverter x:Key="VisibilityConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <ListView:SfListView x:Name="listView" ItemSize="70" GroupHeaderSize="50" SelectionMode="Single" IsStickyGroupHeader="True" ItemsSource="{Binding ContactsInfo}" AllowGroupExpandCollapse="True"> <ListView:SfListView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0" Grid.Row="0"> ... </Grid> <StackLayout BackgroundColor="Red" HeightRequest="1" Grid.Row="1" IsVisible="{Binding .,Converter={StaticResource VisibilityConverter}, ConverterParameter={x:Reference Name=listView}}" /> </Grid> </DataTemplate> </ListView:SfListView.ItemTemplate> </ListView:SfListView> </ContentPage.Content> </ContentPage> C# Get the group details of the item from the DataSource.DisplayItems and get the group items from the GroupResult.Items property. Returns false for the last item of the group and true for other items. public class SeparatorVisibilityConverter : IValueConverter { SfListView ListView; public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { ListView = parameter as SfListView; if (value == null || ListView.DataSource.Groups.Count == 0) return false; var groupresult = GetGroup(value); var list = groupresult.Items.ToList<object>().ToList(); var item = list[list.Count - 1] as ListViewContactInfo; return item != value; } private GroupResult GetGroup(object itemData) { var item = itemData as ListViewContactInfo; return ListView.DataSource.DisplayItems.FirstOrDefault(x => (x is GroupResult group) && group.Key.ToString() == item.ContactName[0].ToString()) as GroupResult; } } Output Download the complete sample on GitHubConclusionI hope you enjoyed learning how to hide the line separator for the last item in groups within the .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) allows you to navigate to another page when an element in the ListViewItem is tapped. This can be achieved by adding a GestureRecognizer to that element in the ItemTemplate. XAML Add TapGestureRecognizer to the Image and bind the Command to navigate to a page when the image is tapped from the ViewModel.<ContentPage.Content> <Grid> <listView:SfListView x:Name="list" ItemSize="70" ItemsSource="{Binding contactsinfo}" ItemSpacing="0,0,5,0" SelectionMode="Single"> <listView:SfListView.ItemTemplate> <DataTemplate x:Name="ItemTemplate"> <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="1" Padding="10,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" FontSize="12"> </Label> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" FontSize="12"> </Label> </Grid> <Grid Grid.Row="0" x:Name="temp" Grid.Column="2" RowSpacing="0" HorizontalOptions="End" Padding="0,10,10,0"> <Image Source="navigate.png"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand, Source = {x:Reference list}}" CommandParameter="{Binding}" /> </Image.GestureRecognizers> </Image> </Grid> </Grid> <StackLayout Grid.Row="1" BackgroundColor="#E4E4E4" HeightRequest="1"/> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> </Grid> </ContentPage.Content> C# In the ViewModel, navigate to another page using the INavigation interface when the tap command is invoked. public class ContactsViewModel : INotifyPropertyChanged { #region Fields private Command<object> tapCommand; private INavigation navigation; #endregion #region Properties public ObservableCollection<Contacts> contactsinfo { get; set; } public Command<object> TapCommand { get { return tapCommand; } set { tapCommand = value; } } public INavigation Navigation { get { return navigation; } set { navigation = value; } } #endregion #region Constructor public ContactsViewModel(INavigation _navigation) { navigation = _navigation; tapCommand = new Command<object>(OnTapped); } private async void OnTapped(object obj) { var newPage = new Page1(); newPage.BindingContext = obj; await Navigation.PushAsync(newPage); } #endregion public event PropertyChangedEventHandler PropertyChanged; }Output Download the complete sample on GitHubConclusionI hope you enjoyed how to navigate to a page while tapping on a .NET MAUI ListView's item using MVVM (SfListView).You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Detect the scrolling direction in .NET MAUI ListView by using the Scrolled event of the ListViewScrollView.XAMLIn the SfListView.HeaderTemplate, bind the ViewModel property to show the scroll direction.<listView:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="120" IsStickyHeader="True"> <listView:SfListView.Behaviors> <local:Behavior/> </listView:SfListView.Behaviors> <listView:SfListView.HeaderTemplate> <DataTemplate> <StackLayout BackgroundColor="LightGray"> <Label Text="{Binding Path=BindingContext.ScrollDirection, Source={x:Reference listView}}" FontAttributes="Bold" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center"/> </StackLayout> </DataTemplate> </listView:SfListView.HeaderTemplate> </listView:SfListView> C# Get the ListViewScrollView by using the ListView.GetScrollView helper method and update the ScrollDirection value based on the previous offset. public class Behavior : Behavior<SfListView> { ListViewScrollView scrollview; double previousOffset; public SfListView listView; BooksViewModel viewModel; protected override void OnAttachedTo(SfListView bindable) { listView = bindable as SfListView; viewModel = new BooksViewModel(); listView.BindingContext = viewModel; scrollview = listView.GetScrollView(); scrollview.Scrolled += Scrollview_Scrolled; base.OnAttachedTo(bindable); } private void Scrollview_Scrolled(object sender, ScrolledEventArgs e) { if (e.ScrollY == 0) return; if (previousOffset >= e.ScrollY) { // Up direction viewModel.ScrollDirection = "Up Direction"; } else { //Down direction viewModel.ScrollDirection = "Down Direction"; } previousOffset = e.ScrollY; } }Output Download the complete sample on GitHubConclusion I hope you enjoyed learning how to detect the scrolling direction in .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations. Explore our documentation to understand how to create and manipulate data.For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) provides the capability to enhance item appearance using custom fonts. This guide outlines the steps to implement custom fonts in SfListView. STEP 1: Add the custom fonts in True Type Font (TTF) format within the Resources’ Fonts folder. STEP 2: Register these fonts in your application by invoking the ConfigureFonts method on the MauiAppBuilder object. Use the AddFont method to specify the font filename and an optional alias. public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("Lobster-Regular.ttf", "LobsterRegular"); fonts.AddFont("Satisfy-Regular.ttf", "SatisfyRegular"); }); builder.ConfigureSyncfusionListView(); return builder.Build(); } } STEP 3: Refer to the font name or alias using the FontFamily property within your XAML to apply the fonts. <listView:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="120"> <listView:SfListView.ItemTemplate> <DataTemplate> <StackLayout> <StackLayout Margin="10,0,0,0" VerticalOptions="StartAndExpand"> <Label Text="{Binding BookName}" FontFamily="Lobster-Regular" FontSize="20" VerticalOptions="CenterAndExpand"/> <Label Text="{Binding BookDescription}" FontFamily="Satisfy-Regular" FontSize="20" VerticalOptions="StartAndExpand"/> </StackLayout> <BoxView HeightRequest="1" BackgroundColor="LightGray"/> </StackLayout> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> Output Download the complete sample on GitHub.ConclusionI hope you enjoyed learning how to set a custom font for items loaded in .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can add a separator between ListViewItems in .NET MAUI ListView (SfListView) by utilizing a BoxView to represent the separator line. XAML In the SfListView.ItemTemplate, a BoxView with HeightRequest set to 1 is added to show the separator line. Bind the converter to the IsVisible property to manage the visibility of the separator line of the last item. <ContentPage x:Class="ListViewMaui.MainPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewMaui" xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" BackgroundColor="White"> <ContentPage.Resources> <ResourceDictionary> <local:SeparatorVisibilityConverter x:Key="separatorVisibilityConverter"/> </ResourceDictionary> </ContentPage.Resources> <listView:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="120"> <listView:SfListView.ItemTemplate> <DataTemplate> <StackLayout> <StackLayout Margin="10,0,0,0" VerticalOptions="StartAndExpand"> <Label Text="{Binding BookName}" FontSize="20" FontAttributes="Bold" VerticalOptions="CenterAndExpand"/> <Label Text="{Binding BookDescription}" FontSize="15" VerticalOptions="StartAndExpand"/> </StackLayout> <BoxView HeightRequest="1" BackgroundColor="LightGray" IsVisible="{Binding .,Converter={StaticResource separatorVisibilityConverter}, ConverterParameter={x:Reference Name=listView}}"/> </StackLayout> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> </ContentPage> C# The following converter returns false for the last item that can be accessed from the DataSource.DisplayItems, and true for other items. public class SeparatorVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var listView = parameter as SfListView; if (value == null) return false; return listView.DataSource.DisplayItems[listView.DataSource.DisplayItems.Count - 1] != value; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Output Download the complete sample on GitHub.ConclusionI hope you enjoyed learning how to add a separator between items in .NET MAUI ListView (SfListView).You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) allows you to add or remove items by updating the collection bound to the SfListView.ItemsSource from the ViewModel. XAML ViewModel commands are bound to the view for adding or removing an item. <StackLayout> <Grid HeightRequest="50" ColumnSpacing="5" Padding="5"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Text="Add item" Grid.Column="0" Command="{Binding AddCommand}"/> <Button Text="Delete last item" Grid.Column="1" Command="{Binding DeleteCommand}"/> </Grid> <listView:SfListView x:Name="listView" ItemSize="70" ItemsSource="{Binding ContactsInfo}" VerticalOptions="FillAndExpand"> ... </listView:SfListView> </StackLayout> C# A new object has been added to the collection of ViewModel. public class ContactsViewModel { public Command AddCommand { get; set; } public ContactsViewModel() { AddCommand = new Command(OnAddTapped); } private void OnAddTapped(object obj) { var details = new Contacts() { ContactName = CustomerNames[r.Next(1, 50)], ContactNumber = r.Next(100, 400).ToString() + "-" + r.Next(500, 800).ToString() + "-" + r.Next(1000, 2000).ToString(), ContactImage = "people_circle" + r.Next(0, 19) + ".png" }; ContactsInfo.Add(details); } } C# Object has been removed from the collection of ViewModel. public class ContactsViewModel { public Command DeleteCommand { get; set; } public ContactsViewModel() { DeleteCommand = new Command(OnDeleteTapped); } private void OnDeleteTapped(object obj) { if (ContactsInfo.Count > 0) ContactsInfo.Remove(ContactsInfo[ContactsInfo.Count - 1]); else App.Current.MainPage.DisplayAlert("Alert", "There is no item in the list", "OK"); } } Download the complete sample on GitHubConclusionI hope you enjoyed learning how to add or remove an item from .NET MAUI ListView.You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.Please let us know in the comments section below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
