{"id":46212,"date":"2020-01-22T10:01:54","date_gmt":"2020-01-22T18:01:54","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=46212"},"modified":"2020-01-24T12:30:43","modified_gmt":"2020-01-24T20:30:43","slug":"xamarin-goes-dual-screen","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-goes-dual-screen\/","title":{"rendered":"Xamarin Goes Dual Screen"},"content":{"rendered":"<p>Surface Duo introduces a whole new class of ultra-portable experiences running on dual screens. Today we are excited to <a href=\"https:\/\/blogs.windows.com\/windowsdeveloper\/2020\/01\/22\/announcing-dual-screen-preview-sdks-and-microsoft-365-developer-day\/\">announce our public preview of the SDK for Surface Duo<\/a>. Xamarin developers can take advantage of the new SDK to enlighten existing apps and create innovative experiences that inspires creativity.<\/p>\n<p><center><img decoding=\"async\" class=\"size-full wp-image-46213 aligncenter\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/Hero_Neo_Duo.png\" alt=\"Surface Duo Dual Screen Iphone and Ipad\" width=\"1200\" height=\"549\" srcset=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/Hero_Neo_Duo.png 1200w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/Hero_Neo_Duo-300x137.png 300w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/Hero_Neo_Duo-1024x468.png 1024w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/Hero_Neo_Duo-768x351.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/center>&nbsp;<\/p>\n<h2><\/h2>\n<h2>Get Creative with Dual Screen<\/h2>\n<p>As you look at your current app screens and features, consider the following <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/introduction#dual-screen-user-experience-considerations\">user experience patterns<\/a> that might be best suited. By default, your app will run on the left or top screen depending on the orientation of the device. You then want to consider if your app should remain like that or if you could adopt one of these recommended patterns:<\/p>\n<ul>\n<li>Extended Canvas<\/li>\n<li>Master-Detail<\/li>\n<li>Two Page<\/li>\n<li>Dual View<\/li>\n<li>Companion View<\/li>\n<\/ul>\n<p><center><img decoding=\"async\" class=\"size-full wp-image-46214 aligncenter\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/dual-screen-app-patterns.png\" alt=\"Recommended Patterns for Duel Screen Apps\" width=\"1201\" height=\"481\" srcset=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/dual-screen-app-patterns.png 1201w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/dual-screen-app-patterns-300x120.png 300w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/dual-screen-app-patterns-1024x410.png 1024w, https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/dual-screen-app-patterns-768x308.png 768w\" sizes=\"(max-width: 1201px) 100vw, 1201px\" \/><\/center>The SDK for Surface Duo will help you avoid misaligning things behind the hinge. There are other things you will want to be mindful of when building for dual-screen experiences, and we\u2019ve covered many of those for you <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/introduction#how-to-work-with-the-seam\">here in our documentation<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Get Started<\/h2>\n<p>Ready to take the Duo for a spin and start creating powerful new app experiences? <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/android\/get-duo-sdk?tabs=csharp-xamarin\">Download<\/a> the SDK for Surface Duo and Android emulator today, and then hop over to our <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\">array of Xamarin samples<\/a> on GitHub. The most useful APIs to use today are provided from the ScreenHelper class which will return a Boolean indicating if the device is a Duo.<\/p>\n<pre class=\"lang:c# decode:true\">protected override void OnCreate(Bundle savedInstanceState)\r\n{\r\n    base.OnCreate(savedInstanceState);\r\n    SetContentView(Resource.Layout.activity_main);\r\n    screenHelper = new ScreenHelper();\r\n    isDuo = screenHelper.Initialize(this);\r\n}\r\n<\/pre>\n<p>You can also access other helpful features such as rotation, isDualMode, and hinge angle. Check the samples for more info.<\/p>\n<p>Take advantage of this today in Xamarin.Forms with a <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/layouts\/custom\">custom layout<\/a>. This works in any version of Xamarin.Forms, no updates needed. For this initial launch we\u2019ve created a custom layout dubbed the TwoPaneView that manages both screens, positions content, avoids the hinge area, and reacts to rotation. You can set the behavior of your layout with a simple enum:<\/p>\n<pre class=\"lang:c# decode:true\">public enum DuoSplitPaneBehavior\r\n{\r\n    ShowOnlyLeft,\r\n    ShowOnlyRight,\r\n    ShowBoth,\r\n}\r\n<\/pre>\n<p>The following custom layout takes two children, one for each pane (or screen). This example shows the companion pane pattern using a <span class=\"lang:default decode:true crayon-inline \">TwoPaneView<\/span>\u00a0 custom layout.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;ContentPage.Content&gt;\r\n\r\n    &lt;local:TwoPaneView x:Name=\"twoPaneView\"&gt;\r\n        &lt;CarouselView x:Name=\"cv\" BackgroundColor=\"LightGray\" PositionChanged=\"OnCarouselViewPositionChanged\" \r\n                      HeightRequest=\"{Binding Source={x:Reference mainPage}, Path=FormsWindow.Pane1.Height}\"&gt;\r\n            &lt;CarouselView.ItemTemplate&gt;\r\n                &lt;DataTemplate&gt;\r\n                    &lt;Frame BackgroundColor=\"LightGray\" Padding=\"0\" Margin=\"0\" \r\n                           WidthRequest=\"{Binding Source={x:Reference mainPage}, Path=FormsWindow.Pane1.Width}\"\r\n                           HeightRequest=\"{Binding Source={x:Reference mainPage}, Path=FormsWindow.Pane1.Height}\"&gt;\r\n                        &lt;Frame Margin=\"20\" BackgroundColor=\"White\"&gt;\r\n                            &lt;Label FontSize=\"Large\" Text=\"{Binding ., StringFormat='Slide Content {0}'}\" VerticalTextAlignment=\"Center\" HorizontalTextAlignment=\"Center\" HorizontalOptions=\"Center\" VerticalOptions=\"Center\"&gt;&lt;\/Label&gt;\r\n                        &lt;\/Frame&gt;\r\n                    &lt;\/Frame&gt;\r\n                &lt;\/DataTemplate&gt;\r\n            &lt;\/CarouselView.ItemTemplate&gt;\r\n        &lt;\/CarouselView&gt;\r\n        &lt;CollectionView x:Name=\"indicators\" \r\n            SelectionChanged=\"OnIndicatorsSelectionChanged\"\r\n            SelectionMode=\"Single\"\r\n            Margin=\"20, 20, 20, 20\"\r\n            BackgroundColor=\"White\"\r\n            ItemsSource=\"{Binding Source={x:Reference cv}, Path=ItemsSource}\"&gt;\r\n            &lt;CollectionView.Resources&gt;\r\n                &lt;ResourceDictionary&gt;\r\n                    &lt;Style TargetType=\"Frame\"&gt;\r\n                        &lt;Setter Property=\"VisualStateManager.VisualStateGroups\"&gt;\r\n                            &lt;VisualStateGroupList&gt;\r\n                                &lt;VisualStateGroup x:Name=\"CommonStates\"&gt;\r\n                                    &lt;VisualState x:Name=\"Normal\" \/&gt;\r\n                                    &lt;VisualState x:Name=\"Selected\"&gt;\r\n                                        &lt;VisualState.Setters&gt;\r\n                                            &lt;Setter Property=\"BorderColor\" Value=\"Green\" \/&gt;\r\n                                        &lt;\/VisualState.Setters&gt;\r\n                                    &lt;\/VisualState&gt;\r\n                                &lt;\/VisualStateGroup&gt;\r\n                            &lt;\/VisualStateGroupList&gt;\r\n                        &lt;\/Setter&gt;\r\n                    &lt;\/Style&gt;\r\n                &lt;\/ResourceDictionary&gt;\r\n            &lt;\/CollectionView.Resources&gt;\r\n            &lt;CollectionView.ItemsLayout&gt;\r\n                &lt;LinearItemsLayout Orientation=\"Vertical\" ItemSpacing=\"10\"&gt;&lt;\/LinearItemsLayout&gt;\r\n            &lt;\/CollectionView.ItemsLayout&gt;\r\n            &lt;CollectionView.ItemTemplate&gt;\r\n                &lt;DataTemplate&gt;\r\n                    &lt;Frame CornerRadius=\"10\" HeightRequest=\"100\" BackgroundColor=\"White\" Margin=\"0\" Padding=\"1\"&gt;\r\n                        &lt;StackLayout HorizontalOptions=\"Fill\" VerticalOptions=\"Fill\"  Orientation=\"Horizontal\"&gt;\r\n                            &lt;Label FontSize=\"8\" Padding=\"20,0,20,0\" VerticalTextAlignment=\"Center\" WidthRequest=\"100\" Text=\"{Binding ., StringFormat='Slide Content {0}'}\"&gt;&lt;\/Label&gt;\r\n                            &lt;Label FontSize=\"Micro\" Padding=\"20,0,20,0\" VerticalTextAlignment=\"Center\" HorizontalOptions=\"FillAndExpand\" BackgroundColor=\"DarkGray\"  Grid.Column=\"1\" Text=\"{Binding ., StringFormat='Slide {0}'}\"&gt;&lt;\/Label&gt;\r\n                        &lt;\/StackLayout&gt;\r\n                    &lt;\/Frame&gt;\r\n                &lt;\/DataTemplate&gt;\r\n            &lt;\/CollectionView.ItemTemplate&gt;\r\n        &lt;\/CollectionView&gt;\r\n    &lt;\/local:TwoPaneView&gt;\r\n    \r\n&lt;\/ContentPage.Content&gt;\r\n<\/pre>\n<p><center><img decoding=\"async\" class=\"aligncenter size-full wp-image-46217\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/01\/companionPane.gif\" alt=\"Dual Screen Sample gif\" width=\"1484\" height=\"982\" \/><\/center>We have a sample showing an array of different layouts supporting all of the pattern guidance mention in our documentation. <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\">Start exploring here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Get Dreaming About Dual Screen<\/h2>\n<p>Surface Duo is the first in this whole new class of devices and app experiences. When Surface Neo is available running Windows 10X, we\u2019ll share continued support for that experience with first-class support in Xamarin.Forms. The amazing news is that all the work you see here to support dual-screen experiences for the Surface Duo are 100% cross-platform and required no changes to Xamarin.Forms itself.<\/p>\n<p>What do you dream of doing with these new devices? What interesting types of UI does this inspire you to build?<\/p>\n<p>We\u2019d love to hear from you! Help guide our investment in supporting your vision and <a href=\"https:\/\/calendly.com\/david-ortinau\/duo-discussion\">schedule a call with us to discuss<\/a>.<\/p>\n<p>Additional Resources:<\/p>\n<ul>\n<li><a href=\"https:\/\/blogs.windows.com\/windowsdeveloper\/?p=55626\">Windows Developer Blog Announcement<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\">Documentation<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-xamarin-samples\">Samples<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Bonus: Live Stream Today!<\/h2>\n<p><del>Today at 12:30 PST we will be live streaming on Twitch with <a href=\"https:\/\/twitter.com\/davidortinau\">David Ortinau<\/a>, <a href=\"https:\/\/twitter.com\/redth\">Jonathan Dick<\/a>, and <a href=\"https:\/\/twitter.com\/pureween\">Shane Neuville<\/a> walking you through setting up the SDK and exploring the samples. <a href=\"https:\/\/twitch.tv\/davidortinau\">Join us on Twitch<\/a>!<\/del><\/p>\n<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/-Ey68OIKNWY\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Surface Duo introduces a whole new class of ultra-portable experiences running on dual screens. Today we are excited to announce our public preview of the SDK for Surface Duo. Xamarin developers can take advantage of the new SDK to enlighten existing apps and create innovative experiences for this new device that inspires creativity.<\/p>\n","protected":false},"author":553,"featured_media":46213,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[313,5216,1,367],"tags":[5818,7816,6988,16],"class_list":["post-46212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-announcements","category-xamarin","category-xamarin-forms","tag-sdk","tag-surface-duo","tag-xamarin-android","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Surface Duo introduces a whole new class of ultra-portable experiences running on dual screens. Today we are excited to announce our public preview of the SDK for Surface Duo. Xamarin developers can take advantage of the new SDK to enlighten existing apps and create innovative experiences for this new device that inspires creativity.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46212","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=46212"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46212\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/46213"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=46212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=46212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=46212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}