Articles in this section
Category / Section

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.

C#

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

 

To implement ReactiveUIList, ViewModel should implement ReactiveObject.

C#

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.

C#

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

 

Run the application.

Reactive listview

Download the sample from GitHub: ReactiveUISample

To know more about the ReactiveUI, please refer here.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied