How to display new modal form in ReactiveUI 6.5

Question

I am one of a team of developers currently maintaining a large suite of applications written using the WinForms UI.

In order to improve testability of our applications, we are wanting to move to an MVVM style, to separate the UI from the business logic. However, we need to keep using the WinForms UI, to minimize impact on our users as they work with different applications in the suite.

In trialing ReactiveUI, I have got a handle on how to bind form controls and commands to my view model, but cannot find documentation or examples on how to pop up a modal form to ask for or display additional information. For example these documentation pages on routing mention every supported UI framework except WinForms: http://docs.reactiveui.net/en/user-guide/routing/index.html, https://github.com/reactiveui/ReactiveUI/blob/docs/docs/basics/routing.md

Unfortunately, the ReactiveUI "good examples page" does not appear to have any WinForms-based examples, and all the other ReactiveUI / WinForms examples I can find using Google are only a single form.

I definitely want to keep forms/views out of the view model to maintain testability.

I believe the right way is to have a ReactiveCommand that is triggered by some user action in the view (such as clicking a button, selecting a menu item), but:

• What should the command do?

• Should it use Routing even though WinForms is not mentioned in the documentation? If yes, how is Routing done in a WinForms application?

• How would the command/routing request the new form gets shown modally?

Answer 1

For simple messages and yes/no answers, I would look at Wayne Maurer's example for using UserError. I've used his example in Winform projects.

For something more complex, I was having the same difficulties finding any Winforms examples for routing. My google searches finally landed me in the source code for ReactiveUI.Winforms, where I discovered that Paul already has a UserControl for Winforms that will host routed UserControl views. It's called RoutedControlHost.

Using that code, I hacked something together that will show modal forms. I'm sure this isn't the best way to do it, but it might give you ideas.

RoutedModalHost

using Microsoft.Win32.SafeHandles;
using ReactiveUI;
using System;
using System.ComponentModel;
using System.Reactive.Disposables;
using System.Reactive.Linq;
using System.Runtime.InteropServices;
using System.Windows.Forms;

namespace ReactiveUI_Test_Routing
{
    public class RoutedModalHost : ReactiveObject, IDisposable
    {
        readonly CompositeDisposable disposables = new CompositeDisposable();

    RoutingState _Router;
    IObservable<string> viewContractObservable;        

    public RoutedModalHost()
    {

        this.ViewContractObservable = Observable.Return(default(string));

        var vmAndContract =
            this.WhenAnyObservable(x => x.Router.CurrentViewModel)
                .CombineLatest(this.WhenAnyObservable(x => x.ViewContractObservable),
                    (vm, contract) => new { ViewModel = vm, Contract = contract });

        Form viewLastAdded = null;
        this.disposables.Add(vmAndContract.Subscribe(x => {

            if (viewLastAdded != null)
            {
                viewLastAdded.Dispose();
            }

            if (x.ViewModel == null)
            {                    
                return;
            }

            IViewLocator viewLocator = this.ViewLocator ?? ReactiveUI.ViewLocator.Current;
            IViewFor view = viewLocator.ResolveView(x.ViewModel, x.Contract);
            view.ViewModel = x.ViewModel;

            viewLastAdded = (Form)view;
            viewLastAdded.ShowDialog();
        }, RxApp.DefaultExceptionHandler.OnNext));
    }

    [Category("ReactiveUI")]
    [Description("The router.")]
    public RoutingState Router
    {
        get { return this._Router; }
        set { this.RaiseAndSetIfChanged(ref this._Router, value); }
    }

    [Browsable(false)]
    public IObservable<string> ViewContractObservable
    {
        get { return this.viewContractObservable; }
        set { this.RaiseAndSetIfChanged(ref this.viewContractObservable, value); }
    }

    [Browsable(false)]
    public IViewLocator ViewLocator { get; set; }

    bool disposed = false;
    SafeHandle handle = new SafeFileHandle(IntPtr.Zero, true);

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }

    protected virtual void Dispose(bool disposing)
    {
        if (disposed)
            return;

        if (disposing)
        {
            handle.Dispose();
            // Free any other managed objects here.
            //
            this.disposables.Dispose();
        }

        // Free any unmanaged objects here.
        //
        disposed = true;
    }

}
}

MainViewModel

using ReactiveUI;
using System.Reactive.Linq;
using System;    

namespace ReactiveUI_Test_Routing
{
public class MainViewModel : ReactiveObject, IScreen
{
    public RoutingState Router { get; private set; }
    public ReactiveCommand<object> ShowTestModalForm { get; protected set; }

    public MainViewModel(RoutingState modalRouter)
    {
        Router = modalRouter;

        ShowTestModalForm = ReactiveCommand.Create();
        ShowTestModalForm.Subscribe(x => Router.Navigate.Execute(new TestModalFormViewModel(this)));
    }

}
}

MainView

using System.Windows.Forms;
using Splat;
using ReactiveUI;

namespace ReactiveUI_Test_Routing
{
    public partial class MainView : Form, IViewFor<MainViewModel>
    {
        public MainView()
        {
            InitializeComponent();

        IMutableDependencyResolver dependencyResolver = Locator.CurrentMutable;

        dependencyResolver.Register(() => new TestModalFormView(), typeof(IViewFor<TestModalFormViewModel>));

        RoutingState router = new RoutingState();            

        RoutedModalHost modalHost = new RoutedModalHost();
        modalHost.Router = router;

        this.BindCommand(ViewModel, vm => vm.ShowTestModalForm, v => v.ShowTestModalForm);

        ViewModel = new MainViewModel(router);

    }

    public MainViewModel ViewModel { get; set; }

    object IViewFor.ViewModel
    {
        get { return ViewModel; }
        set { ViewModel = (MainViewModel)value; }            
    }
}
}

TestModalFormViewModel

using ReactiveUI;

namespace ReactiveUI_Test_Routing
{
    public class TestModalFormViewModel : ReactiveObject, IRoutableViewModel
    {
        public IScreen HostScreen { get; protected set; }

    public string UrlPathSegment { get { return "ModalForm"; } }

    public TestModalFormViewModel(IScreen screen)
    {
        HostScreen = screen;
    }
}
}