Working with ListView in Reactive MVVM?

1 min read

SfListView allows you to bind ItemTemplate to the reactive UI ViewModel which is a composable and cross-platform model-view-viewmodel framework for all .NET platforms. Here, collection of books is binding to ReactiveList.

xaml

<rxui:ReactiveContentPage xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
                          xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
                          xmlns:local="clr-namespace:Popup_Demo"
                          x:Class="Popup_Demo.MainPage" 
                          x:TypeArguments="local:ViewModel">
      <syncfusion:SfListView x:Name="listview">
        <syncfusion:SfListView.ItemTemplate>
             <DataTemplate>
                 <ViewCell>
                    <ViewCell.View>
                       <Grid>
                          <StackLayout Orientation="Vertical">
                               <StackLayout Orientation="Horizontal" Padding="20,10">
                                       <Label FontAttributes="Bold" Text="{Binding Title}" HorizontalOptions="FillAndExpand"/> 
                                       <Label Text="{Binding Author}" TextColor="Gray"/>
                                </StackLayout>
                           <StackLayout HeightRequest="3" BackgroundColor="DarkSlateGray"/>
                      </Grid>
                    </ViewCell.View>
                </ViewCell>
             </DataTemplate>
         </syncfusion:SfListView.ItemTemplate>
      </syncfusion:SfListView>
</rxui:ReactiveContentPage>

Here, ReactiveList is binding a list of article objects.

 
public class Book
{
        public string Title {get; set;}
        public string Author {get; set;}
}

To implement ReactiveUIList, ViewModel should implement ReactiveObject.

public class BookListViewModel: ReactiveObject
{
 
 private ReactiveList<Book> _books;
     
 public ReactiveList<Book> Books
 {
      get => _books;
      set => this.RaiseAndSetIfChanged(ref _books, value);
 }
        
 public BookListViewModel()
 {
      Books = new ReactiveList<Book> ();
      var random = new Random();
      for (int i = 0; i < Titles.Count(); i++)
        {
            var details = new Book()
            {
                Title = Titles[i],
                Author = Authors[i],
             };
          Books.Add(details);
        } 
 }
}

View can be connected in one-way dependent manner to the ViewModel through bindings. You can set the BindingContext for the Listview in MainPage.cs itself in code behind like below.

 
public partial class MainPage : ReactiveContentPage<ViewModel>
{
      public MainPage(ViewModel viewModel)
      {
            ViewModel = viewModel;
            InitializeComponent();
        }
 
}

Working with ListView in Reactive MVVM?

Access denied