Surface Dial の操作

Surface Studio とペン (Microsoft Storeで購入可能) を使用して Surface Dial を します。

概要

Surface Dial などの Windows ホイール デバイスは、Windows アプリと Windows アプリの魅力的でユニークなユーザー操作エクスペリエンスのホストを可能にする、入力デバイスの新しいカテゴリです。

Von Bedeutung

このトピックでは、特に Surface Dial の操作について説明しますが、この情報はすべての Windows ホイール デバイスに適用できます。

Surface Dial は、 回転 アクション (またはジェスチャ) に基づくフォーム ファクターを使用して、プライマリ デバイスからの入力を補完するセカンダリのマルチモーダル入力デバイスとして意図されています。 ほとんどの場合、デバイスは、ユーザーの利き手でタスクを実行している間に、ユーザーの非利き手によって操作されます (ペンによる手描き入力など)。 これは、精度の高いポインター入力 (タッチ、ペン、マウスなど) 用に設計されていません。

Surface Dial では、の 押し操作と クリック アクションの両方もサポートされます。 長押しには、コマンドのメニューを表示する機能が 1 つ含まれています。 メニューがアクティブな場合、回転とクリックの入力はメニューによって処理されます。 それ以外の場合、入力は処理のためにアプリに渡されます。

すべての Windows 入力デバイスと同様に、アプリの機能に合わせて Surface Dial の操作エクスペリエンスをカスタマイズおよび調整できます。

ヒント

Surface Dial と新しい Surface Studio を組み合わせて使用すると、さらに独特なユーザー エクスペリエンスを実現できます。

Surface Dial は、説明されている既定の長押しメニュー エクスペリエンスに加えて、Surface Studio の画面に直接配置することもできます。 これにより、特別な "画面上" メニューが有効になります。

Surface Dial の接触位置と境界の両方を検出することで、システムはこの情報を使用してデバイスによるオクルージョンを処理し、ダイヤルの外側を囲むより大きなバージョンのメニューを表示します。 この同じ情報をアプリで使用して、ユーザーの手や腕の配置など、デバイスの存在と予想される使用状況の両方に合わせて UI を調整することもできます。

Surface Dial のスクリーン外メニュー

Surface Dial の画面上のメニュー

システム統合

Surface Dial は Windows と緊密に統合されており、メニューの一連の組み込みツール (システム ボリューム、スクロール、拡大/縮小、元に戻す/やり直し) をサポートしています。

この組み込みツールのコレクションは、次を含むように現在のシステム コンテキストに適応します。

• ユーザーが Windows デスクトップを使用している場合のシステムの明るさツール
• 再生中のメディアで前のトラック/次のトラックを切り替えるツール

Surface Dial は、この一般的なプラットフォーム サポートに加えて、Windows Ink プラットフォーム コントロール (InkCanvas および InkToolbar) とも緊密に統合されています。

Surface Dial
Surface Dial と Surface ペン

Surface Dial と共に使用すると、これらのコントロールを使用すると、インク属性を変更したり、インク ツールバーのルーラー ステンシルを制御したりするための追加機能が有効になります。

インク ツール バーを使用する手描き入力アプリケーションで Surface Dial メニューを開くと、メニューにペンの種類とブラシの太さを制御するためのツールが含まれるようになりました。 ルーラーを有効にすると、対応するツールがメニューに追加され、デバイスがルーラーの位置と角度を制御できるようになります。

Surface Dialメニュー で操作する
Windows Ink ツール バーでペン選択ツールを使用する Surface Dial メニュー

Surface Dial メニュー を含む
Windows Ink ツール バーのストローク サイズ ツールを利用した Surface Dial メニュー

Windows Ink ツール バーのルーラー ツールを使用した Surface Dial メニュー

ユーザーのカスタマイズ

ユーザーは、Windows 設定 -> デバイス -> Wheel ページを通じて、ダイヤルエクスペリエンスの一部の側面をカスタマイズできます。これには、既定のツール、振動（または触覚フィードバック）、書き込み（または利き手）ハンドを設定することが含まれます。

Surface Dial ユーザー エクスペリエンスをカスタマイズする場合は、常に特定の機能または動作が使用可能であり、ユーザーによって有効になっていることを確認する必要があります。

