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:-


Code Windows Xamarin

Build Charming Apps v9.0 Preview

With the impending release of Windows 10 I set about updating the Charming Apps libraries to support UWP targets and it soon became painfully clear that things had got too complicated. There was a separate dll for each small area of functionality and various dependencies and 17 NuGet packages to manage (each with multiple platforms).

Version 9 is a reboot of the project and currently consists of just two packages – InTheHand.dll and InTheHand.UI.dll. The first of these is now live on NuGet in preview form and replaces a number of old libraries and adds new stuff! During the MVP Summit I was able to spend the Hackathon rebuilding my development environment and refactoring the entire solution.

The API follows the UWP model where possible, making it familiar to Windows developers while extending both backwards to prior Windows versions and also sideways to Xamarin platforms. Also new in Version 9 is a PCL build which allows you to call the shared functionality from a PCL with the functionality itself provided by the platform specific dll in the consuming application. This is useful in scenarios such as Xamarin Forms projects.

For example InTheHand.ApplicationModel.Package provides a mechanism to query the current application package for name/version etc. This is the sort of information you might need for a custom About page or to pass to analytics etc. The InTheHand.ApplicationModel.DataTransfer namespace contains Clipboard and Sharing functionality which now supports Android and iOS too invoking the native experiences in each. The remainder of the InTheHand.ApplicationModel namespaces allow you to kick off a number of tasks such as SMS, Email etc. Other namespaces exist for querying display properties and battery state.

All the code is on GitHub and a very rudimentary version of documentation is in the project Wiki. Most of the documentation in CodePlex still applies too and will be migrated in due course.

Coming in the InTheHand.UI package are InTheHand.UI.Popups (MessageDialog) and InTheHand.UI.ApplicationSettings (currently Windows platforms only) both of which have some neat Windows 10 specific tweaks.


DataContractSerializer and Internal types

Under Silverlight only public types may be serialized with the DataContractSerializer. If you want to make your data classes internal to your assembly and serialise them for use in a WCF service you will find that the service call will fail at runtime with a SecurityException inside a misleading exception about inability to communicate with the service. There is a workaround however which involves exposing your internal types to the Silverlight base class libraries with the InternalsVisibleTo attribute. Simply add the following code to your AssemblyInfo.cs file:-

  1. [assembly: InternalsVisibleTo("System.Runtime.Serialization, PublicKey=00240000048000009400000006020000002400005253413100040000010001008d56c76f9e8649383049f383c44be0ec204181822a6c31cf5eb7ef486944d032188ea1d3920763712ccb12d75fb77e9811149e6148e5d32fbaab37611c1878ddc19e20ef135d0cb2cff2bfec3d115810c3d9069638fe4be215dbf795861920e5ab6f7db2e2ceef136ac23d5dd2bf031700aec232f6c6b1c785b4305c123b37ab")]

If you use the DataContractJsonSerializer you must also add the System.Servicemodel.Web assembly (the public key is the same).


Microsoft Surface Bluetooth Connect Code Sample

APPA Mundi recently worked with the Microsoft Surface team to put together a code sample showing the exchange of information from a Surface to a nearby Bluetooth enabled phone using standard protocols. This means that any phone which supports standard Object Exchange (OBEX) protocols can receive items from the Surface without installing any client software.

The sample code is available in the MSDN Code Gallery:-

This code sample is designed for use with the Microsoft Surface 1.0 SP1 SDK and makes use of the .NET Bluetooth library binary file available from The sample code is provided "as-is" and is not supported. Alongside the standard functionality in 32feet.NET the sample illustrates using the notifications supported in the desktop Windows API and shows how to consume these from within a WPF application (the API uses native Windows messages).