Using Xamarin.Forms Inside Visual Studio Mac Extensions

Introduction

Ever since I commercialised MFractor in June 2017, I've been pulled to the idea of using XAML and Xamarin.Forms to build user interfaces for Visual Studio Mac extensions.

For MFractor, developing tools like the Image Wizard or Localisation Wizard cost days to weeks of engineering effort. As a bootstrapped business, this time-cost makes it prohibitively expensive to develop tools that are UI-centric.

Therefore, there are compelling reasons to use Xamarin.Forms to build Visual Studio Mac extensions:

XAML is much, much easier to work with than XWT, Visual Studio Macs UI framework. This dramatically lowers the barrier to entry for developing Visual Studio Mac extensions.

We can use data-binding to save a lot of "glue" code and can also make use of value converters, triggers and behaviours.

Using Xamarin.Forms Inside Visual Studio Mac

Let's get started!

First things first, youmusthave version 1.4.2 of the Addin Maker installed into Visual Studio Mac. Based on my many, many failed attempts at getting this to work, AddinMaker v1.4.2 is the one that works.

Next, you'll need to create a new Visual Studio Mac extension that is an SDK style project and references the NuGet MonoDevelop.Addins v0.4.4. I've found that the Xamarin.Forms bootstrapping process does not work in Visual Studio Mac extensions that are not SDK style projects.

If you have an existing extension, you'll need to upgrade your main extensions project to an SDK style project and reference NuGet MonoDevelop.Addins v0.4.4. The best way to do this is to create a new extension project within the existing solution and then copy paste all the code files from the old project into the new project.

After you've set up your project, it's time to set up Xamarin.Forms inside our extension.

Firstly, we need to add theXamarin.Forms.Platform.GTKnuget into our project. At the time of writing, this is only available within the Xamarin.Forms nightly builds. You can find instructions to add the nightly builds feedhere.

To display the user interface for the Image Asset Browser, we usenative embeddingto convert our Xamarin.Forms UI into a conrol that can be used inside a GTK window. As we working with GTK, we call the extension method.CreateContainer()to convert aXamarin.Forms.Pageinto aGtk.Containerclass that can be inserted into aGtk.Window.

Voila! Now we have a working image browser that's driven usingXamarin.Forms!

Summary

Creating our user interfaces in Xamarin.Forms for our Visual Studio Mac extension has huge benefits. It's much easier to build UIs with XAML, we get to use lovely MVVM architecture and Xamarin.Forms are much better documented than Xwt.

Unfortunately, this methodology is not without its issues. As more extension developers start using this technology, many extension developers will need to bundle and load their own Xamarin.Forms binaries, resulting in assembly loading race conditions and versioning mismatches. This causes big problems issues in Visual Studio for Mac, often causing instability in the core product.

In the future, we will need an official Visual Studio Mac Xamarin.Forms extension to prevent multiple calls to Forms.Init() and potential assembly version conflicts.