カスタム ツール

ここでは、Surface Dial メニューで公開されているツールをカスタマイズするための UX と開発者向けガイダンスの両方について説明します。

カスタム ツールの UX ガイダンス

ツールが現在のコンテキストに対応していることを確認 するツールの動作や Surface Dial の操作のしくみを明確かつ直感的に行うと、ユーザーはすばやく学習し、タスクに集中できます。

可能な限りアプリ ツールの数を最小限に抑える
Surface Dial メニューには、7 つのアイテム用の領域があります。 項目が 8 つ以上ある場合、ユーザーはダイヤルを回してオーバーフロー ポップアップで使用できるツールを確認する必要があります。メニューの移動が困難になり、ツールの検出と選択が困難になります。

アプリまたはアプリ コンテキスト用の単一のカスタム ツールを提供することをお勧めします。 これにより、Surface Dial メニューをアクティブ化してツールを選択しなくても、ユーザーの実行内容に基づいてツールを設定できます。

ツールのコレクションを動的に更新する
Surface Dial メニュー項目は無効な状態をサポートしていないため、ユーザー コンテキスト (現在のビューまたはフォーカスされたウィンドウ) に基づいて、ツール (組み込みの既定のツールを含む) を動的に追加および削除する必要があります。 ツールが現在のアクティビティに関連しない場合、または冗長な場合は、削除します。

Von Bedeutung

メニューに項目を追加するときは、項目がまだ存在していないことを確認します。

組み込みのシステム ボリューム設定ツールを削除しない
ボリューム制御は通常、ユーザーが常に必要とします。 アプリの使用中に音楽を聴いている可能性があるため、音量ツールと次のトラック ツールには常に Surface Dial メニューからアクセスできる必要があります。 (次のトラック ツールは、メディアの再生時にメニューに自動的に追加されます)。

メニューの編成と一貫性を保つ
これにより、ユーザーはアプリを使用するときに使用できるツールを見つけて学習でき、ツールを切り替えるときの効率を向上させることができます。

組み込みのアイコンと一貫性のある高品質のアイコンを提供する
アイコンは、プロ意識と卓越性を伝え、ユーザーへの信頼を高めることができます。

• 高品質の 64 x 64 ピクセルの PNG 画像を提供します (44 x 44 は最小サポート)
• 背景が透明であることを確認する
• アイコンは画像の大部分を占めるべきです
• 白いアイコンには、ハイ コントラスト モードで表示される黒いアウトラインが必要です

アルファ背景のアイコン

既定のテーマを持つホイール メニューに表示されるアイコン

ハイコントラストホワイトテーマのでホイールメニューに表示されるアイコン

簡潔でわかりやすい名前を使用する
ツール名は、ツール アイコンと共にツール メニューに表示され、スクリーン リーダーでも使用されます。

• 名前は、ホイール メニューの中央の円の内側に収まるように短くする必要があります
• 名前は、主なアクションを明確に識別する必要があります (補完的なアクションを暗黙的に指定できます)。
  • スクロールは、両方の回転方向の効果を示します
  • 元に戻すでは主なアクションを指定しますが、再実行 (補完的なアクション) はユーザーが推論して簡単に検出できます

開発者向けガイダンス

Windows ランタイム API の包括的なセットを使用して、Surface Dial エクスペリエンスをカスタマイズして、アプリの機能を補完することができます。

前述のように、既定の Surface Dial メニューには、さまざまな基本的なシステム機能 (システムボリューム、システムの明るさ、スクロール、ズーム、元に戻す、およびシステムが進行中のオーディオまたはビデオ再生を検出したときにメディアコントロール) をカバーする一連の組み込みツールが事前に設定されています。 ただし、これらの既定のツールでは、アプリに必要な機能が提供されない場合があります。

以降のセクションでは、Surface Dial メニューにカスタム ツールを追加し、公開する組み込みツールを指定する方法について説明します。

より堅牢なバージョンのこのサンプルを RadialController カスタマイズからダウンロードします。

カスタム ツールを追加する

この例では、回転イベントとクリック イベントの両方の入力データを一部の XAML UI コントロールに渡す基本的なカスタム ツールを追加します。

