{"id":1321,"date":"2021-02-25T14:02:45","date_gmt":"2021-02-25T22:02:45","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1321"},"modified":"2021-02-25T14:02:45","modified_gmt":"2021-02-25T22:02:45","slug":"xamarin-forms-5-twopaneview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/xamarin-forms-5-twopaneview\/","title":{"rendered":"Xamarin.Forms 5.0 on Microsoft Surface Duo"},"content":{"rendered":"<p>\n  Hello Xamarin developers,\n<\/p>\n<p>\n  Today Craig and I joined <em>The Launch Space<\/em>, a live stream from Microsoft Learn, to talk about developing dual-screen apps for Surface Duo using Xamarin. This topic has been covered in the blog before, but there are some new features to talk about with the release of Xamarin.Forms 5.0. You can <a href=\"https:\/\/youtu.be\/t8alvJeRlzM\">watch the stream here<\/a>, and see the highlights listed below.\n<\/p>\n<p>\n  <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/t8alvJeRlzM\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/p>\n<p>\n  More information about the <a href=\"https:\/\/aka.ms\/thelaunchspacesurfaceduo1\"><em>The Launch Space show<\/em><\/a> is available on <a href=\"https:\/\/aka.ms\/thelaunchspacesurfaceduo1\">GitHub<\/a>.\n<\/p>\n<h2>Dual-screen app design<\/h2>\n<p>\n  We talked about a few different aspects of enhancing your app design for dual-screens. The five user experience patterns are covered here in the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/introduction\/?WT.mc_id=docs-surfaceduoblog-pureween\">documentation<\/a>, and although we forgot to mention it live, there is also a <a href=\"https:\/\/www.figma.com\/community\/file\/925222050648034066\">Figma Design Kit available<\/a>.\n<\/p>\n<h2>TwoPaneView<\/h2>\n<p>\n  The <strong>TwoPaneView<\/strong> control, also available in <a href=\"https:\/\/docs.microsoft.com\/windows\/winui\/api\/microsoft.ui.xaml.controls.twopaneview\/?WT.mc_id=docs-surfaceduoblog-pureween\">WinUI<\/a> (and therefore also on the <a href=\"https:\/\/platform.uno\/blog\/surface-duo-winui-twopaneview-implementation-via-uno-platform\/\">Uno Platform<\/a>), provides a flexible layout that can adapt to screens of any size as well as the dual-screen Surface Duo. The screenshots below show how the layout fits each pane neatly into the two screens of Surface Duo, while adapting to the screen aspect ratio on other devices:\n<\/p>\n<p>\n  <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1.png\" alt=\"TwoPaneView on a Surface Duo, phone, and tablet\" width=\"2208\" height=\"917\" class=\"alignnone size-full wp-image-1335\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1.png 2208w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1-300x125.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1-1024x425.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1-768x319.png 768w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1-1536x638.png 1536w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-1-2048x851.png 2048w\" sizes=\"(max-width: 2208px) 100vw, 2208px\" \/><\/a><br\/><em>Figure 1: TwoPaneView adapting to different screens and devices<\/em>\n<\/p>\n<p><strong>TwoPaneView<\/strong> has many configuration options that provide lots of flexibility and is a good responsive layout choice for apps targeting many different devices.\n<\/p>\n<h2>Configurable Shell flyout<\/h2>\n<p>\n  Xamarin.Forms Shell makes it simple to build sophisticated and customizable navigation, and recent updates that make the flyout configurable means we can tweak the behavior specifically for Surface Duo. During the show, we looked at the code which will size the flyout depending on whether the app is on a single screen, in dual-portrait, or in dual-landscape:\n<\/p>\n<p>\n  <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-2.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-2.png\" alt=\"Xamarin.Forms Shell Flyout adapting to Surface Duo\" width=\"1145\" height=\"566\" class=\"alignnone size-full wp-image-1336\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-2.png 1145w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-2-300x148.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-2-1024x506.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-2-768x380.png 768w\" sizes=\"(max-width: 1145px) 100vw, 1145px\" \/><\/a><em>Figure 2: Shell flyout enhanced for two screens<\/em>\n<\/p>\n<p>\n  Adapting the flyout size is done using the <strong><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/dual-screen\/dual-screen-info\/?WT.mc_id=docs-surfaceduoblog-pureween\">DualScreenInfo<\/a><\/strong> class. The code snippet below shows how to detect the device posture and adjust the flyout accordingly:\n<\/p>\n<pre>var info = DualScreenInfo.Current;\r\nif (info.SpanMode == TwoPaneViewMode.Wide)\r\n{\r\n    FlyoutHeight = -1;\r\n    FlyoutWidth = info.SpanningBounds[0].Width;\r\n}\r\nelse if (info.SpanMode == TwoPaneViewMode.Tall)\r\n{\r\n    FlyoutHeight = info.SpanningBounds[0].Height;\r\n    FlyoutWidth = -1;\r\n    FlyoutBehavior = FlyoutBehavior.Flyout;\r\n}\r\nelse\r\n{\r\n    FlyoutHeight = -1;\r\n    FlyoutWidth = -1;\r\n    FlyoutBehavior = FlyoutBehavior.Flyout;\r\n}<\/pre>\n<h2>Drag and drop<\/h2>\n<p>\n  You can now support drag and drop using a gesture recognizer;the sample app includes two drag and drop examples in the Shell flyout header and a dedicated demo page:\n<\/p>\n<p>\n  <img decoding=\"async\" src=\"https:\/\/devblogs.microsoftt.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/word-image-13.png\" class=\"wp-image-1327\" width=\"400\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/word-image-13.png 740w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/word-image-13-300x234.png 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><br\/><em>Figure 3: Drag and drop demo in the Xamarin.Forms dual-screen sample<\/em>\n<\/p>\n<p>\n  The draggable image in the flyout header (shown earlier) is implemented with just a few lines of XAML and code:\n<\/p>\n<pre>&lt;Shell.FlyoutHeaderTemplate>\r\n    &lt;DataTemplate>\r\n        &lt;StackLayout>\r\n            &lt;Label Text=\"Drag this Image to a Browser\"><\/Label>\r\n            &lt;Image Source=\"surface_duo\">\r\n                &lt;Image.GestureRecognizers>\r\n                    &lt;DragGestureRecognizer DragStarting=\"DuoImageDragStarting\">&lt;\/DragGestureRecognizer>\r\n                &lt;\/Image.GestureRecognizers>\r\n            &lt;\/Image>\r\n        &lt;\/StackLayout>\r\n    &lt;\/DataTemplate>\r\n&lt;\/Shell.FlyoutHeaderTemplate><\/pre>\n<p>\n  and in the code-behind:\n<\/p>\n<pre>void DuoImageDragStarting(System.Object sender, Xamarin.Forms.DragStartingEventArgs e)\r\n{\r\n    e.Data.Text = \"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/use-sdk\";\r\n    e.Handled = true;\r\n}<\/pre>\n<p>\n  The colored boxviews example uses gesture recognizers as well:\n<\/p>\n<pre>&lt;BoxView.GestureRecognizers>\r\n    &lt;DragGestureRecognizer DropCompleted=\"OnDropCompleted\" DragStarting=\"OnDragStarting\">\r\n&lt;\/DragGestureRecognizer>\r\n&lt;\/BoxView.GestureRecognizers><\/pre>\n<p>\n  and on the bindable stack layouts:\n<\/p>\n<pre>&lt;StackLayout.GestureRecognizers>\r\n    &lt;DropGestureRecognizer \r\n        DragOver=\"OnDragOver\"\r\n        DragLeave=\"OnDragLeave\"\r\n        Drop=\"OnDrop\">\r\n    &lt;\/DropGestureRecognizer>\r\n&lt;\/StackLayout.GestureRecognizers><\/pre>\n<p>\n  along with the corresponding <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\/blob\/main\/XamarinForms\/DualScreenDemos\/DragAndDrop.xaml.cs#L41-L123\">methods in the DragAndDrop.xaml.cs code-behind<\/a>.\n<\/p>\n<h2>Dual-screen triggers<\/h2>\n<p>\n  We also looked at how <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/dual-screen\/triggers\/?WT.mc_id=docs-surfaceduoblog-pureween\">triggers<\/a> can be used to adapt views or layouts to dual-screen postures. The <strong>SpanModeStateTrigger<\/strong> and <strong>WindowSpanModeStateTrigger<\/strong> can respond to <strong>SpanMode<\/strong> changes (SinglePane, Tall, or Wide posture) and declaratively update the screen purely in XAML.\n<\/p>\n<h2>Microsoft Learn free training<\/h2>\n<p>\n  There is a <a href=\"https:\/\/docs.microsoft.com\/learn\/modules\/xamarin-forms-dual-screen\/?WT.mc_id=docs-surfaceduoblog-pureween\">Surface Duo dual-screen module<\/a> in the <a href=\"https:\/\/docs.microsoft.com\/learn\/paths\/customize-your-xamarin-forms-apps\/?WT.mc_id=docs-surfaceduoblog-pureween\">advanced Xamarin.Forms learning path<\/a>. This module takes you through the steps of enhancing an existing Xamarin.Forms Android app for dual-screen devices:\n<\/p>\n<p>\n  <img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/word-image-14.png\" class=\"wp-image-1328\" width=\"400\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/word-image-14.png 752w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/word-image-14-300x234.png 300w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><br\/><em>Figure 4: Microsoft Learn module sample<\/em>\n<\/p>\n<p>\n  The learn module also includes working with different screen sizes and responding to changes in the hinge angle.\n<\/p>\n<h2>Samples<\/h2>\n<p>\n  We finished up talking about a few of the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/samples\/?WT.mc_id=docs-surfaceduoblog-pureween\">samples<\/a> available to inspire your dual-screen creativity. In addition to the developer sample that showcases all the design patterns, XamarinTV and Sketch360 are two feature-rich open-source apps that you can try \u2013 Sketch360 is even on <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.microsoft.garage.sketch360app\">Google Play<\/a> and includes an ink-handling project that you can re-use in your own Xamarin.Forms apps.\n<\/p>\n<p>\n  <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-5.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-5.png\" alt=\"XamarinTV and Sketch 360 sample apps\" width=\"1208\" height=\"464\" class=\"alignnone size-full wp-image-1337\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-5.png 1208w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-5-300x115.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-5-1024x393.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/02\/xamarin-figure-5-768x295.png 768w\" sizes=\"(max-width: 1208px) 100vw, 1208px\" \/><\/a><br\/><em>Figure 5: XamarinTV and Sketch360 sample apps<\/em>\n<\/p>\n<h2>Resources and feedback<\/h2>\n<p>\n  You can find other live content on <a href=\"http:\/\/aka.ms\/learntv\">Microsoft Learn TV<\/a>, and you can find more Surface Duo video content on our <a href=\"https:\/\/www.youtube.com\/channel\/UClGu9QLtPNz8OdddBfhZXPA\">YouTube<\/a> channel. The Surface Duo Developer Experience team is also streaming every Friday at 11am PST on <a href=\"https:\/\/www.twitch.tv\/surfaceduodev\">Twitch<\/a>.\n<\/p>\n<p>\n  Visit the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/?WT.mc_id=docs-surfaceduoblog-pureween\">Surface Duo developer documentation<\/a> and <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/?WT.mc_id=blog-surfaceduoblog-pureween\">past blog posts<\/a> for other ideas on enhancing your apps for dual-screen devices.\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>, message us on Twitter <a href=\"https:\/\/twitter.com\/surfaceduodev\">@surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Xamarin developers, Today Craig and I joined The Launch Space, a live stream from Microsoft Learn, to talk about developing dual-screen apps for Surface Duo using Xamarin. This topic has been covered in the blog before, but there are some new features to talk about with the release of Xamarin.Forms 5.0. You can watch [&hellip;]<\/p>\n","protected":false},"author":49871,"featured_media":1322,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,45,182],"class_list":["post-1321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-surface-duo-sdk","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Hello Xamarin developers, Today Craig and I joined The Launch Space, a live stream from Microsoft Learn, to talk about developing dual-screen apps for Surface Duo using Xamarin. This topic has been covered in the blog before, but there are some new features to talk about with the release of Xamarin.Forms 5.0. You can watch [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1321","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\/49871"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1321"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1321\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1322"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}