開発者にとっての Surface Dial :実装編
サンプルは前回の通りこれ:Surface Dial interactions Surface Dial 実装まとめ (PDF)
ダイアルのコントローラー
取得方法:これがすべてのスタート
var Controller = RadialController.CreateForCurrentView();
デフォルトのメニュー
(オフスクリーン=通常机に置いてDialを使っているときの状態)
メニューの取得:Controller.Menu
■標準メニュー項目の変更の仕方
標準の項目は、Configuration オブジェクトを使って操作する。SetDefaultMenuItems は配列で指定。
config = RadialControllerConfiguration.GetForCurrentView();
config.SetDefaultMenuItems(new[] { RadialControllerSystemMenuItemKind.Volume, RadialControllerSystemMenuItemKind.Scroll });
標準ボタンで使えるのは、ズーム、音量、スクロール、Undo/Redoの4種類。(NextPreviousTrack があるが設定しても表示されない)
■ 標準メニューの消し方
そのままだと、標準の項目が消えないため、Configuration オブジェクトを使って標準項目を操作する。消すためには標準メニューとしてEmptyを設定する。
var config = RadialControllerConfiguration.GetForCurrentView();
config.SetDefaultMenuItems(Enumerable.Empty<RadialControllerSystemMenuItemKind>());
なお、何もメニュー項目を追加していない状態では、標準メニューを消してメニューが無くなる状況を避けるために、処理が行われない。そのため、標準メニューを消すためには、①独自メニュー項目を追加 ②標準メニューを削除、の順で行わなければならない。そしてすべてのメニュー項目がなくなった場合は標準メニューが復活する。
メニュー項目
:RadialContollerMenuItem=赤い部分一つ分
■ 作成方法:この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)
{
:
}
■ メニューへの追加と削除
追加: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;