1. まず、XAML で UI (スライダーとトグル ボタンのみ) を宣言します。

   
   サンプル アプリ UI

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <StackPanel x:Name="HeaderPanel" 
       Orientation="Horizontal" 
       Grid.Row="0">
         <TextBlock x:Name="Header"
           Text="RadialController customization sample"
           VerticalAlignment="Center"
           Style="{ThemeResource HeaderTextBlockStyle}"
           Margin="10,0,0,0" />
     </StackPanel>
     <StackPanel Orientation="Vertical" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Center"
       Grid.Row="1">
         <!-- Slider for rotation input -->
         <Slider x:Name="RotationSlider"
           Width="300"
           HorizontalAlignment="Left"/>
         <!-- Switch for click input -->
         <ToggleSwitch x:Name="ButtonToggle"
           HorizontalAlignment="Left"/>
     </StackPanel>
   </Grid>
   

2. 次に、分離コードで、Surface Dial メニューにカスタム ツールを追加し、 RadialController 入力ハンドラーを宣言します。

   CreateForCurrentView を呼び出して、Surface Dial (myController) の RadialController オブジェクトへの参照を取得します。

   次に、RadialControllerMenuItem.CreateFromIcon を呼び出して RadialControllerMenuItem ( myItem) のインスタンスを作成します。

   次に、その項目をメニュー項目のコレクションに追加します。

   RadialController オブジェクトの入力イベント ハンドラー (ButtonClicked と RotationChanged) を宣言します。

   最後に、イベント ハンドラーを定義します。

   public sealed partial class MainPage : Page
   {
       RadialController myController;
   
       public MainPage()
       {
           this.InitializeComponent();
           // Create a reference to the RadialController.
           myController = RadialController.CreateForCurrentView();
   
           // Create an icon for the custom tool.
           RandomAccessStreamReference icon =
             RandomAccessStreamReference.CreateFromUri(
               new Uri("ms-appx:///Assets/StoreLogo.png"));
   
           // Create a menu item for the custom tool.
           RadialControllerMenuItem myItem =
             RadialControllerMenuItem.CreateFromIcon("Sample", icon);
   
           // Add the custom tool to the RadialController menu.
           myController.Menu.Items.Add(myItem);
   
           // Declare input handlers for the RadialController.
           myController.ButtonClicked += MyController_ButtonClicked;
           myController.RotationChanged += MyController_RotationChanged;
       }
   
       // Handler for rotation input from the RadialController.
       private void MyController_RotationChanged(RadialController sender,
         RadialControllerRotationChangedEventArgs args)
       {
           if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
           {
               RotationSlider.Value = 100;
               return;
           }
           else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
           {
               RotationSlider.Value = 0;
               return;
           }
           RotationSlider.Value += args.RotationDeltaInDegrees;
       }
   
       // Handler for click input from the RadialController.
       private void MyController_ButtonClicked(RadialController sender,
         RadialControllerButtonClickedEventArgs args)
       {
           ButtonToggle.IsOn = !ButtonToggle.IsOn;
       }
   }
   

アプリを実行するときは、Surface Dial を使用して操作します。 まず、長押ししてメニューを開き、カスタム ツールを選択します。 カスタム ツールがアクティブになったら、ダイヤルを回転させてスライダー コントロールを調整し、ダイヤルをクリックしてスイッチを切り替えることができます。

Surface Dial カスタム ツールを使用してアクティブ化されたサンプル アプリ UI

組み込みツールを指定する

RadialControllerConfiguration クラスを使用して、アプリの組み込みメニュー項目のコレクションをカスタマイズできます。

たとえば、アプリにスクロール領域やズーム領域がないため、元に戻す/やり直す機能が必要ない場合は、これらのツールをメニューから削除できます。 これにより、メニューの領域が開き、アプリ用のカスタム ツールが追加されます。

Von Bedeutung

Surface Dial メニューには、少なくとも 1 つのメニュー項目が必要です。 いずれかのカスタム ツールを追加する前に既定のツールがすべて削除されると、既定のツールが復元され、ツールが既定のコレクションに追加されます。

デザイン ガイドラインに従って、メディア コントロール ツール (音量と前/次のトラック) を削除することはお勧めしません。ユーザーは他のタスクを実行している間にバックグラウンド ミュージックが再生されることが多いためです。

