CODEWITHSUNDEEP
xamlxamarin.iosxamarinxamarin.androidreactiveui
Damien Sawyer
Damien Sawyer

Reputation: 5907

"Hello World" with ReactiveUI, Xamarin Forms and XAML locking up

I'm trying to do a hello world with Reactive UI and Xamarin Forms.

I have created a ViewModel (based on ReactiveObject), a custom page (based on ReactiveContentPage) and some XAML markup.

The page has an entry and a Label, bound together. When I run it (on iOS and Android), it appears to work for the first few characters typed, then locks up. The console gives a 'too much is happening on the main thread' warning.

What am I missing?

The project is here.

The Model

namespace XamarinFormsReactiveUIExample
{
    public class MyPageModel : ReactiveObject
    {
        private string _userName = "";
        public string UserName {
            get { return _userName; }
            set { this.RaiseAndSetIfChanged (ref _userName, value); }
        }
    }
}

The Page

namespace XamarinFormsReactiveUIExample
{
    public partial class MyPage : ReactiveContentPage<MyPageModel>
    {
        public MyPage ()
        {
            InitializeComponent ();
        }
    }
}

The XAML

<?xml version="1.0" encoding="UTF-8"?>
<reactive:ReactiveContentPage 
x:TypeArguments="local:MyPageModel"
xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
x:Class="XamarinFormsReactiveUIExample.MyPage"
xmlns:local="clr-namespace:XamarinFormsReactiveUIExample;assembly=XamarinFormsReactiveUIExample"
xmlns:reactive="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms">
    <reactive:ReactiveContentPage.BindingContext>
      <local:MyPageModel />
    </reactive:ReactiveContentPage.BindingContext>

     <reactive:ReactiveContentPage.Padding>
     <OnPlatform x:TypeArguments="Thickness"
                iOS="0, 150, 0, 0" />
     </reactive:ReactiveContentPage.Padding>

    <reactive:ReactiveContentPage.Content>
        <StackLayout>
            <Entry Text = "{Binding UserName}"></Entry>
            <Label Text = "{Binding UserName}"></Label>
        </StackLayout>
    </reactive:ReactiveContentPage.Content>
</reactive:ReactiveContentPage>

Upvotes: 3

Views: 1777

Answers (2)

Christopher Richmond
Christopher Richmond

Reputation: 656

The only thing I saw missing was the ViewModel was never instantiated, and the Binding Context was never set. I can't see what your old code did before you changed it to the new style. Personally, I try to avoid using code behind as much as possible as well. So you should be able to modify your constructor to something like, 

public MyPage ()
{
    InitializeComponent();
    this.ViewModel = new MyPageModel();
    this.BindingContext = ViewModel;
}

And revert to using your XAML binding.

Upvotes: 0

Ana Betts
Ana Betts

Reputation: 74654

I don't see how this could be anything but a Xamarin bug, ReactiveUI isn't doing anything here. Anyways, you can always try to write these bindings the RxUI way:

<Entry x:Name="userNameEntry" />
<Label x:Name="userNameLabel" />

Then, in the constructor:

public MyPage ()
{
    InitializeComponent();
    this.ViewModel = new MyPageModel();

    this.Bind(ViewModel, vm => vm.UserName, v => v.userNameEntry.Text);
    this.OneWayBind(ViewModel, vm => vm.UserName, v => v.userNameLabel.Text);
}

Upvotes: 6

Related Questions