Getting Started with Xamarin Forms for Mac Preview

Last month, David Ortinau of Xamarin.Forms team published this announcement on Xamarin Forum that they have released the preview version of Xamarin.Forms for Mac. I was thinking about giving it a try since I came to know about the source tree last year and even tried to setup the code on my local (even blogged about it under a different topic).

So today, I decided to extend my last week’s SkiaSharp example to Xamarin.Forms for Mac.

The same steps you can follow to extend any of your other Xamarin forms application in Mac (provided you have a Mac Machine ). So let’s get started:

We have followed the above steps because I wanted to extend my existing application to support for Xamarin.Forms for Mac. These are not needed when you create a new Xamarin.Forms application on your Mac itself.
Next steps which we are going to follow are the main steps used to extend any existing Xamarin.Forms application with Xamarin.Forms Mac support.

1. Since the last project we had created in Windows, we have to setup the code on our Mac machine, for which you have to go Github and copy the Cloning URL as shown in the below image:

   

2. Open Visual Studio For Mac –> click on Version Control Menu –> click on Checkout.. option, it will open the Connect To Repository window where you have to fill the URL (from previous step), set the location where you want to setup the application code and click on Checkout button to download the code and load it in Visual Studio for Mac:

   

3. Once the source code is downloaded on disk, loaded in Visual Studio for Mac, the solution will appear like this:

   

4. Build the code and execute any of the iOS or Android project just to check that the application is working fine. I checked with Android and it was working like last time.

   

5. Right click on the Solution and click on Add New Project from the pop-up menu. It will open Choose a template for your new project window. There select Mac–>App, General–> Coca App and click Next as shown in the below image:

   

6. Then, Configure your Mac App window will appear where you have to provide the App Name, Organisation Identifier, Dock Item (if you want to use different name like me) and click on Next again shown in below image:

   

7. Now the last screen of wizard will appear where you have to provide the Project Name and Location of the project. Click on Create after that, as highlighted in the below image:

   

8. Once new project is created, we need to add Xamarin.Forms Nuget Package. To do so, right click on the project and click on Add –> Add Nuget Packages… which will open Add Packages window. There, check the Show pre-release packages check box, then Search and select Xamarin Forms as shown in the below Image:

   

9. Since we are extending our SkiSharp example, we need to install the SkiaSharp Nuget Package too. For that, follow the same steps, however this time, uncheck the Show pre-release packages check box as shown in the below image:

   

10. Now since we have to use the UI code written in our common PCL library, add its reference. For that, right click on References folder of Project and click on Edit References option which will open Edit References Window. There, click on Projects Tab and select PCL project (SkiaSharpEx in our case) and click on ok as highlighted in the below image:

    

11. Since the UI of the application will be created using Xamarin.Forms, we don’t require the Storyboard created by default in project template. To remove that, open info.plist file –> Source Tab remove NSMainStoryboardFile entry:

    

12. All the configuration changes finished finally now let's start with the code changes which are very few. Firstly, change the Main method of Main.cs file with the following code:
    C#

    static void Main(string[] args)
    {
        NSApplication.Init();
        NSApplication.SharedApplication.Delegate = new AppDelegate();
        NSApplication.Main(args);
    }

    This code will initialise the AppDelegate for the app.

13. Update the code of AppDelegate.cs with the following code:
    C#

    using AppKit;
    using Foundation;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.MacOS;
    
    namespace SkiaSharpEx.Mac
    {
        [Register("AppDelegate")]
        public class AppDelegate : FormsApplicationDelegate
        {
            NSWindow _window;
    		public AppDelegate()
    		{
    			var style = NSWindowStyle.Closable | 
    			NSWindowStyle.Resizable | NSWindowStyle.Titled;
    
    			var rect = new CoreGraphics.CGRect(200, 1000, 1024, 768);
    			_window = new NSWindow(rect, style, NSBackingStore.Buffered, false);
    			_window.Title = "Xamarin.Forms on Mac!";
    			_window.TitleVisibility = NSWindowTitleVisibility.Hidden;
    		}
    
    		public override NSWindow MainWindow
    		{
    			get { return _window; }
    		}
    
    		public override void DidFinishLaunching(NSNotification notification)
    		{
    			Forms.Init();
    			LoadApplication(new App());
    			base.DidFinishLaunching(notification);
    		}
        }
    }

    Here, we are inheriting the default Appdelegate from the new FormsApplicationDelegate. Initializing a new Window and loading the Xamarin.Forms App in that Window.

14. All the configuration and coding done time to execute the code, set the SkiaSharp.Mac project as Startup project and execute it. You will get the following output:

    

    This is expected as we had created the image with fixed values, which changes on platform. You can play around with the updated code of Github to correct the image.

As Xamarin.Forms for Mac is in Preview, there may be some issues in the Apps or some features missing, but it’s a great way for existing Xamarin.Forms developers to extend their apps for Mac Desktops and publish on Mac AppStore.

Let me know if I have missed anything or need any other example.

Happy coding!