ここでは、ボリュームと次/前のトラックのメディア コントロールのみを含むように Surface Dial メニューを構成する方法について説明します。

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

カスタムインタラクション

前述のように、Surface Dial では、対応する既定の操作で 3 つのジェスチャ (長押し、回転、クリック) がサポートされています。

これらのジェスチャに基づくカスタム操作が、選択したアクションまたはツールに対して適切であることを確認します。

注

操作エクスペリエンスは、Surface Dial メニューの状態によって異なります。 メニューがアクティブな場合は、入力が処理されます。それ以外の場合は、アプリが実行します。

長押し

このジェスチャは、Surface Dial メニューをアクティブにして表示します。このジェスチャに関連付けられているアプリ機能はありません。

既定では、メニューはユーザーの画面の中央に表示されます。 ただし、ユーザーはそれを取得して、選択した任意の場所に移動できます。

注

Surface Studio の画面に Surface Dial を配置すると、メニューは Surface Dial の画面上の位置の中央に配置されます。

回転する

Surface Dial は主に、アナログ値またはコントロールに対する滑らかな増分調整を伴う相互作用の回転をサポートするように設計されています。

このデバイスは、時計回りと反時計回りの両方で回転でき、触覚フィードバックを提供して離散距離を示すこともできます。

注

触覚フィードバックは、 Windows 設定 -> デバイス -> Wheel ページでユーザーが無効にすることができます。

カスタム操作の UX ガイダンス

連続または高回転感度のツールは、触覚フィードバックを無効にする必要があります

触覚フィードバックは、アクティブなツールの回転感度と一致します。 ユーザー エクスペリエンスが不快になる可能性があり、連続または高回転感度のツールでは触覚フィードバックを無効にすることをお勧めします。

利き手は回転ベースの相互作用に影響を与えるべきではありません

Surface Dial は使用されているハンドを検出できませんが、ユーザーは Windows 設定 -> Device -> Pen & Windows Ink で書き込み (または主要な手) を設定できます。

すべての回転操作においてロケールを考慮する必要があります

ロケールや右から左のレイアウトに合わせて対話を調整し、顧客満足度を最大化します。

ダイヤル メニューの組み込みのツールとコマンドは、回転ベースの操作に関する次のガイドラインに従います。

左

上方向

アウト

Surface Dial の イメージ

はい

下方向

で

概念の方向性	Surface Dial へのマッピング	時計回りの回転	反時計回りの回転
水平な	Surface Dial の上部を基にした左右のマッピング	はい	左
垂直	Surface Dial の左側に基づく上下のマッピング	下方向	上方向
Z 軸	上/右にマップされた In (または nearer) Out (またはそれ以降) を下/左にマップする	で	アウト

開発者向けガイダンス

ユーザーがデバイスを回転すると、RadialController.RotationChanged イベントは、回転方向に対するデルタ (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) に基づいて発生します。 データの感度 (または解像度) は RadialController.RotationResolutionInDegrees プロパティを使用して設定できます。

注

既定では、回転入力イベントは、デバイスが 10 度以上回転されている場合にのみ RadialController オブジェクトに配信されます。 各入力イベントによって、デバイスが振動します。

一般に、回転解像度が 5 度未満に設定されている場合は、触覚フィードバックを無効にすることをお勧めします。 これにより、継続的な対話をよりスムーズに行うことができます。

RadialController.UseAutomaticHapticFeedback プロパティを設定することで、カスタム ツールの触覚フィードバックを有効または無効にすることができます。

注

ボリューム コントロールなどのシステム ツールの触覚動作をオーバーライドすることはできません。 これらのツールの場合、触覚フィードバックは、ホイール設定ページからユーザーのみが無効にできます。

回転データの解像度をカスタマイズし、触覚フィードバックを有効または無効にする方法の例を次に示します。

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

クリック

Surface Dial のクリックは、マウスの左ボタンをクリックするのと似ています (デバイスの回転状態はこの操作には影響しません)。

UX ガイダンス

ユーザーが結果から簡単に回復できない場合は、アクションまたはコマンドをこのジェスチャにマップしないでください

Surface Dial をクリックしたユーザーに基づいてアプリによって実行されるすべてのアクションは、元に戻せる必要があります。 常に、ユーザーがアプリのバック スタックを簡単に走査し、以前のアプリの状態を復元できるようにします。

ミュート/ミュート解除、表示/非表示などのバイナリ操作は、クリック ジェスチャで優れたユーザー エクスペリエンスを提供します。

Surface Dial をクリックすることでモーダル ツールが有効化または無効化されないようにしてください。

一部のアプリ/ツール モードは、ローテーションに依存する相互作用と競合したり、無効にしたりする可能性があります。 Windows Ink ツール バーのルーラーなどのツールは、他の UI アフォーダンスを使用してオンまたはオフを切り替える必要があります (インク ツール バーには、組み込みの ToggleButton コントロールが用意されています)。

モーダル ツールの場合は、アクティブな Surface Dial メニュー項目をターゲット ツールまたは以前に選択したメニュー項目にマップします。

開発者向けガイダンス

Surface Dial がクリックされると、RadialController.ButtonClicked イベントが発生します。 RadialControllerButtonClickedEventArgs には、Surface Studio 画面上の Surface Dial の接触点の場所と境界領域を含む Contact プロパティが含まれています。 Surface Dial が画面に接触していない場合、このプロパティは null です。

画面に表示される

前述のように、Surface Dial は Surface Studio と組み合わせて使用して、Surface Dial メニューを特別なオンスクリーン モードで表示できます。

このモードの場合は、ダイヤル操作エクスペリエンスをアプリとさらに統合してカスタマイズできます。 Surface Dial と Surface Studio でのみ可能な固有のエクスペリエンスの例を次に示します。

• Surface Dial の位置に基づいてコンテキスト ツール (カラー パレットなど) を表示すると、見つけて使用しやすくなります。
• Surface Dial が配置されている UI に基づいてアクティブなツールを設定する
• Surface Dial の位置に基づいて画面領域を拡大する
• 画面の場所に基づくユニークなゲーム操作

画面上の操作に関する UX ガイダンス

Surface Dial が画面上で検出されたときにアプリが応答する必要がある

視覚的なフィードバックは、アプリが Surface Studio の画面上でデバイスを検出したことをユーザーに示すのに役立ちます。

デバイスの場所に基づいて Surface Dial 関連の UI を調整する

デバイス（およびユーザーの体）は、ユーザーが配置する場所によって、重要な UI を隠す場合があります。

ユーザーの操作に基づいて Surface Dial 関連の UI を調整する

ハードウェアオクルージョンに加えて、ユーザーの手と腕は、デバイスを使用するときに画面の一部を隠すことができます。

隠れた領域は、デバイスで使用されているハンドによって異なります。 デバイスは主に利き手でない手で使用するように設計されているため、Surface Dial 関連の UI は、ユーザーが設定で指定した反対の手に合わせて調整する必要があります ([Windows 設定] > [デバイス] > ペンと [Windows Ink] > どちらの手で書くかを選択 します)。

相互作用は、移動 ではなく、Surface Dial の位置に応答する必要があります

デバイスの足は、精密ポインティング デバイスではないため、スライドではなく画面に貼り付くように設計されています。 そのため、画面全体にドラッグするのではなく、Surface Dial を持ち上げて配置する方が一般的であると想定しています。

画面の位置を使用してユーザーの意図を判断する

コントロール、キャンバス、ウィンドウへの近接など、UI コンテキストに基づいてアクティブなツールを設定すると、タスクの実行に必要な手順を減らすことで、ユーザー エクスペリエンスを向上させることができます。

開発者向けガイダンス

Surface Dial が Surface Studio のデジタイザーサーフェイスに配置されると、 RadialController.ScreenContactStarted イベントが発生し、連絡先情報 (RadialControllerScreenContactStartedEventArgs.Contact) がアプリに提供されます。

同様に、Surface Studio のデジタイザー サーフェスに接触したときに Surface Dial がクリックされると、RadialController.ButtonClicked イベントが発生し、連絡先情報 (RadialControllerButtonClickedEventArgs.Contact) がアプリに提供されます。

連絡先情報 (RadialControllerScreenContact) には、アプリの座標空間 (RadialControllerScreenContact.Position) の Surface Dial の中心の X/Y 座標と、デバイス独立ピクセル (DIP) の境界四角形 (RadialControllerScreenContact.Bounds) が含まれます。 この情報は、アクティブなツールにコンテキストを提供し、デバイス関連の視覚的フィードバックをユーザーに提供する場合に非常に役立ちます。

