Chapter 6 Creating Our Own Layout

Using Your Layout

Before you can jump in and start using the BoardLayout you have created, there is a little bit more work to be done. You need to

Adding a Factory That Will Create Instances

of Your Widgets

For this, you are going to create a new class called WidgetFactory in the root of your project.

using WidgetBoard.ViewModels; using WidgetBoard.Views;

namespace WidgetBoard;

public class WidgetFactory

{

}

There are three main purposes for this factory:

So, let’s support these three requirements.

187

Chapter 6 Creating Our Own Layout

Allowing for the Registration of Widget Views and View Models

You need to add the following code:

private static IDictionary<Type, Type> widgetRegistrations = new Dictionary<Type, Type>();

private static IDictionary<string, Type> widgetNameRegistrations = new Dictionary<string, Type>();

public static void RegisterWidget<TWidgetView, TWidgetViewModel>(string displayName) where TWidgetView : IWidgetView where TWidgetViewModel : IWidgetViewModel

{

widgetRegistrations.Add(typeof(TWidgetViewModel),

typeof(TWidgetView));

widgetNameRegistrations.Add(displayName,

typeof(TWidgetViewModel));

}

public IList<string> AvailableWidgets => widgetNameRegistrations.Keys.ToList();

The above may look a little complicated but if you break it down, hopefully it should become clear. You have added two fields that will store the type information and name information needed for when you create the instances of widgets.

The RegisterWidget method takes a display name parameter and two types:

•\ TWidgetView: This must implement your IWidgetView interface.

•\ TWidgetViewModel: This must implement your

IWidgetViewModel interface.

188

Chapter 6 Creating Our Own Layout

You then store a mapping between the view model type and the view type (widgetRegistrations). This allows you to create a view when you pass in a view model. This really helps you to keep a clean separation between your view and view model.

You also store a mapping between the display name and the view model type (widgetNameRegistrations). This will allow you to present an option on screen to the user. Once they choose the name of the widget they would like to add, the factory will create an instance of it.

Creation of a Widget View

You first need to add a dependency to your constructor.

private readonly IServiceProvider serviceProvider;

public WidgetFactory(IServiceProvider serviceProvider)

{

this.serviceProvider = serviceProvider;

}

The IServiceProvider will allow you to create a new instance of your widgets and make sure that they are provided with all of their dependencies. Don’t worry about needing to register the

IServiceProvider implementation with your MauiAppBuilder as you have done with other dependencies that you require. This is automatically provided by .NET MAUI.

Now let’s add the ability to create the widget view.

public IWidgetView CreateWidget(IWidgetViewModel widgetViewModel)

{

if (widgetRegistrations.TryGetValue(widgetViewModel. GetType(), out var widgetViewType))

{

189

Chapter 6 Creating Our Own Layout

var widgetView = (IWidgetView)serviceProvider.GetRequir edService(widgetViewType);

widgetView.WidgetViewModel = widgetViewModel;

return widgetView;

}

return null;

}

Breaking this down,

Creation of a Widget View Model

You also need to provide the ability to create the widget view model because this is required in your view model.

public IWidgetViewModel CreateWidgetViewModel(string displayname)

{

if (widgetNameRegistrations.TryGetValue(displayname, out var widgetViewModelType))

{

190