UWPでのSurface Dial 実装方法

UWPでの実装は最も簡単に行うことが出来る。

Surface Dial 実装まとめ (PDF)

ダイアルのコントローラー

取得方法:これがすべてのスタート

  var Controller = RadialController.CreateForCurrentView();

デフォルトのメニュー

(オフスクリーン=通常机に置いてDialを使っているときの状態)

Surface Dial off-screen menu

メニューの取得:Controller.Menu

 

■標準メニュー項目の変更の仕方

標準の項目は、Configuration オブジェクトを使って操作する。SetDefaultMenuItems は配列で指定。

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

defmenu

標準ボタンで使えるのは、ズーム、音量、スクロール、Undo/Redoの4種類。(NextPreviousTrack があるが設定しても表示されない)

 

■ 標準メニューの消し方

そのままだと、標準の項目が消えないため、Configuration オブジェクトを使って標準項目を操作する。消すためには標準メニューとしてEmptyを設定する。

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

なお、何もメニュー項目を追加していない状態では、標準メニューを消してメニューが無くなる状況を避けるために、処理が行われない。そのため、標準メニューを消すためには、①独自メニュー項目を追加 ②標準メニューを削除、の順で行わなければならない。そしてすべてのメニュー項目がなくなった場合は標準メニューが復活する。

 

メニュー項目

:RadialContollerMenuItem=赤い部分一つ分

dialitem

■ 作成方法:この2パターンだけ

その1:用意されているアイコンから作る

RadialControllerMenuItem item = RadialControllerMenuItem.CreateFromKnownIcon(
"アイテム名",  RadialControllerMenuKnownIcon.InkColor);

その2:アイコン画像から作る

RadialControllerMenuItem item = RadialControllerMenuItem.CreateFromIcon(
"アイテム名",  RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Item3.png")));

 

■ メニュー項目が選択された時のイベントハンドラ

引数無し

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

}

引数付き

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

}

 

■ メニューへの追加と削除

dialitem

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

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

 

 

■ メニュー項目関連のイベント

Dial を長押ししてメニューを表示したとき:Controller.ControlLost += Controller_ControlLost;
=メニューの表示=メニューのうち一つを選択している状態が解除された

Dial のメニューから1つを選択した時:Controller.ControlAcquired += Controller_ControlAcquired;
=この時点でどれかの項目が選択されている

 操作用のオリジナルメニューなどを画面に表示する場合はこのタイミングで表示する。勿論なくてもOK。

 

選択されているニュー項目

■  選択されているメニュー項目の取得:GetSelectedMenuItem();

RadialControllerMenuItem selected = Controller.Menu.GetSelectedMenuItem();

■ メニュー項目の表示名の取得

selected.DislpayText

 

 

ダイアルの回転操作

Dial を回したときのイベント:RotationChanged

Controller.RotationChanged += Controller_RotationChanged;

 

Dial を回したときの数値の変化数:RotationResolutionInDegrees

Controller.RotationResolutionInDegrees = 1;

 

イベントハンドリング時の Dial の回転角の変化数:args.RotationDeltaInDegrees;

private void Controller_RotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
{

  sliders.Value += args.RotationDeltaInDegrees;
}

 

ダイアルのクリック操作

Dial をクリックしたときのイベント:ButtonClicked

Controller.ButtonClicked += Controller_ButtonClicked;