Auto Binding of ViewModel to View BindingContext

[rjygraham]

Now that the ServiceCollectionExtensions methods for registering Views and ViewModels has been released, I've been thinking about how we can automatically bind the ViewModel to the View's BindingContext.

The solution for Views and ViewModels registered via one of the AddxxxxxxWithShellRoute() methods is fairly straightforward using the following RouteFactory implementation:

public class AutoBindingRouteFactory<TView, TViewModel> : RouteFactory
	where TView : NavigableElement
	where TViewModel : class, INotifyPropertyChanged
{
	public override Element GetOrCreate()
	{
		return Activator.CreateInstance<TView>();
	}

	public override Element GetOrCreate(IServiceProvider services)
	{
		if (services is not null)
		{
			var view = services.GetService<TView>();
			var viewModel = services.GetService<TViewModel>();

			view.BindingContext = viewModel;

			return view;
		}

		return Activator.CreateInstance<TView>();
	}
}

With this in place, we can modify the RegisterShellRoute method of ServiceCollectionExtensions from this:

private static void RegisterShellRoute<TView>(string route, RouteFactory? factory = null)
	where TView : NavigableElement
{
	if (factory == null)
	{
		Routing.RegisterRoute(route, typeof(TView));
	}
	else
	{
		Routing.RegisterRoute(route, factory);
	}
}

to this:

private static void RegisterShellRoute<TView, TViewModel>(string route, RouteFactory? factory = null)
	where TView : NavigableElement
	where TViewModel : class, INotifyPropertyChanged
{
	if (factory is null)
	{
		Routing.RegisterRoute(route, new AutoBindingRouteFactory<TView, TViewModel>());
	}
	else
	{
		Routing.RegisterRoute(route, factory);
	}
}

Unfortunately, I believe we'd need changes to .NET MAUI proper to handle this for implicitly registered Shell routes, applications using non-Shell routing, and other Views.

Implementing this for explicit Shell routing while not having a solution for the other scenarios would likely lead to a confusing developer experience; however, I wanted to at least get the conversation started in case someone in the community has ideas on how we can make this work.

From my perspective, auto-binding for implicit and explicit Shell routes is the minimum viable product.

[pictos]

@rjygraham I didn't read all your spec yet, but a friendly reminder that .NET MAUI exposes the internal members to us (;

[rjygraham]

Did not know that.... :)

[TheCodeTraveler]

Awesome idea to leverage RouteFactory! I'm excited to see how this proposal evolves 💯 🙌

[TheCodeTraveler]

Thanks Ryan!! This looks very promising!

Could you also add include some benchmarks? I'm curious how Routing.RegisterRoute(route, typeof(TView)); compares to Routing.RegisterRoute(route, factory); and Routing.RegisterRoute(route, new AutoBindingRouteFactory<TView, TViewModel>());

[TheCodeTraveler]

One note - To support Dependency Injection, we'll want to avoid Activator.CreateInstance() because that only works with default constructors.

How does .NET MAUI do this internally? Maybe we can leverage some of their existing services to ensure we don't break Dependency Injection for folks!

[rjygraham]

I basically ctrl+c, ctrl+v the TypeRouteFactory implementation and added the bits to set TView.BindingContext = TViewModel. I don't think GetHashCode and Equals needs to be overridden since the <TView, TViewModel> type parameters should be enough.

I did take some liberties in the GetOrCreate(IServiceProvider services) method assuming AutoBindingRouteFactory would only be used when the TView and TViewModel are registered using the new ServiceCollectionExtensions extension methods; however, if AutoBindingRouteFactory is public, it could be used even without using the new extension methods and should probably look more like:

public class AutoBindingRouteFactory<TView, TViewModel> : RouteFactory
	where TView : NavigableElement
	where TViewModel : class, INotifyPropertyChanged
{
	public override Element GetOrCreate()
	{
		return Activator.CreateInstance<TView>();
	}

	public override Element GetOrCreate(IServiceProvider services)
	{
		if (services is not null)
		{
			// TView would not necessarily need to be registered in container.
			var view = services.GetService<TView>() ?? Activator.CreateInstance<TView>();
			
			// GetService returns null if TViewModel is not registered.
			view.BindingContext = services.GetService<TViewModel>();

			return view;
		}

		return Activator.CreateInstance<TView>();
	}
}

[CliffAgius]

Closed as per the Community Stand-up discussion here: https://youtu.be/N9wMcBP4jtg?t=2889