{"id":2113,"date":"2022-01-06T12:00:23","date_gmt":"2022-01-06T20:00:23","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2113"},"modified":"2021-12-23T11:15:03","modified_gmt":"2021-12-23T19:15:03","slug":"happy-new-year-2022","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/happy-new-year-2022\/","title":{"rendered":"Happy Two Year"},"content":{"rendered":"

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

\n Welcome to 2022 \u2013 a great year to be developing for two screens! To kick off the new year we\u2019re going to do a quick recap of all the two screen enhanced components \u2013 across developer platforms \u2013 that can help you get started quickly with dual-screen and foldable support, while also providing great single-screen experiences on phones or larger-screen devices.\n<\/p>\n

Two screen native controls<\/h2>\n

\n Among our rich library of dual-screen controls, the FoldableLayout component<\/a> provides an easy way for Kotlin and Java developers to build an adaptive user interface without having to write a lot of custom code. You can find both simple samples<\/a> and a real-world app example<\/a> on GitHub.\n<\/p>\n

\n \n<\/p>\n

TwoPaneLayout for Jetpack Compose<\/h2>\n

\n Jetpack Compose developers can add the Microsoft TwoPaneLayout<\/a> to their apps. There are many code examples in our Jetpack Compose Samples GitHub repo<\/a>, including simple guidance as well as the NavigationRail demo which combines a number of components into a well-designed dual-screen user experience:\n<\/p>\n

\"A\n<\/p>\n

TwoPane widget for Flutter<\/h2>\n

\n Flutter developers can try out the TwoPane widget<\/a> that the developer experience team is working on. Follow these instructions<\/a> to set up your Flutter project for dual-screen support.\n<\/p>\n

\"A\n<\/p>\n

TwoPaneView for .NET<\/h2>\n

Xamarin<\/a> and Uno Platform<\/a> developers both have access to the TwoPaneView component using C# and XAML.\n<\/p>\n

\n \n<\/p>\n

Two viewport segments in Edge<\/h2>\n

\n Web developers can take advantage of the viewport segments CSS media query<\/a> to build dual-screen aware layouts that work when Edge is spanned over two screens. You can view a demo online<\/a> (using browser developer tools) and try out these complete samples<\/a> which include a battleship game, a photo gallery, and a news reading experience.\n<\/p>\n

\n \"Graphical\n<\/p>\n

\n Resources and feedback\u00a0\n<\/h2>\n

\n We\u2019d love to hear about your plans for building dual-screen and fold-aware apps in 2022 \u2013 use the\u202ffeedback forum<\/a>\u202for message us on Twitter\u202f@surfaceduodev<\/a>.\u202f\n<\/p>\n

\n Finally, please join us for our\u00a0dual screen developer livestream<\/a>\u00a0at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the\u00a0archives on YouTube<\/a>.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello developers! Welcome to 2022 \u2013 a great year to be developing for two screens! To kick off the new year we\u2019re going to do a quick recap of all the two screen enhanced components \u2013 across developer platforms \u2013 that can help you get started quickly with dual-screen and foldable support, while also providing […]<\/p>\n","protected":false},"author":570,"featured_media":2121,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[693,692,706,473],"class_list":["post-2113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-flutter","tag-jetpack-compose","tag-jetpack-window-manager","tag-kotlin"],"acf":[],"blog_post_summary":"

Hello developers! Welcome to 2022 \u2013 a great year to be developing for two screens! To kick off the new year we\u2019re going to do a quick recap of all the two screen enhanced components \u2013 across developer platforms \u2013 that can help you get started quickly with dual-screen and foldable support, while also providing […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2113","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=2113"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2121"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}