{"id":1642,"date":"2021-06-17T12:17:28","date_gmt":"2021-06-17T19:17:28","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1642"},"modified":"2021-08-27T16:41:27","modified_gmt":"2021-08-27T23:41:27","slug":"xamarin-jetpack-window-manager-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/xamarin-jetpack-window-manager-preview\/","title":{"rendered":"Window Manager preview for Xamarin"},"content":{"rendered":"<p>\n  Hello Xamarin developers!\n<\/p>\n<p>\n  We\u2019ve discussed <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-window-manager-foldable-codelab-training\/?WT.mc_id=blog-surfaceduoblog-conceptdev\">Window Manager<\/a> in previous blog posts \u2013 it\u2019s an AndroidX library that brings dual-screen and foldable support to Android, across a variety of devices including Microsoft Surface Duo. Window Manager is now available to test with Xamarin.Android apps via a prerelease NuGet <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.AndroidX.Window\/\">Xamarin.AndroidX.Window<\/a>. <\/p>\n<blockquote><p><b>UPDATE:<\/b> on August 18th, 2021 Google released <a href=\"https:\/\/developer.android.com\/jetpack\/androidx\/releases\/window#window-1.0.0-beta01\">beta01<\/a> of the Jetpack Window Manager package, which is bound in the <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.AndroidX.Window\/1.0.0.1-beta01\">Xamarin.AndroidX.Window NuGets<\/a>. \n<br\/>As part of the latest release, Google added a <code>WindowJava<\/code> package for better backwards compatibility. This package is better suited to Xamarin binding and is available in the <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.AndroidX.Window.WindowJava\/1.0.0.1-beta01\">Xamarin.AndroidX.Window.WindowJava NuGet<\/a>.\n<br\/>The <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\/\">Xamarin.Android samples<\/a> have been updated to use the <code>WindowJava<\/code> NuGet &#8211; changes to the underlying API are reflected in the code changes in this <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\/pull\/19\/files#diff-41c16f337f5cb759ac017fd1c3f4a127b69b0645f466faeef5781e5e10c49bf2\">pull request<\/a>.<\/p><\/blockquote>\n<h2>Window Manager NuGet preview<\/h2>\n<p>\n  You can add the <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.AndroidX.Window\/\">Xamarin.AndroidX.Window-1.0.0-alpha07<\/a> NuGet to your Android project in Visual Studio, and incorporate dual-screen and foldable support that works on a variety of different devices. The two key classes in the API are:\n<\/p>\n<p><strong>WindowManager<\/strong>\n<\/p>\n<ul>\n<li>\n    <b>CurrentWindowMetrics<\/b> \u2013 Rectangle that represents the current size of the application window.\n  <\/li>\n<li>\n    <b>MaximumWindowMetrics<\/b> \u2013 Rectangle that represents the full size of the device screen.\n  <\/li>\n<li>\n    <b>DisplayFeatures<\/b> \u2013 Collection of features available for the device. We are only interested in FoldingFeature instances for the purposes of updating layouts for dual-screen and foldable devices.\n  <\/li>\n<\/ul>\n<p><strong>FoldingFeature<\/strong>\n<\/p>\n<ul>\n<li>\n    <b>Bounds<\/b> \u2013 Rectangle that defines the coordinates of the hinge or fold.\n  <\/li>\n<li>\n    <b>IsSeparating<\/b> \u2013 Boolean if the hinge or fold is acting as a separator on the screen. This is always true for hinges that occlude content, and only true for non-occluding features when the devices are folded (to around 90 degrees).\n  <\/li>\n<li>\n    <b>Orientation<\/b> \u2013 The vertical or horizontal orientation of the hinge or fold.\n  <\/li>\n<li>\n    <b>OcclusionMode<\/b> \u2013 Full or None, indicating whether the feature hides content behind it (i.e. it has a width greater than zero).\n  <\/li>\n<li>\n    <b>State<\/b> \u2013 HALF_OPEN (90 degrees) or FULL (180 degrees).\n  <\/li>\n<\/ul>\n<p>\n  The benefit of these manufacturer-agnostic APIs is that they respond to both hardware attributes and device posture to give your code a hint about what the user is trying to accomplish. \n<\/p>\n<h2>Sample code<\/h2>\n<p>\n  There are only a few steps to add Window Manager to your Xamarin app:\n<\/p>\n<ol>\n<li>\n  Add the AndroidX.Window NuGet.\n<\/li>\n<li>\n  Create a Window Manager instance and wire up to the correct events.\n<\/li>\n<li>\n  Your code gets a callback whenever changes occur (like orientation or span\/unspan), and you can adapt your user interface as required.\n<\/li>\n<\/ol>\n<p>\n  In the callback, Window Manager will provide a collection of features present on the screen, which you can query for information and adapt your layout accordingly. The sample code shown below just outputs the data to the screen:\n<\/p>\n<p>\n  <img decoding=\"async\" width=\"1298\" height=\"1005\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-2.png\" class=\"wp-image-1643\" alt=\"Surface Duo running a sample app showing screen measurements as text on the left screen with a blank right screen\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-2.png 1298w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-2-300x232.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-2-1024x793.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-2-768x595.png 768w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" \/>\n<\/p>\n<p><em>Figure 1: Window Manager Xamarin sample<\/em>\n<\/p>\n<p>\n  This sample is available,along with our other dual-screen samples,on a branch of the <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\/pull\/16\">surface-duo-sdk-xamarin-samples repo<\/a> where all samples have been updated to use Window Manager. Here is a C# example of the <strong>Accept<\/strong> callback method parsing the WindowLayoutInfo class to display information about the presence of a hinge or fold:\n<\/p>\n<pre>public void Accept(Java.Lang.Object newLayoutInfo)  \/\/ Object will be WindowLayoutInfo\r\n{\r\n    windowMetrics.Text = $\"CurrentWindowMetrics: {wm.CurrentWindowMetrics.Bounds}\\n\" +\r\n        $\"MaximumWindowMetrics: {wm.MaximumWindowMetrics.Bounds}\";\r\n\r\n    layoutChange.Text = newLayoutInfo.ToString();\r\n\r\n    configurationChanged.Text = \"One logic\/physical display - unspanned\";\r\n\r\n    foreach (var displayFeature in newLayoutInfo.DisplayFeatures)\r\n    {\r\n        if (displayFeature is FoldingFeature foldingFeature)\r\n        {\r\n            if (foldingFeature.OcclusionMode == FoldingFeature.OcclusionNone)\r\n            {\r\n                configurationChanged.Text = \"App is spanned across a fold\";\r\n            }\r\n            if (foldingFeature.OcclusionMode == FoldingFeature.OcclusionFull)\r\n            {\r\n                configurationChanged.Text = \"App is spanned across a hinge\";\r\n            }\r\n            configurationChanged.Text += \"\\nIsSeparating: \" + foldingFeature.IsSeparating\r\n                    + \"\\nOrientation: \" + foldingFeature.Orientation  \/\/ FoldingFeature.OrientationVertical or Horizontal\r\n                    + \"\\nState: \" + foldingFeature.State; \/\/ FoldingFeature.StateFlat or StateHalfOpened\r\n        }\r\n        else\r\n        {\r\n            Log.Info(TAG, \"DisplayFeature is not a fold or hinge\");\r\n        }\r\n    }\r\n}<\/pre>\n<h2>SplitLayout sample<\/h2>\n<p>\n  To demonstrate how you can use Window Manager to create dual-screen aware Xamarin.Android widgets, there is also a <a href=\"https:\/\/github.com\/conceptdev\/xamarin-android-samples\/tree\/main\/SplitLayout\">C# port of the SplitLayout demo<\/a> that Google provides in the Android user-interface samples repo (in <a href=\"https:\/\/github.com\/android\/user-interface-samples\/tree\/master\/WindowManager\/app\/src\/main\/java\/com\/example\/windowmanagersample\">Kotlin<\/a>). \n<\/p>\n<p>\n  <img decoding=\"async\" width=\"600\" height=\"465\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-3.png\" class=\"wp-image-1644\" alt=\"Surface Duo running a sample app showing a purple robot on one screen and some text and media controls on the other screen\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-3.png 600w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/06\/word-image-3-300x233.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br\/><em>Figure 2: Xamarin SplitLayout demo<\/em>\n<\/p>\n<h2>Xamarin.Forms<\/h2>\n<p>\n  Using the Window Manager NuGet directly is intended for developers building Xamarin.Android apps. Xamarin.Forms provides dual-screen support via more abstract DualScreenInfo and TwoPaneView classes which are covered in the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/\">documentation<\/a>.\n<\/p>\n<h2>Feedback and resources<\/h2>\n<p>\n  Check out the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/?WT.mc_id=docs-surfaceduoblog-conceptdev\">Surface Duo developer documentation<\/a> and <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/tag\/xamarin\/?WT.mc_id=blog-surfaceduoblog-conceptdev\">past Xamarin blog posts<\/a> for links and details on all our samples. You can find our <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\">Xamarin samples<\/a> on GitHub.\n<\/p>\n<p>\n  If you have any questions, or would like to tell us about your apps, use the <a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\">feedback forum<\/a> or message us on Twitter <a href=\"https:\/\/twitter.com\/surfaceduodev\">@surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Xamarin developers! We\u2019ve discussed Window Manager in previous blog posts \u2013 it\u2019s an AndroidX library that brings dual-screen and foldable support to Android, across a variety of devices including Microsoft Surface Duo. Window Manager is now available to test with Xamarin.Android apps via a prerelease NuGet Xamarin.AndroidX.Window. UPDATE: on August 18th, 2021 Google released [&hellip;]<\/p>\n","protected":false},"author":570,"featured_media":1644,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[706,46,181],"class_list":["post-1642","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-jetpack-window-manager","tag-surface-duo","tag-xamarin"],"acf":[],"blog_post_summary":"<p>Hello Xamarin developers! We\u2019ve discussed Window Manager in previous blog posts \u2013 it\u2019s an AndroidX library that brings dual-screen and foldable support to Android, across a variety of devices including Microsoft Surface Duo. Window Manager is now available to test with Xamarin.Android apps via a prerelease NuGet Xamarin.AndroidX.Window. UPDATE: on August 18th, 2021 Google released [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/570"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1642"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1642\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1644"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}