I am trying to get my head around with ReactiveUI
. I created a new project with the following main packages:
- Xamarin.Forms 4.1.0.618606
- PropertyChanged.Fody 3.0.1
- ReactiveUI 9.19.5
- ReactiveUI.XamForms 9.19.5
The project have a page
with associated viewmodel
. I want to Bind View with the ViewModel using ReactiveUI
. But the binding does not work. The project build and run but does not fire any property changed notification
neither any command
. The app needs to display a list
of company names
. But the list does not display the collection defined in ViewModel
. The app should allows the user the sort the list with CollectionChangeCommand
with every change in search query
.
The View Code :
<rxui:ReactiveContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
xmlns:local="clr-namespace:Demo"
x:TypeArguments="local:MainViewModel"
x:Class="Demo.MainPage">
<Shell.TitleView>
<SearchBar x:Name="SearchHandler"
Placeholder="SelectCompany" />
</Shell.TitleView>
<StackLayout>
<ListView x:Name="CompaniesListView"
ItemsSource="{Binding Companies}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout Orientation="Horizontal"
Margin="10">
<Label x:Name="NameLabel"
Text="{Binding Name}" />
</StackLayout>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="BlueViolet" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="ClickMe"
x:Name="OnlyButton" />
</StackLayout>
</rxui:ReactiveContentPage>
The code behind:
public partial class MainPage : ReactiveContentPage<MainViewModel>
{
MainViewModel vm;
public MainPage()
{
InitializeComponent();
this.Bind(ViewModel, vm => vm.Query, v => v.SearchHandler.Text);
this.BindCommand(ViewModel, vm => vm.ButtonClickedCommand, v => v.OnlyButton);
}
}
The ViewModel Code:
[AddINotifyPropertyChangedInterface]
public class MainViewModel : ReactiveObject
{
public ObservableCollection<Company> Companies { get; private set; }
public ReactiveCommand<Unit, Unit> ButtonClickedCommand { get; set; }
public ReactiveCommand<Unit, Unit> CollectionChange { get; set; }
public string Query { get; set; }
public MainViewModel()
{
Companies = new ObservableCollection<Company>
{
new Company{Name="EPF CORPORATION"},
new Company{Name="ABC COMPANY PVT. LTD."},
new Company{Name="UNIQUE COMPUTER SYSTEMS"},
new Company{Name="MICROSOFT PRIVATE LIMITED"},
};
this.WhenAny(x => x.Query, x => !string.IsNullOrWhiteSpace(x.Value));
CollectionChange = ReactiveCommand.CreateFromTask(async () => await SortCollection());
ButtonClickedCommand = ReactiveCommand.CreateFromTask(async () => await ButtonClicked());
async Task SortCollection()
{
ObservableCollection<Company> temp;
temp = new ObservableCollection<Company>(Companies.OrderByDescending(m => m.Name.ToLower().StartsWith(Query.ToLower(), StringComparison.CurrentCulture)));
Companies.Clear();
foreach (Company c in temp)
Companies.Add(c);
}
async Task ButtonClicked()
{
await Shell.Current.DisplayAlert("Button Clicked", "The reactive button command fired finally", "OK");
}
}
I just want to use ReactiveObject
andReactiveCommand
. I will stick with Xamarin.Forms Shell till ReactiveShell
is not available.
I will be grateful to anyone who can can show me how to use ReactiveUI correctly with xamarin.forms.
Sort(SortExpressionComparer<Company>.Ascending(t => t.Name))
– Glenn Watson Jul 27 at 14:49