We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Working with ListView in Reactive MVVM?

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: September 20, 2018 |
Last Revised Date: September 5, 2019
Tags: mvvm

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.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile