If the user is asked to select from a large number of options (like a font list), you can use a “long list selector” instead. In addition to those features, we sprinkled in some special features to enable cool scenarios – most notably around the submenus accessible by clicking on the outer rim of a button. The button itself can either be a simple one, behaving just like a normal XAML button – but it can also be a toggle or radio button, capable of being either selected or unselected. Each button is capable of being a host for a submenu, which can be opened by clicking on the outer rim. Those pience are decorated with icons, labels, and colors for various pointer states.īeyond a simple button, we have the various ways users can interact with the primary portion. The inner portion contains the primary action, while the outer rim opens up additional options to configure the primary action. Each button contains two clickable pieces: A rim on the outside and an inner part. Let’s take a quick look at the feature list, starting with the pieces that make up the control: In the middle, we have a center button, which is surrounded by a variable number of buttons. In particular, the shortcomings included frequent crashes, suspected memory leaks, lack of flexibility in usage, unavailability of source code, and a restrictive license. While the experience is great, Drawboard outgrew the control purchased from a third party provider – it wasn’t as flexible or powerful as needed for future features while also consuming too many resources. Interactions, like the selection of various digital markers or pens, happen on a radial menu control, which the user can drag around the screen and position wherever it is convenient.
To provide a good user experience, the app uses as much screen real estate as possible for the actual PDF currently displayed.
Built in beautiful Melbourne by a small startup, the Drawboard app provides such great value that it is preinstalled on new Surface devices including Surface Hub, Surface Pro and Surface Book. Replacing dozens of gigantic printouts with a Surface and its stylus is a dramatic leap towards mobility. It’s a true game changer for professionals who spend a lot of their time scribbling on large documents – the typical example being a civil engineer confronted with hundreds of ever-changing building plans. It first explains the features before guiding you through building a small “Hello Radial Control” app.įor those uninitiated, Drawboard is a powerful PDF Annotation app that can be currently found on Surface devices.
This code story describes how we built the control – and how your app can benefit from the open source code that will be preinstalled on Surface devices.
In preparation for the launch of the new Surface Book, the Surface Pro 4 as well as the Surface Hub, we built and open sourced a powerful radial control for XAML/C# Universal Windows Apps together with the popular PDF Reader and Annotation app Drawboard. One popular solution is a flexible radial control, which the user can drag around on-screen, providing as little or as much interaction as the user wants. The most popular apps in those fields tend to have user interfaces that collapse or even disappear entirely. For presentation-heavy applications dealing with notes, images, or documents, being as unobtrusive as possible has always been an important mantra. User interfaces should not stand between user and content – a known golden rule that can be difficult to implement.