Surface Windows

Simulate the Surface Dial

The Surface Dial, and the RadialController API provide an interesting new input metaphor. You may have some ideas of how you could use it but don’t actually have the hardware. Since I tried creating an Etch-a-Sketch app using the dial I was thinking about how to implement a second dial.

Most of us already have a mouse with a central wheel. I decided that for the purposes of prototyping apps for the dial, or to implement a second dial-like device I could create an API around that wheel. There are a few limitations but the basic functionality is the same. The SimulatedRadialController class was born and after a few tweaks to adjust for the fact the mouse wheel reports movement in large steps (30 degrees in my testing) so I reduced this down to perform smaller movements.

The control is packaged up with NuGet. The code to use it is essentially the same as the code for the built in RadialController, the main difference being the lack of a Menu to support multiple tools. You hook up the events:-

c = SimulatedRadialController.CreateForCurrentView();
c.RotationChanged += C_RotationChanged;
c.ButtonClicked += C_ButtonClicked;

The rotation event just changes the angle of a RotateTransform on a UI element:-

private void C_RotationChanged(SimulatedRadialController sender, SimulatedRadialControllerRotationChangedEventArgs args)
        WheelTransform.Angle += args.RotationDeltaInDegrees;

I plan to add this to the previous Etch-a-Sketch sample app to provide both horizontal and vertical controls using the Dial and mouse wheel as left and right controls.


Code Surface Windows 10

Building an Etch-a-Sketch with Surface Dial

Microsoft have demonstrated how the Surface Dial can be used in conjunction with Pen input for drawing, but what about drawing with the Dial itself?

For those of us with warm memories of the Etch-a-Sketch I thought it would be fun to replicate the experience with the Surface Dial. Now of course there is a big caveat – you only have a single Dial to use at a time. This can be worked around by using the Click functionality of the Dial – Tapping the top of the dial switches between horizontal and vertical drawing.

The code to achieve this is very simple, and I’ve pasted it in a Gist here:-

<AppBarButton Icon="Clear" Label="Clear" Click="ClearButton_Click"/>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<InkCanvas x:Name="SketchCanvas" />
<Ellipse x:Name="Pointer" Width="4" Height="4" Fill="Black"/>

view raw
hosted with ❤ by GitHub

using System;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Input;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace DialASketch
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
private RadialController Controller;
private RadialControllerMenuItem MenuItem;
private bool isHorizontal = true;
InkStrokeBuilder b = new InkStrokeBuilder();
private Point lastPoint;
public MainPage()
SketchCanvas.SizeChanged += SketchCanvas_SizeChanged;
Controller = RadialController.CreateForCurrentView();
Controller.RotationResolutionInDegrees = 2;
Controller.RotationChanged += Controller_RotationChanged;
Controller.ButtonClicked += Controller_ButtonClicked;
MenuItem = RadialControllerMenuItem.CreateFromKnownIcon("DialASketch", RadialControllerMenuKnownIcon.PenType);
private void SketchCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
if (e.NewSize.Width > 0)
if (lastPoint.X == 0f)
lastPoint = new Windows.Foundation.Point { X = SketchCanvas.ActualWidth / 2, Y = SketchCanvas.ActualHeight / 2 };
Canvas.SetLeft(Pointer, lastPoint.X 2);
Canvas.SetTop(Pointer, lastPoint.Y 2);
protected override void OnNavigatedFrom(NavigationEventArgs e)
private void Controller_ButtonClicked(RadialController sender, RadialControllerButtonClickedEventArgs args)
// switch direction (since we only have one dial)
isHorizontal = !isHorizontal;
private void Controller_RotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
var delta = args.RotationDeltaInDegrees * 4;
Point newPoint = new Windows.Foundation.Point { X = isHorizontal ? Math.Min(Math.Max(lastPoint.X + delta, 0), SketchCanvas.ActualWidth) : lastPoint.X, Y = !isHorizontal ? Math.Min(Math.Max(lastPoint.Y delta, 0), SketchCanvas.ActualHeight) : lastPoint.Y };
Canvas.SetLeft(Pointer, newPoint.X 2);
Canvas.SetTop(Pointer, newPoint.Y 2);
var stroke = b.CreateStroke(new List<Point> { lastPoint, newPoint });
lastPoint = newPoint;
stroke.DrawingAttributes.Color = Colors.Black;
stroke.DrawingAttributes.PenTip = PenTipShape.Circle;
private void ClearButton_Click(object sender, RoutedEventArgs e)
lastPoint = new Windows.Foundation.Point { X = SketchCanvas.ActualWidth / 2, Y = SketchCanvas.ActualHeight / 2 };
Canvas.SetLeft(Pointer, lastPoint.X 2);
Canvas.SetTop(Pointer, lastPoint.Y 2);

view raw
hosted with ❤ by GitHub

You could extend this to support keyboard input too as at the moment the app will do nothing if you don’t have a Dial setup on the PC. The output is created using the InkCanvas control along with a small Ellipse to show the current location:-



Ordering the Surface Pro 4 Docking Station Adapter

If you have a Surface Pro 3 Docking Station and want to use it with Surface Pro 4 you’ll probably have heard that you need an adaptor – a thin sheet of plastic which it seems is as elusive as hens teeth. You’ve possibly read the instructions here and here is the rest of the process:-

Once you’ve selected “Replace an accessory” you’ll need to pick your device. Assuming you’ve already registered you just have to click on your Surface Pro 4 here. Then you’ll see choices for categories “Pens and Loops”, “Docking Station”, “Other”. You’ll need to select Docking Station and you may get a popup asking you to enter a product number. Of course you don’t have a product number for a product you don’t have so don’t panic. When you select that you don’t have a product number ignore the warnings that your product will be considered out of warranty. What should happen on the next screen is that only one product is available which is the adapter at an extravagant £0.00. You’ll also have to pay postage – for the UK this is £4 (+VAT). There is a drop down box for shipping type but this has only a single choice “No Action Required”, enter your shipping details and proceed to pay.

I guess £4 is the “price of inaction” 🙂