For those new to Uno Platform, it allows for creation of pixel-perfect, single-source C# and XAML apps which run natively on Windows, iOS, Android, macOS, Linux, and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and\u00a0available on GitHub<\/a>.<\/p>\n In this blog post you will learn how to: <\/strong><\/p>\n Architecture of Uno Platform and Surface Duo Solution <\/strong><\/p>\n The Uno Platform philosophy is to replicate the WinUI and Windows APIs everywhere. Uno Platform support for the Surface Duo device is based on WinUI TwoPaneView control<\/a>, which is a Windows 10 specific control providing the ability to layout content in two panes. It also handles your content well on dual-screen devices. It behaves like a dual ContentControl<\/a> based on a set of parameters such as Pane length, tall and wide configuration modes and pane priorities to display content based on the available window space. It can be useful when dealing with orientation changes, in windowed modes, or snap\/split screen scenarios.<\/p>\n For this exercise, we are building a sample from scratch, so let\u2019s start from the beginning and follow the steps below to get started:<\/p>\n Once you have completed the above steps, you will be able to modify the content of your MainPage.xaml<\/b>:<\/p>\n Select Android as the start-up project in Visual Studio, then run your sample on the Surface Duo Emulator.<\/p>\n Figure 2: DualScreen sample running on Android on the Surface Duo Emulator<\/em><\/p>\n As you can see in this code snippet, you need to set a Star GridLength<\/a> ( The PanePriority<\/a> sets which pane will be displayed when SinglePane<\/a> mode is set (for TallModeConfiguration<\/a> in this example).\nFor WideModeConfiguration<\/a>, the LeftRight<\/a> is used for Pane1<\/a> to have priority and be shown on the left. The Pane2 is shown on the right.<\/p>\n The complete sample is available on GitHub<\/a>.<\/p>\n If you also want to test your sample on UWP \/ WinUI:<\/p>\n Now let\u2019s do something more fun! I was really inspired by Justin Liu\u2019s Surface Duo demo app<\/a> which used Flutter. I wanted to see if I would be able to do the same with Uno Platform, so I re-created this car animation sample<\/a> .<\/p>\n I was very happy to be able to reproduce the demo easily for the Surface Duo. Best of all, it was also running on other platforms Uno Platform supports without requiring any platform-specific code.<\/p>\n Figure 3: ToyCar sample running on Windows, WebAssembly, iOS and Android on the Surface Duo Emulator<\/em><\/p>\n But what if instead of moving the car with a mouse or a finger, we could move the car depending on the hinge angle value?<\/p>\n The hinge is unique for dual-screen devices and learning how to work with it based on the angle of two screens, is essential for creating unique user experiences on Surface devices. In a previous blog post<\/a>, Cesar mentioned how to adjust the hinge angle in the Surface Duo emulator. Today, I\u2019m going to show you how to take advantage of this feature using my car animation sample.<\/p>\n But first, a quick overview of how I implemented this cool concept. I have a toy car image on the left pane and a sketch car image on the right pane. The technique here is to have a transparent rectangle (same size as the car images) on top of the TwoPaneView control. This way it is possible to use the pointers ManipulationDelta event<\/a> to move and to keep both cars at the same position. This gives the illusion of a car transformation.<\/p>\n Figure 4: Car transformation close-up on Android on the Surface Duo Emulator<\/em><\/p>\n Now let\u2019s try to move and animate the cars with the hinge angle.<\/p>\n On UWP \/ WinUI, we can use the Windows.Devices.Sensors.HingeAngleSensor API<\/a> to be notified when the hinge\u2019s angle changes. The HingeAngleReading.AngleInDegrees property<\/a> gives us the hinge\u2019s current angle in degrees.<\/p>\n With Uno Platform, you don\u2019t need to worry that the Surface Duo runs Android and the fact that the API<\/a> for the hinge sensor is different. Your UWP \/ WinUI implementation will just work on Android with no platform-specific code required!<\/p>\n In the code-behind I can simply have:<\/p>\n I used HingeAngleSensor.GetDefaultAsync<\/a> to asynchronously retrieve the default hinge angle. If the hinge is available, I subscribe to the HingeAngleSensor ReadingChanged event<\/a>.<\/p>\n If the angle is equal to 180 degrees (meaning the device is half opened), the car is moved to the middle of the device.<\/p>\n If the angle is equal to 360 degrees (meaning that both screens are facing away from each other and the device is fully opened), the car is moved to the right side of the device. The car animation and background scene animation will start at the same time.<\/p>\n Figure 5: Car animation while changing the hinge angle on Android on the Surface Duo Emulator<\/em><\/p>\n The complete sample is available on GitHub<\/a>.<\/p>\n Additional code sample from OSS real-world implementation<\/strong><\/p>\n Uno Platform community member\u00a0Ian Bebbington<\/a>\u00a0has put together an app called COduo<\/em> to help users in the UK understand the environmental impact of their energy usage. The app is available on Google Play<\/a> and Windows<\/a>. The complete solution is available on GitHub<\/a>.<\/p>\n Figure 6: COduo on Android on Surface Duo Emulator with Uno Platform<\/em><\/p>\n If you already have a UWP\/ WinUI application, try porting your current C# code base on multiple platforms, including Surface Duo, with Uno Platform. Or just for fun, start a new multi-platform project targeting Surface Duo. I\u2019m sure you will find our platform valuable.<\/p>\n You will be able to use the UWP\/WinUI tooling from Windows in Visual Studio<\/a>, such as XAML Hot Reload<\/a> and C# Edit and Continue<\/a>, build your application as much as possible on Windows, then validate that your application runs on every platform supported by Uno Platform, including Android, on Surface Duo. You can develop Uno Platform applications on Visual Studio and Windows like I did above, but also use Visual Studio for Mac<\/a> or Visual Studio Code<\/a>.<\/p>\n If you have questions, feature requests, or issues about using Uno Platform, you can find our engineering team on Discord – Channel #uno-platform<\/a>. You can also find us on Twitter<\/a>.<\/p>\n Finally, reach out to the Surface Duo team using their feedback forum<\/a> or on Twitter<\/a> or GitHub<\/a> with your feedback regarding your experience with the Surface Duo.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello Microsoft Surface Duo developers! Today\u2019s post was contributed by Nventive, the publishers of the Uno Platform. In previous blog posts, the Surface Duo team demonstrated how you can build dual-screen apps using Java and Kotlin, Xamarin and C#, Flutter, React Native, Web, and games with Unity. Today\u2019s blog post shows how UWP and WinUI […]<\/p>\n","protected":false},"author":40869,"featured_media":879,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,695,696,697],"class_list":["post-872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-uno-platform","tag-uwp","tag-winui"],"acf":[],"blog_post_summary":" Hello Microsoft Surface Duo developers! Today\u2019s post was contributed by Nventive, the publishers of the Uno Platform. In previous blog posts, the Surface Duo team demonstrated how you can build dual-screen apps using Java and Kotlin, Xamarin and C#, Flutter, React Native, Web, and games with Unity. Today\u2019s blog post shows how UWP and WinUI […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/872","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\/40869"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=872"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/879"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Car](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-3.gif\")
\nFigure 1: Car animation on Android on the Surface Duo Emulator with Uno Platform<\/em><\/p>\n\n
Getting started with Surface Duo and Uno Platform\n<\/strong><\/h2>\n
\n
\n
![\"Manage](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-9.png\")
<\/li>\n<\/ol>\n<\/li>\n![\"Start](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-10.png\")
<\/li>\n<\/ol>\n<Page x:Class=\"DualScreenSample.MainPage\"\r\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\r\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\r\n xmlns:local=\"using:DualScreenSample\"\r\n xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\r\n xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\r\n xmlns:muxc=\"using:Microsoft.UI.Xaml.Controls\"\r\n mc:Ignorable=\"d\">\r\n \r\n <Grid>\r\n <muxc:TwoPaneView Pane1Length=\"*\"\r\n Pane2Length=\"*\"\r\n PanePriority=\"Pane1\"\r\n WideModeConfiguration=\"LeftRight\"\r\n TallModeConfiguration=\"SinglePane\">\r\n <muxc:TwoPaneView.Resources>\r\n <Style TargetType=\"TextBlock\">\r\n <Setter Property=\"FontSize\"\r\n Value=\"24\" \/>\r\n <\/Style>\r\n <\/muxc:TwoPaneView.Resources>\r\n <muxc:TwoPaneView.Pane1>\r\n <Grid Background=\"#FF159BFF\">\r\n <StackPanel VerticalAlignment=\"Center\"\r\n HorizontalAlignment=\"Center\">\r\n <TextBlock Text=\"Pane 1\" \/>\r\n <TextBlock Text=\"Priority pane for TallModeConfiguration\" \/>\r\n <TextBlock Text=\"Left pane for WideModeConfiguration\" \/>\r\n <\/StackPanel>\r\n <\/Grid>\r\n <\/muxc:TwoPaneView.Pane1>\r\n \r\n <muxc:TwoPaneView.Pane2>\r\n <Grid Background=\"#FF67E5AD\">\r\n <StackPanel VerticalAlignment=\"Center\"\r\n HorizontalAlignment=\"Center\">\r\n <TextBlock Text=\"Pane 2\" \/>\r\n <TextBlock Text=\"Not the priority pane for TallModeConfiguration\" \/>\r\n <TextBlock Text=\"Right pane for WideModeConfiguration\" \/>\r\n <\/StackPanel>\r\n <\/Grid>\r\n <\/muxc:TwoPaneView.Pane2>\r\n <\/muxc:TwoPaneView>\r\n <\/Grid>\r\n<\/Page><\/pre>\n
![\"Start](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-11.png\")
<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-12.png\")
<\/p>\nPane1Length=\"*\"<\/code> \/ Pane2Length=\"*\"<\/code>) for the two pane to correctly take 50% for each side screens of the Surface Duo with the TwoPaneView<\/a>.<\/p>\n\n
<Application>\r\n <Application.Resources>\r\n <XamlControlsResources xmlns=\"using:Microsoft.UI.Xaml.Controls\" \/>\r\n <\/Application.Resources>\r\n<\/Application><\/pre>\n<\/li>\n
What is and how to use the hinge angle<\/h2>\n
![\"ToyCar](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-4.gif\")
<\/p>\n![\"Car](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-13.png\")
<\/p>\npublic async Task InitializeAsync()\r\n{\r\n \/\/Asynchronously retrieves the default hinge angle sensor.\r\n hinge = await HingeAngleSensor.GetDefaultAsync();\r\n \r\n if (hinge != null)\r\n {\r\n SensorStatus.Content = \"HingeAngleSensor created\";\r\n \r\n \/\/Listener for the HingeAngleSensor ReadingChanged event.\r\n hinge.ReadingChanged += HingeAngleSensor_ReadingChanged;\r\n }\r\n else\r\n {\r\n SensorStatus.Content = \"HingeAngleSensor not available on this device\";\r\n AngleValue.Content = \"Angle value: Not available\";\r\n }\r\n}\r\nprivate async void HingeAngleSensor_ReadingChanged(HingeAngleSensor sender, HingeAngleSensorReadingChangedEventArgs args)\r\n{\r\n await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>\r\n {\r\n var angleValue = args.Reading.AngleInDegrees;\r\n \r\n AngleValue.Content = \"Angle value: \" + angleValue.ToString();\r\n \r\n \/\/ When the dual-screen device is half-opened\r\n if (angleValue == 180)\r\n {\r\n \/\/ Move the car along the x-axis in the middle of the screen.\r\n dragTranslation.X = (MainRoot.ActualWidth \/ 2);\r\n }\r\n \/\/ When the dual-screen device is fully opened, meaning that both screens are facing aware from each other.\r\n else if (angleValue == 360)\r\n {\r\n \/\/ Move the car along the x-axis on the right side of the screen.\r\n dragTranslation.X = MainRoot.ActualWidth * rightSideThresholdRatio;\r\n }\r\n });\r\n}<\/pre>\n![\"Car](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-5.gif\")
<\/p>\n![\"COduo](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/09\/word-image-14.png\")
<\/p>\nAdditional resources and feedback<\/h2>\n