How to use Nito.MVVM in Xamarin.Forms Listview (SfListView)

You can use Nito.MVVM in the Xamarin.Forms ListView. Refer to the steps below to work with Nito.MVVM,

STEP 1: Install the Nito.MVVM.Async Nuget package in the shared code project.

STEP 2: Define the AsyncCommand to populate the data in the ViewModel.

namespace ListViewXamarin
{
    public class ContactsViewModel : INotifyPropertyChanged
    {
        public IAsyncCommand LoadDataCommand { get; set; }
 
        public ContactsViewModel()
        {
            LoadDataCommand = new AsyncCommand(ExecuteLoadData);
        }
 
        private async Task ExecuteLoadData(object args)
        {
            ...
        }
    }
}

STEP 3:

• Populate asynchronous data for the ListView in the GenerateInfo method.
• In the command execution method, invoke the GenerateInfo method in the NotifyTask.Create method which executes the GetDataAsync action asynchronously.
• You can get the populated data from the NotifyTask.Result.
• The NotifyTask.TaskCompleted gets a task that completed successfully. if the task is completed , set the result to the collection. 
• Invoke the PropertyChanged event to notify the collection update.

• namespace ListViewXamarin
  {
      public class ContactsViewModel : INotifyPropertyChanged
      { 
          private dynamic userInfo;
          public dynamic UserInfo 
          {
              get { return userInfo; }
              set { userInfo = value; RaisedOnPropertyChanged(nameof(UserInfo)); }
          }
   
          public async Task ExecuteLoadData()
          {
              var notifyTask = NotifyTask.Create(GetDataAsync);
              IsLoading = true;
              await notifyTask.TaskCompleted;
              if (notifyTask.IsCompleted)
              {
                  UserInfo = notifyTask.Result as dynamic;
                  RaisedOnPropertyChanged(nameof(UserInfo));
              }
              IsLoading = false;
          }
   
          public async Task<dynamic> GetDataAsync()
          {
              try
              {
                  var response = await client.GetAsync("https://jsonplaceholder.typicode.com/users");
                  if (response.IsSuccessStatusCode)
                  {
                      await Task.Delay(1500);
                      var content = await response.Content.ReadAsStringAsync();
                      var details = JsonConvert.DeserializeObject<dynamic>(content); 
                     return details;
                  }
              }
              catch (Exception ex)
              {
                  Debug.WriteLine(@"ERROR {0}", ex.Message);
              }
              return null;
          }
      }
  }
  

STEP 4:

Bind the ViewModel collection to the SfListView.ItemsSource. The SfBusyIndicator is used to show the loading indicator when fetching data from the webservice.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Text="Load ListView" Command="{Binding LoadDataCommand}" HeightRequest="50"/>
    <sfbusyindicator:SfBusyIndicator Grid.Row="1" AnimationType="Gear" TextColor="BlueViolet" IsBusy="{Binding IsLoading}"/>
    <syncfusion:SfListView x:Name="listView" AutoFitMode="Height" Grid.Row="1" ItemSpacing="5" ItemsSource="{Binding UserInfo}" >
        <syncfusion:SfListView.ItemTemplate >
            <DataTemplate>
                <Frame HasShadow="True" BackgroundColor="#f4f4f4">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Text="{Binding [username]}" HorizontalOptions="Start" TextColor="Black" FontSize="16" />
                        <Label Grid.Row="1" Text="{Binding [website]}" HorizontalOptions="Start" TextColor="Black"/>
                        <Label Grid.Row="2" Text="{Binding [phone]}" HorizontalOptions="Start" TextColor="Black" FontSize="16" FontAttributes="Bold"/>
                        <Label Grid.Row="3" Text="{Binding [email]}" HorizontalOptions="Start" TextColor="Black" FontSize="16" FontAttributes="Bold"/>
                    </Grid>
                </Frame>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
</Grid>

View sample in GitHub

Conclusion

I hope you enjoyed learning about how to use Nito.MVVM programmatically in Xamarin.Forms ListView.

You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our 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 other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!