{"id":162,"date":"2020-03-19T12:18:00","date_gmt":"2020-03-19T19:18:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=162"},"modified":"2020-04-09T12:17:24","modified_gmt":"2020-04-09T19:17:24","slug":"bring-your-xamarin-apps-to-surface-duo","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/bring-your-xamarin-apps-to-surface-duo\/","title":{"rendered":"Bring your Xamarin apps to Surface Duo"},"content":{"rendered":"

Hello Surface Duo developers! <\/p>\n

To celebrate the .NET Conf: Focus on Xamarin<\/a> live broadcast next week (tune in Monday!), today\u2019s blog post will outline how to support the dual-screen devices from Xamarin apps. Xamarin lets you build Android apps using C# in Visual Studio, including building and testing apps for the Surface Duo. <\/p>\n

Set up the Surface Duo emulator<\/h2>\n

The Surface Duo emulator and SDK are already available and ready for you to get started. Follow these instructions<\/a> to set up the Surface Duo emulator for use with Visual Studio. Once you have started the emulator, it will appear as a deployment option in Visual Studio and you can test your existing Xamarin.Android and Xamarin.Forms apps! <\/p>\n

\"Start\nFigure 1: Start the emulator before testing in Visual Studio<\/p>\n

Step 1<\/a> in the journey to dual-screen devices is testing your app, which you can do today. From there, you can add functionality to take advantage of both screens, using the APIs described below. <\/p>\n

Display mask and hinge handling<\/h2>\n

The Java APIs<\/a> we talked about last week are also accessible by C# in Xamarin.Android apps. \nAdd the Xamarin.DuoSdk NuGet to your project and you can use these code snippets to detect the display mask and hinge angle device attributes: <\/p>\n

Display Mask location<\/h3>\n
using Microsoft.Device.Display; \r\n\/\/ ... in MainActivity.OnCreate \r\nvar screenHelper = new ScreenHelper(); \r\nvar isDuo = screenHelper.Initialize(this); \r\nvar isSpanned = screenHelper.IsDualMode; \r\nvar maskBounds = screenHelper.GetHingeBounds(); \/\/ eg. Rect(1350, 0 - 1434, 1800) <\/pre>\n
Hinge Angle<\/h3>\n
The code for the accessing the hinge angle sensor<\/a> is available on GitHub. Using the information from these APIs, you can adapt your Android app layouts for dual-screens. <\/p>\n
Other useful Xamarin.Android sample code<\/a> can be found in the GitHub repo, including different UI patterns and a drag and drop demo. <\/p>\n
TwoPaneView layout control<\/h2>\n
Xamarin.Forms 4.5 introduces a new layout control specifically for dual-screen support: the TwoPaneView control. To use, add the Xamarin.Forms.DualScreen<\/a> NuGet to your Xamarin.Forms, and include a ContentView for each pane: <\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?> \r\n<ContentPage \r\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" \r\n    xmlns:dualScreen=\"clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen\" \r\n    x:Class=\"SampleApp\" Visual=\"Material\"> \r\n    <dualScreen:TwoPaneView x:Name=\"twoPaneView\"> \r\n        <dualScreen:TwoPaneView.Pane1> \r\n            <Label Text=\"Left screen\"\/> \r\n        <\/dualScreen:TwoPaneView.Pane1> \r\n        <dualScreen:TwoPaneView.Pane2> \r\n            <Label Text=\"Right screen\"\/> \r\n        <\/dualScreen:TwoPaneView.Pane2> \r\n   <\/dualScreen:TwoPaneView> \r\n<\/ContentPage><\/pre>\n
The TwoPaneView<\/code><\/a> is extremely configurable for a variety of layouts for single- and dual-screen devices (including tablets). Refer to the Xamarin.Forms dual-screen docs for instructions on the complete API.  <\/p>\n
Using Xamarin.Forms provides the additional benefit of creating apps that can be deployed on the Surface Neo running Windows 10X. Check out the Xamarin blog for more details<\/a> on how you can create a single codebase for both platforms. Here\u2019s a screenshot of the app spanned across two screens: <\/p>\n
\"Surface\nFigure 2: Surface Duo running XamarinTV sample<\/p>\n
The XamarinTV sample<\/a> runs on both the Surface Duo and Surface Neo \u2013 try it on both emulators today! <\/p>\n
Feedback<\/h2>\n
We would love to hear from you about your experiences using the SDK, emulator, and your first thoughts on how you can utilize these in your Android apps.<\/p>\n
Please reach out using our feedback forum<\/a> or direct message me on Twitter<\/a> or GitHub<\/a>. <\/p>\n
And if you haven\u2019t seen those already, we started a series of 1 minute videos<\/a> to answer the most common questions <\/p>\n
Finally, don\u2019t forget about .NET Conf: Focus on Xamarin<\/a> \u2013 tune in on Monday March 23rd<\/b> to learn more about Xamarin and its dual-screen support.<\/p>\n
\".NET<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Xamarin developers can build and test dual-screen apps for the Surface Duo, using the available emulator and SDKs available via NuGet. The hinge angle and display mask can be queried to adapt your screen layouts, and there is a TwoPaneView Xamarin.Forms control that helps build responsive app designs that work on all device types.<\/p>\n","protected":false},"author":570,"featured_media":263,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,46,45,181,182],"class_list":["post-162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-surface-duo","tag-surface-duo-sdk","tag-xamarin","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
Xamarin developers can build and test dual-screen apps for the Surface Duo, using the available emulator and SDKs available via NuGet. The hinge angle and display mask can be queried to adapt your screen layouts, and there is a TwoPaneView Xamarin.Forms control that helps build responsive app designs that work on all device types.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/162","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=162"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/263"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}