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 machine (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.

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

1. Since the last project we created in Windows, we have to setup the code on our Mac machine, for which you have to go to GitHub and copy the Cloning Url like below image.
   
   
   
   
2. Open Visual Studio For Mac–> click on Version Control Menu –> click on . 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 and loaded in Visual Studio for Mac the solution will appear like this.
   
   
   
   
4. Build the code and execute any of the iOS or Android projects, just to check if the application is working fine. I checked with Android and it was working like last time.
   
   
   
   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.

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". 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 I do) and click on "Next" again.
   
   
   
   
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".
   
   
   
   
8. Once the new project is created, we need to add Forms to 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" checkbox; then search and select Xamarin.Forms like in the below image.
   
   
   
   
9. Since we are extending our SkiaSharp example, we need to install the SkiaSharp NuGet Package too. For that, follow the same steps as we did previously, however this time, uncheck the "Show pre-release packages" checkbox, 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 "Projects" 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.
    
    
    
    
11. Since the UI of the application will be created using Xamarin.Forms, we don’t require the Storyboard created by default in the project template. To remove that, open plistfile –> Source Tab, remove NSMainStoryboardFile entry.
    
    
    
    
12. All the configuration changes are finished finally. Now, let's start with the code changes which are very few. Firstly, replace the Main method of CS file with the following code.
    

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

13. This code will initialize the AppDelegate for the app.
14. Update the code of CS with the following code.
    

    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);
            }
        }
    }

15. Here, we are inheriting the default Appdelegate from the new FormsApplicationDelegate, initializing a new window, and loading the Xamarin.Forms App in that window.
    
    
16. All the configuration and coding is done, and it is time to execute the code. Set the 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 might be missing, but it’s a great way for existing Xamarin.Forms developers to extend their apps for Macintosh systems and publish on Apple App Store.

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