次の例では、4 つの異なるセクションを含む基本的なアプリを作成しました。それぞれに 1 つのスライダーと 1 つのトグルが含まれています。 次に、Surface Dial の画面上の位置を使用して、Surface Dial によって制御されるスライダーとトグルのセットを指定します。

1. まず、XAML で UI (4 つのセクション、それぞれスライダーとトグル ボタンを含む) を宣言します。

   
   サンプル アプリ UI

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <StackPanel x:Name="HeaderPanel" 
           Orientation="Horizontal" 
           Grid.Row="0">
       <TextBlock x:Name="Header"
         Text="RadialController customization sample"
         VerticalAlignment="Center"
         Style="{ThemeResource HeaderTextBlockStyle}"
         Margin="10,0,0,0" />
     </StackPanel>
     <Grid Grid.Row="1" x:Name="RootGrid">
       <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
       <Grid x:Name="Grid0"
         Grid.Row="0"
         Grid.Column="0">
         <StackPanel Orientation="Vertical" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center">
           <!-- Slider for rotational input -->
           <Slider x:Name="RotationSlider0"
             Width="300"
             HorizontalAlignment="Left"/>
           <!-- Switch for button input -->
           <ToggleSwitch x:Name="ButtonToggle0"
               HorizontalAlignment="Left"/>
         </StackPanel>
       </Grid>
       <Grid x:Name="Grid1"
         Grid.Row="0"
         Grid.Column="1">
         <StackPanel Orientation="Vertical" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center">
           <!-- Slider for rotational input -->
           <Slider x:Name="RotationSlider1"
             Width="300"
             HorizontalAlignment="Left"/>
           <!-- Switch for button input -->
           <ToggleSwitch x:Name="ButtonToggle1"
               HorizontalAlignment="Left"/>
         </StackPanel>
       </Grid>
       <Grid x:Name="Grid2"
         Grid.Row="1"
         Grid.Column="0">
         <StackPanel Orientation="Vertical" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center">
           <!-- Slider for rotational input -->
           <Slider x:Name="RotationSlider2"
             Width="300"
             HorizontalAlignment="Left"/>
           <!-- Switch for button input -->
           <ToggleSwitch x:Name="ButtonToggle2"
               HorizontalAlignment="Left"/>
         </StackPanel>
       </Grid>
       <Grid x:Name="Grid3"
         Grid.Row="1"
         Grid.Column="1">
         <StackPanel Orientation="Vertical" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center">
           <!-- Slider for rotational input -->
           <Slider x:Name="RotationSlider3"
             Width="300"
             HorizontalAlignment="Left"/>
           <!-- Switch for button input -->
           <ToggleSwitch x:Name="ButtonToggle3"
               HorizontalAlignment="Left"/>
         </StackPanel>
       </Grid>
     </Grid>
   </Grid>
   

