{"id":517,"date":"2020-07-09T10:24:42","date_gmt":"2020-07-09T17:24:42","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=517"},"modified":"2022-05-26T10:48:30","modified_gmt":"2022-05-26T17:48:30","slug":"new-microsoft-surface-duo-app-samples","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/new-microsoft-surface-duo-app-samples\/","title":{"rendered":"New Microsoft Surface Duo app samples"},"content":{"rendered":"

Hello\u00a0Microsoft\u00a0Surface Duo developers!<\/p>\n

Kristen and I are interns on the Surface Duo Developer Experience team, and we\u2019re excited to announce two new Microsoft Surface Duo dual-screen samples available that embody some of our dual-screen UX patterns<\/a>. You can find them on GitHub at github.com\/microsoft\/surface-duo-app-samples<\/a>.<\/p>\n

Photo Editor<\/h2>\n

As the name suggests, this sample is a simple photo editing app<\/a>. It demonstrates the companion pane UX pattern<\/a> and how to take advantage of drag and drop<\/a> on dual screens.<\/p>\n

The Photo Editor app lets users perform three main actions:<\/p>\n

Select<\/h3>\n

Although the application provides a default image, users can also import other photos for editing. Click on the currently displayed image to select a new image from the device\u2019s photo gallery, or just drag and drop an image file over the currently displayed image (Figure 1).<\/p>\n

\"Importing<\/p>\n

Figure 1. Importing an image through drag and drop<\/em><\/p>\n

Edit<\/h3>\n

A variety of controls are available to edit image properties, such as brightness, saturation, and warmth. As is characteristic of the Companion Pane<\/a> pattern, the number of visible controls increases when the app is spanned across both screens (see Figures 1 and 2).<\/p>\n

\"Dual-screen<\/p>\n

Figure 2. Dual-screen view of app (portrait)<\/em><\/p>\n

Save<\/h3>\n

To save any changes made, click the Save <\/strong>button and a copy of the edited image will be saved to the device\u2019s photo gallery (Figure 3).<\/p>\n

\"Dual-screen<\/p>\n

Figure 3. Dual-screen view of app (landscape)<\/em><\/p>\n

Source Editor<\/h2>\n

This source editor sample<\/a> features an HTML editor and formatter that enable real-time editing and previewing of formatted source code. Making use of the DualView<\/a> app pattern, users can quickly test out code ideas in a variety of orientation configurations. To save and access code changes, the app supports file saving, loading, and drag-and-drop features.<\/p>\n

Single-screen view<\/h3>\n

In single screen mode, users can switch back and forth between code and preview mode. On the other screen, they can make use of other applications or windows like developer forums. Using buttons within the application, transitions can be triggered to switch between views (Figure 4).<\/p>\n

\"Single-screen<\/p>\n

Figure 4. Single-screen preview view (portrait)<\/em><\/p>\n

Dual-screen view<\/h3>\n

The app highlights the possibilities of developing for dual-screen devices and demonstrates the view using Surface Duo in dual-screen mode. Both screens are visible, so the UI is free of extra buttons. When using ViewModels<\/a> and LiveData<\/a> to communicate between fragments<\/a> (the individual views), real-time preview updates and mirrored scrolling are enabled (Figure 5).<\/p>\n

\"Demonstration<\/p>\n

Figure 5. Demonstration of DualView app pattern (portrait)<\/em><\/p>\n

Orientation and layout configurations<\/h3>\n

In addition to spanning changes in the app, rotation changes also enable increased usability. One particularly helpful feature is editing code in dual-screen portrait mode. With the keyboard on one screen and the editor on the other, the user\u2019s experience becomes like that of a laptop (Figure 6).<\/p>\n

\"Editor<\/p>\n

Figure 6. Editor view with keyboard companion (landscape)<\/em><\/p>\n

You can read more about keyboard insets in this blog post<\/a>.<\/p>\n

Feedback<\/h2>\n

We hope these new samples are useful and help you visualize some of the common UX patterns that are possible on dual-screen devices like the Surface Duo.<\/p>\n

We\u2019d love to hear from you! Please leave us feedback\u00a0or just share your testing tips\u00a0using\u00a0our\u00a0feedback forum<\/a>,\u00a0or message us on\u00a0Twitter<\/a>, Github (Parker)<\/a>, or Github (Kristen)<\/a>.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Hello\u00a0Microsoft\u00a0Surface Duo developers! Kristen and I are interns on the Surface Duo Developer Experience team, and we\u2019re excited to announce two new Microsoft Surface Duo dual-screen samples available that embody some of our dual-screen UX patterns. You can find them on GitHub at github.com\/microsoft\/surface-duo-app-samples. Photo Editor As the name suggests, this sample is a simple […]<\/p>\n","protected":false},"author":90683,"featured_media":519,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[472,46],"class_list":["post-517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-sample","tag-surface-duo"],"acf":[],"blog_post_summary":"

Hello\u00a0Microsoft\u00a0Surface Duo developers! Kristen and I are interns on the Surface Duo Developer Experience team, and we\u2019re excited to announce two new Microsoft Surface Duo dual-screen samples available that embody some of our dual-screen UX patterns. You can find them on GitHub at github.com\/microsoft\/surface-duo-app-samples. Photo Editor As the name suggests, this sample is a simple […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/517","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\/90683"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/519"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}