Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

What is wrong with my ReactiveUI routing set up?

DFangsaurDFangsaur Member ✭✭
edited November 2019 in Xamarin.Forms

I have been trying to follow the routing tutorial here
https://jamilgeor.com/viewmodel-routing-with-reactiveui-and-xamarin-forms/

Instead of clicking on an item in order to visit a new page, the behaviour of my app is when clicking on a button then navigation would happen. However this does not work at all. Here is the github link:
https://github.com/danielftz/Nav_test
Please take a look at the project and let me know what is wrong. Thanks!

Best Answer

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    The demo cannot be deployed becauseof some errors. I tested the sample from the link and it works well. Step by step guide on how to build Reactive in Xamarin.Forms, check the Tutorial.

    LoginCommand = ReactiveCommand.CreateFromTask(async () =>
    {
    
        var lg = await login.Login(_userName, _password);
        if (lg)
        {
            HostScreen.Router
                        .Navigate
                        .Execute(new ItemsViewModel())
                        .Subscribe();
        }
    }, this.WhenAnyValue(...));
    

  • DFangsaurDFangsaur Member ✭✭

    @Jarvan said:
    The demo cannot be deployed becauseof some errors. I tested the sample from the link and it works well. Step by step guide on how to build Reactive in Xamarin.Forms, check the Tutorial.

    LoginCommand = ReactiveCommand.CreateFromTask(async () =>
    {
    
        var lg = await login.Login(_userName, _password);
        if (lg)
        {
            HostScreen.Router
                        .Navigate
                        .Execute(new ItemsViewModel())
                        .Subscribe();
        }
    }, this.WhenAnyValue(...));
    

    Thank you! very userful resource I will take a look.

  • DFangsaurDFangsaur Member ✭✭
    edited November 2019

    @JamilGeor said:
    Hi, I've issued a pull request in your example repository that resolves the issue.

    Let me know if you have any questions. There was an issue with the way that you had setup your bindings, and the reactive command.

    These are the two key changes that I made to get it working:

    1. Setup the bindings in your code behind:
           this.BindCommand(ViewModel, vm => vm.NextPage, v => v.Next).DisposeWith(_bindingsDisposable);
    
    1. Setup your command as command that returns an observable:
            public ReactiveCommand<Unit, Unit> NextPage { get; private set; }
    
            public MainPageViewModel(IScreen hostScreen) {
                HostScreen = hostScreen;
                this.NextPage = ReactiveCommand.CreateFromObservable<Unit, Unit>(
                    _ => {
                        HostScreen.Router.Navigate.Execute(new DummyPageViewModel(hostScreen)).Subscribe();
                        return Observable.Return(Unit.Default);
                    }
                );
                
            }
    

    Thank you, it worked. Can you help me understand why

    RxApp.SuspensionHost
    is used and

    ReactiveCommand<Unit, Unit> NextPage { get; private set; }
    is used instead of ICommand?

  • JamilGeorJamilGeor NZBeta, University ✭✭

    ICommand would of worked fine, sorry I just did this out of habit :smile: In fact on reviewing your original code again, I think the main issue was that you hadn't set the BindingContext on your code behind file. I've issued you another pull request so you can see a simpler fix for the issue.

    RxApp.SuspensionHost manages the application state throughout the application's lifetime i.e. when it is suspended etc. This change wasn't actually needed to get app working, I just put it in as was something that I noticed while reviewing project. Your existing code worked fine without this, but would recommend using my code.

  • blocker1blocker1 Member ✭✭

    Thanks all for your responses. It's really helpful. You may also refer router login guide to get some more information on this.

Sign In or Register to comment.