2. Surface Dial 画面の位置に対して定義されたハンドラーを含むコードビハインドを以下に示します。

   Slider ActiveSlider;
   ToggleSwitch ActiveSwitch;
   Grid ActiveGrid;
   
   public MainPage()
   {
     ...
   
     myController.ScreenContactStarted += 
       MyController_ScreenContactStarted;
     myController.ScreenContactContinued += 
       MyController_ScreenContactContinued;
     myController.ScreenContactEnded += 
       MyController_ScreenContactEnded;
     myController.ControlLost += MyController_ControlLost;
   
     //Set initial grid for Surface Dial input.
     ActiveGrid = Grid0;
     ActiveSlider = RotationSlider0;
     ActiveSwitch = ButtonToggle0;
   }
   
   private void MyController_ScreenContactStarted(RadialController sender, 
     RadialControllerScreenContactStartedEventArgs args)
   {
     //find grid at contact location, update visuals, selection
     ActivateGridAtLocation(args.Contact.Position);
   }
   
   private void MyController_ScreenContactContinued(RadialController sender, 
     RadialControllerScreenContactContinuedEventArgs args)
   {
     //if a new grid is under contact location, update visuals, selection
     if (!VisualTreeHelper.FindElementsInHostCoordinates(
       args.Contact.Position, RootGrid).Contains(ActiveGrid))
     {
       ActiveGrid.Background = new 
         SolidColorBrush(Windows.UI.Colors.White);
       ActivateGridAtLocation(args.Contact.Position);
     }
   }
   
   private void MyController_ScreenContactEnded(RadialController sender, object args)
   {
     //return grid color to normal when contact leaves screen
     ActiveGrid.Background = new 
     SolidColorBrush(Windows.UI.Colors.White);
   }
   
   private void MyController_ControlLost(RadialController sender, object args)
   {
     //return grid color to normal when focus lost
     ActiveGrid.Background = new 
       SolidColorBrush(Windows.UI.Colors.White);
   }
   
   private void ActivateGridAtLocation(Point Location)
   {
     var elementsAtContactLocation = 
       VisualTreeHelper.FindElementsInHostCoordinates(Location, 
         RootGrid);
   
     foreach (UIElement element in elementsAtContactLocation)
     {
       if (element as Grid == Grid0)
       {
         ActiveSlider = RotationSlider0;
         ActiveSwitch = ButtonToggle0;
         ActiveGrid = Grid0;
         ActiveGrid.Background = new SolidColorBrush( 
           Windows.UI.Colors.LightGoldenrodYellow);
         return;
       }
       else if (element as Grid == Grid1)
       {
         ActiveSlider = RotationSlider1;
         ActiveSwitch = ButtonToggle1;
         ActiveGrid = Grid1;
         ActiveGrid.Background = new SolidColorBrush( 
           Windows.UI.Colors.LightGoldenrodYellow);
         return;
       }
       else if (element as Grid == Grid2)
       {
         ActiveSlider = RotationSlider2;
         ActiveSwitch = ButtonToggle2;
         ActiveGrid = Grid2;
         ActiveGrid.Background = new SolidColorBrush( 
           Windows.UI.Colors.LightGoldenrodYellow);
         return;
       }
       else if (element as Grid == Grid3)
       {
         ActiveSlider = RotationSlider3;
         ActiveSwitch = ButtonToggle3;
         ActiveGrid = Grid3;
         ActiveGrid.Background = new SolidColorBrush( 
           Windows.UI.Colors.LightGoldenrodYellow);
         return;
       }
     }
   }
   

アプリを実行するときは、Surface Dial を使用して操作します。 まず、Surface Studio 画面にデバイスを配置します。この画面では、アプリが右下のセクションを検出して関連付けます (画像を参照)。 次に、Surface Dial を長押ししてメニューを開き、カスタム ツールを選択します。 カスタム ツールをアクティブにすると、Surface Dial を回転させてスライダー コントロールを調整し、Surface Dial をクリックしてスイッチを切り替えることができます。

Surface Dial カスタム ツールを使用してアクティブ化されたサンプル アプリ UI

概要

このトピックでは、Surface Dial 入力デバイスの概要と、Surface Studio で使用する場合の画面外のシナリオと画面上のシナリオに合わせてユーザー エクスペリエンスをカスタマイズする方法に関する UX と開発者向けガイダンスについて説明します。

質問、提案、フィードバックを radialcontroller@microsoft.comに送信してください。

関連資料

チュートリアル: Windows アプリで Surface Dial (およびその他のホイール デバイス) をサポートする

API リファレンス

• RadialController クラス
• RadialControllerButtonClickedEventArgs クラス
• RadialControllerConfiguration クラス
• RadialControllerControlAcquiredEventArgs クラス
• RadialControllerMenu クラス
• RadialControllerMenuItem クラス
• RadialControllerRotationChangedEventArgs クラス
• RadialControllerScreenContact クラス
• RadialControllerScreenContactContinuedEventArgs クラス
• RadialControllerScreenContactStartedEventArgs クラス
• RadialControllerMenuKnownIcon 列挙型
• RadialControllerSystemMenuItemKind 列挙型

サンプル

トピックのサンプル

RadialController のカスタマイズ

その他のサンプル

塗り絵帳のサンプル

入門チュートリアル: Surface Dial (およびその他のホイール デバイス) を Windows アプリでサポートする

ユニバーサル Windows プラットフォームのサンプル (C# および C++)

Windows デスクトップのサンプル