{"id":31096,"date":"2017-04-19T13:13:16","date_gmt":"2017-04-19T20:13:16","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=31096"},"modified":"2017-04-19T13:13:16","modified_gmt":"2017-04-19T20:13:16","slug":"preview-bringing-macos-to-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/preview-bringing-macos-to-xamarin-forms\/","title":{"rendered":"Preview: Bringing macOS to Xamarin.Forms"},"content":{"rendered":"<p>\t\t\t\t<img decoding=\"async\" class=\"aligncenter size-full wp-image-31099\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Preview.png\" alt=\"Preview\" width=\"517\" height=\"152\" \/><\/p>\n<p>It\u2019s amazing to think that you can now have a running native macOS application with just a few tweaks to a Xamarin.Forms solution. And I have to say \u201capplication\u201d because that\u2019s desktop, right?<\/p>\n<p>As I featured in last week\u2019s <a href=\"https:\/\/blog.xamarin.com\/make-xamarin-forms-apps-even-better-faster\/\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Forms 2.3.5 pre-release announcement<\/a>, macOS support in Xamarin.Forms is now in Preview. Let\u2019s run through adding this new project to an existing Xamarin.Forms solution, the hurdles you may face, and the current and future state of the platform features.<\/p>\n<h2>Configuring a macOS Project<\/h2>\n<p>Developing for macOS is a Mac only feature, so the same rules apply as when you are doing a Xamarin.Mac application. There is an excellent <a href=\"https:\/\/developer.xamarin.com\/guides\/mac\/getting_started\/hello,_mac\/\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Mac guide here<\/a> that covers the prerequisites.<\/p>\n<p>When the time comes for you to integrate your Xamarin.Forms macOS project into a continuous integration system, rest easy that you can build for macOS on Windows just as you can now for iOS.<\/p>\n<h3>Add a Cocoa App Project<\/h3>\n<p>Until Xamarin.Forms templates adds a Cocoa App, we can easily add it ourselves. To do that in Xamarin.Studio or Visual Studio for Mac, add a new project to the solution and choose Mac &gt; App &gt; Cocoa App.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-31101\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/add-macos-proj.gif\" alt=\"Adding macOS Project\" width=\"864\" height=\"540\" \/><\/p>\n<h3>Configure the Project<\/h3>\n<p>The Cocoa App template is configured with a storyboard implementation, which you won\u2019t need. You may leave it there, but you&#8217;ll end up with two windows when your application runs.<\/p>\n<p>Here\u2019s the quick list of what you need to do:<\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.Forms\/2.3.5.233-pre1\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Forms 2.3.5.233-pre1<\/a> pre-release NuGet<\/li>\n<li>In your macOS project, add a reference to your Xamarin.Forms project (shared or PCL)<\/li>\n<li>Import any assets such as images or fonts<\/li>\n<li>Edit info.plist and remove the source entry (NSMainStoryboardFile)\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-31102\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Screenshot-2017-04-19-10.47.49.png\" alt=\"info.plist\" width=\"1824\" height=\"1404\" \/><\/li>\n<li>Update Main.cs to initialize the AppDelegate\n<pre class=\"lang:c# decode:true \">static class MainClass\n{\n\tstatic void Main(string[] args)\n\t{\n\t\tNSApplication.Init();\n\t\tNSApplication.SharedApplication.Delegate = new AppDelegate();\n\t\tNSApplication.Main(args);\n\t}\n}<\/pre>\n<\/li>\n<li>Update AppDelegate to initialize Xamarin.Forms, create a window, and load the Forms App\n<ul>\n<li>If you have other dependencies that need to be initialized, do that here as well.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"lang:c# decode:true\">using Xamarin.Forms;\nusing Xamarin.Forms.Platform.MacOS;\n...\n[Register(\"AppDelegate\")]\npublic class AppDelegate : FormsApplicationDelegate\n{\n\tNSWindow _window;\n\tpublic AppDelegate()\n\t{\n\t\tvar style = NSWindowStyle.Closable | NSWindowStyle.Resizable | NSWindowStyle.Titled;\n\n\t\tvar rect = new CoreGraphics.CGRect(200, 1000, 1024, 768);\n\t\t_window = new NSWindow(rect, style, NSBackingStore.Buffered, false);\n\t\t_window.Title = \"Xamarin.Forms on Mac!\";\n\t\t_window.TitleVisibility = NSWindowTitleVisibility.Hidden;\n\t}\n\n\tpublic override NSWindow MainWindow\n\t{\n\t\tget { return _window; }\n\t}\n\n\tpublic override void DidFinishLaunching(NSNotification notification)\n\t{\n\t\tForms.Init();\n\t\tLoadApplication(new App());\n\t\tbase.DidFinishLaunching(notification);\n\t}\n}<\/pre>\n<h3>Run it!<\/h3>\n<p>With the macOS project as the startup, run it. Voila! You now have a native macOS application!<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-31104\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/xf-macos.gif\" alt=\"Example of Sample Weather App\" width=\"1002\" height=\"740\" \/><\/p>\n<h2>What\u2019s Next?<\/h2>\n<p>Now that you have an app, it\u2019s time to put on your UX Designer hat and start exploring the changes you need to feel more at home in this new desktop environment.<\/p>\n<h3>Styling<\/h3>\n<p>Take a run at styling your Xamarin.Forms UI for macOS. The same styling used on mobile may not look right. This is easily updated!<\/p>\n<p>With recent changes made to <code>OnPlatform<\/code> you can now target any number of platforms. That includes <code>macOS<\/code>.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;Button.TextColor&gt;\n\t&lt;OnPlatform x:TypeArguments=\"Color\"&gt;\n\t\t&lt;On Platform=\"iOS\" Value=\"White\"\/&gt;\n\t\t&lt;On Platform=\"macOS\" Value=\"White\"\/&gt;\n\t\t&lt;On Platform=\"Android\" Value=\"Black\"\/&gt;\n\t&lt;\/OnPlatform&gt;\n&lt;\/Button.TextColor&gt;<\/pre>\n<p>Note you may also double up on platforms like <code>&lt;On Platform=\"iOS, macOS\" ...&gt;<\/code>.<\/p>\n<h3>Window Size and Position<\/h3>\n<p>Is the launch window too big? Too small? Launching in an odd position on screen? You can adjust all of this in the <code>AppDelegate<\/code> on this line:<\/p>\n<p><code>var rect = new CoreGraphics.CGRect(200, 1000, 1024, 768); <\/code><\/p>\n<h2>Known Issues<\/h2>\n<p>This is a Preview, so you should expect that not everything is production ready. Below are a few things you may encounter as you add macOS to your projects.<\/p>\n<h3>Not All NuGets are Ready for macOS<\/h3>\n<p>In order to work in a macOS project, packages must target <code>xamarinmac20<\/code>. You may find that some of your beloved libraries do not yet support macOS. What can you do? Kindly send a request to the project&#8217;s maintainer to add it. Until they have support, you may need to look for alternatives.<\/p>\n<h3>Xamarin.Forms Features<\/h3>\n<p>This preview has amazing coverage of Xamarin.Forms UI and features, but there are some known gaps to be aware of.<\/p>\n<p><strong>Not Yet Implemented:<\/strong><\/p>\n<ul>\n<li>OpenGlRenderer<\/li>\n<li>ListView &#8211; ScrollTo, UnevenRows support, refreshing, SeparatorColor, SeparatorVisibility, Footer<\/li>\n<li>ViewCell &#8211; IsEnabled, ForceUpdateSize<\/li>\n<li>Image &#8211; Aspect<\/li>\n<li>Picker &#8211; Bindable \/ Observable implementation<\/li>\n<li>MasterDetailPage &#8211; BackgroundColor<\/li>\n<li>TabbedPage &#8211; BarBackgroundColor, BarTextColor<\/li>\n<li>TableView &#8211; UnevenRows<\/li>\n<li>WebView &#8211; Most WebNavigationEvents<\/li>\n<li>Navigation &#8211; InsertPageBefore<\/li>\n<\/ul>\n<h2>Send Your Feedback!<\/h2>\n<p>Add a macOS project and the <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.Forms\/2.3.5.233-pre1\" target=\"_blank\" rel=\"noopener noreferrer\">Xamarin.Forms 2.3.5.233-pre1<\/a> pre-release to your solutions today and let us know what you think. What do you feel is missing? What problems do you encounter?<\/p>\n<p>For a quick start, you can grab the WeatherApp I updated on GitHub: <a href=\"https:\/\/github.com\/xamarin\/xamarin-forms-samples\/tree\/forms-macos-preview\/Weather\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/xamarin\/xamarin-forms-samples\/tree\/forms-macos-preview\/Weather<\/a><\/p>\n<p>Join the <a href=\"https:\/\/forums.xamarin.com\/93585\/preview-xamarin-forms-for-macos\/p1\" target=\"_blank\" rel=\"noopener noreferrer\">macOS discussion<\/a> in the Xamarin forums.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s amazing to think that you can now have a running native macOS application with just a few tweaks to a Xamarin.Forms solution. And I have to say \u201capplication\u201d because that\u2019s desktop, right? As I featured in last week\u2019s Xamarin.Forms 2.3.5 pre-release announcement, macOS support in Xamarin.Forms is now in Preview. Let\u2019s run through adding [&hellip;]<\/p>\n","protected":false},"author":553,"featured_media":31101,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4,16],"class_list":["post-31096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>It\u2019s amazing to think that you can now have a running native macOS application with just a few tweaks to a Xamarin.Forms solution. And I have to say \u201capplication\u201d because that\u2019s desktop, right? As I featured in last week\u2019s Xamarin.Forms 2.3.5 pre-release announcement, macOS support in Xamarin.Forms is now in Preview. Let\u2019s run through adding [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/31096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/553"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=31096"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/31096\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=31096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=31096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=31096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}