How to develop Surface Dial

Sample is here：Surface Dial interactions

Summary

surface dial development (PDF)

Controller object for Surface Dial

How to get this object

　　var Controller = RadialController.CreateForCurrentView();

Default Menu

  This is off screen mode that mean using Dial on the desk not on the screen.

You can get menu object from Controller object：Controller.Menu

 

■ How to change default menu item

You can change default menu items via RadialControllerConfiguration Object. you can set default menu items with list .

config = RadialControllerConfiguration.GetForCurrentView();
config.SetDefaultMenuItems(new[] { RadialControllerSystemMenuItemKind.Volume,  RadialControllerSystemMenuItemKind.Scroll });

 

■ Erase all default menu.

You can erase all default menu items via RadialControllerConfiguration Object. You can use Empty object for this.

var config = RadialControllerConfiguration.GetForCurrentView();
config.SetDefaultMenuItems(Enumerable.Empty<RadialControllerSystemMenuItemKind>());

But, you may not erase all default menu item, because system avoid status of no menu item. So if you need to erase all default items, you have to add original menu item (see bellow) first, and erase all default menu item. And if you remove all original menu items, default menu is appear again.

 

MenuItem

：RadialContollerMenuItem  :  red Area.

■ How to make this Menu item:：There are just only 2 ways.

Case 1 ： Make menu item from default Icons.

RadialControllerMenuItem item =
RadialControllerMenuItem.CreateFromKnownIcon(“name of this item”, RadialControllerMenuKnownIcon.InkColor)

Case 2：Create menu item form image file.

RadialControllerMenuItem item =
RadialControllerMenuItem.CreateFromIcon(“name of this item”, RandomAccessStreamReference.CreateFromUri(new Uri(“ms-appx:///Assets/Item3.png”)))

 

■ Event handler for menu item

No argument

radialControllerItem.Invoked += RadialControllerItem_Invoked;
private void RadialControllerItem_Invoked(RadialControllerMenuItem sender, object args)
{
：
}

With argument

radialControllerItem.Invoked += (sender, args) => { OnItemInvoked(index); };
private void OnItemInvoked(int selectedItemIndex)
{
：
}

 

■How to Add or remove menu item

Add : Controller.Menu.Items.Add(item);

Remove : Contoller.Meny.Items.Remove(item);

 

 

■ Event for menu items

Show Menu (Click and hold) : Controller.ControlLost += Controller_ControlLost;
= It mean that you lost selected menu item.

Close Menu (Select Menu Item) : Controller.ControlAcquired += Controller_ControlAcquired;
= You already selected one of menu items.

  if you use special menu UI element on screen for selected item, you can do in this event. 

 

How to get Selected menu Item.

■ How to get selected menu item : GetSelectedMenuItem();

RadialControllerMenuItem selected = Controller.Menu.GetSelectedMenuItem();

■ How to get display name of selected menu item.

selected.DislpayText

 

 

Dialing

Event for rotating Dial : RotationChanged

Controller.RotationChanged += Controller_RotationChanged;

 

Count of rotating Dial  : RotationResolutionInDegrees

Controller.RotationResolutionInDegrees = 1;

 

Difference of Angle you rotate Dial : args.RotationDeltaInDegrees;

private void Controller_RotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
{

　　sliders.Value += args.RotationDeltaInDegrees;
}

 

Clicking

Event for Clicking Dial Button : ButtonClicked

Controller.ButtonClicked += Controller_ButtonClicked;