How to bind data using FreshMVVM in .NET MAUI ListView (SfListView)?
The .NET MAUI ListView allows you to work with the FreshMVVM framework. Please follow the steps below to work with the FreshMVVM,
Step 1: Install the FreshMvvm.Maui NuGet package in the shared code project.
Step 2: Create your XAML page (view) with a name ending with “Page”.
namespace ListViewXamarin
{
public partial class ListViewPage : ContentPage
{
public ListViewPage()
{
InitializeComponent();
}
}
}
Step 3: Create a page model with the name ending with PageModel and inherit the FreshBasePageModel. If your Page name is MainPage, then the PageModel name should be MainPageModel and the namespace of the Page and the PageModel should be the same. In this PageModel, you can keep the ViewModel related properties.
using FreshMvvm.Maui;
namespace ListViewMaui
{
public class ListViewPageModel : FreshBasePageModel
{
#region Properties
public ObservableCollection<Contacts> Contactsinfo { get; set; }
#endregion
#region Constructor
public ListViewPageModel()
{
Contactsinfo = new ObservableCollection<Contacts>();
GenerateInfo();
}
public void GenerateInfo()
{
Random r = new Random();
for (int i = 0; i < 30; i++)
{
var contact = new Contacts(CustomerNames[i], r.Next(720, 799).ToString() + " - " + r.Next(3010, 3999).ToString());
contact.ContactImage = "people_circle" + (i % 19) + ".png";
Contactsinfo.Add(contact);
}
}
#endregion
}
}
Step 4: Create a model class that inherits FreshBasePageModel and uses the RaisePropertyChanged method of the base class to raise the property changed notifier.
using FreshMvvm.Maui;
namespace ListViewXamarin
{
public class Contacts : FreshBasePageModel
{
private string contactName;
public Contacts()
{
}
public string ContactName
{
get { return contactName; }
set
{
if (contactName != value)
{
contactName = value;
this.RaisePropertyChanged();
}
}
}
}
}
Step 5: Initialize the FreshMvvm with the Host Builder and Register the Dependencies in the MauiProgram.cs.
using FreshMvvm.Maui.Extensions;
using Syncfusion.Maui.Core.Hosting;
namespace ListViewMaui;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
builder.ConfigureSyncfusionCore();
builder.Services.AddTransient<ListViewPage>();
builder.Services.AddTransient<ListViewPageModel>();
MauiApp mauiApp = builder.Build();
mauiApp.UseFreshMvvm();
return mauiApp;
}
}
Step 6: Set the MainPage using the PageModel in your App.xaml.cs file.
public App()
{
InitializeComponent();
var page = FreshPageModelResolver.ResolvePageModel<ListViewPageModel>();
var basicNavContainer = new FreshNavigationContainer(page);
MainPage = basicNavContainer;
}
Step 7: Bind the ViewModel collection to the SfListView.ItemSource property.
<listView:SfListView x:Name="listView" ItemSize="70"
ItemsSource="{Binding Contactsinfo}" ItemSpacing="0,0,5,0" >
</listView:SfListView>
Take a moment to peruse the documentation to learn more about SfListView with code examples.
I hope you enjoyed learning about how to bind data using FreshMVVM in .Net Maui ListView (SfListView).
You can refer to our .NET MAUI ListView’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI ListView documentation to understand how to present and manipulate data.
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI ListView and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
