Surface Dial の操作

[アーティクル]
01/19/2024

Surface Studio を使用した Surface Dial の画像
Surface Studio と Surface Dial 及びペン(Microsoft Store で購入可能)。

概要

Surface Dial のような Windows ホイールデバイスは、Windows や Windows アプリで多くの魅力的でユニークなユーザー操作を可能にする、新しいカテゴリーの入力デバイスです。

重要

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

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

また、Surface Dialは長押しとクリックの両方に対応しています。長押しの機能：コマンドのメニューを表示します。メニューがアクティブな場合、回転とクリックの入力はメニューによって処理されます。それ以外の場合、入力はプロセッシングのためにアプリに渡されます。

他の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ペンを使用したSurface Dial

Surface Dial と併用すると、これらのコントロールは、インク属性を変更したり、インクツールバーのルーラーステンシルを調整したりするための追加機能を実現します。

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

Windows Ink ツールバーのペン選択ツールを備えたSurface Dialメニュー

Windows Ink ツールバーのストロークサイズツールを備えたSurface Dialメニュー

Windows Ink ツールバーのルーラーツールを備えたSurface Dialメニュー

ユーザー　カスタマイズ

ユーザーは、既定のツール、バイブレーション (または触覚フィードバック)、利き手など、Dial のエクスペリエンスの一部を、[Windows の設定] -> [デバイス] -> [ホイール] ページでカスタマイズできます。

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

カスタムツール

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

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

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

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

アプリまたはアプリコンテキスト用の単一のカスタムツールを提供することをお勧めします。これにより、Surface Dialメニューを起動してツールを選択しなくても、ユーザーの作業内容に応じてツールを設定することができます。

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

重要

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

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

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

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

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

アルファ背景のアイコン

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

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

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

名前は、ホイールメニューの中央の円の内側に収まるように短くする必要があります
名前は、主なアクションを明確に特定するものである必要があります(補完的な行動が暗示されていてもよい)
- スクロールは、両方の回転方向の効果を示します
- 取り消しは主なアクションを指定しますが、やり直し (補完的なアクション) はユーザーが推論して簡単に検出できます

開発者ガイダンス

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

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

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

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

カスタムツールの追加

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

まず、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>

次に、分離コードで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 クラスを使用して、アプリの組み込みのメニュー項目をカスタマイズできます。

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

重要

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

デザインガイドラインに基づき、メディアコントロールツール (音量と前へ/次へのトラック)を削除することはお勧めしません。ユーザーが他のタスクの実行中にBGMを再生することが多いためです。

ここでは、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つのジェスチャー(長押し、回転、クリック)に対応し、それぞれに対応する既定のインタラクションがあります

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

Note

インタラクション体験は、Surface Dialメニューの状態によって異なります。メニューがアクティブな場合は、メニューが入力を処理し、それ以外の場合は、アプリが処理します。

長押し

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

初期設定では、メニューはユーザー画面の中央に表示されます。ただし、ユーザーはそれを掴んで、選択した任意の位置に移動させることができます。

Note

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

回転

Surface Dialは主に、アナログ値やコントロールのスムーズかつ増分の調整を伴うンタラクションの回転をサポートするように設計されています。

このデバイスは、時計回りと反時計回りの両方で回転させることができ、触覚フィードバックで個別の距離を示すこともできます。

Note

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

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

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

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

利き手は回転ベースのインタラクシに影響を与えないようにしてください。

Surface Dialはどちらの手を使用しているかを検出できませんが、ユーザーは[Windows設定]->[デバイス]->[ペンとWindows Ink]で利き手を設定できます。

すべての回転インタラクションでロケールを考慮する必要があります

ロケールや右から左へのレイアウトに対応し、インタラクションを適応させることで、顧客満足度を最大化します。

ダイヤルメニューの組み込みツールとコマンドは、回転ベースのインタラクションのためのガイドラインに従います：

Left

Out

Surface Dial の画像

Right

[下へ]

概念的な方向	Surface Dialへのマッピング	時計回りの回転	反時計回りの回転
水平	Surface Dialの上部に基づく左右のマッピング	Right	Left
垂直	Surface Dialの左側に基づく上下のマッピング	[下へ]	Up
Z 軸	上/右にマッピングれた In(またはnearer) 下/左にマッピングされたOut(またはfurther)	In	Out

開発者ガイダンス

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

Note

初期設定では、回転入力イベントは、デバイスが最低10度回転したときのみ、RadialController オブジェクトに配信されます。各入力イベントによって、デバイスが振動します。

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

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

Note

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

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

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によって制御されるスライダーとトグルのセットを指定します。

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

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>

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 をクリックしてスイッチを切り替えることができます。

4 つの水平スライダーが左に設定され、4 番目のコントローラーが強調表示されている放射状コントローラーサンプルのスクリーンショット。
Surface Dialカスタムツールを使用して起動したサンプルアプリのUI

まとめ

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

ぜひ皆様のご質問とご意見、ご感想をこちらまでお寄せくださいradialcontroller@microsoft.com。

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

API リファレンス

サンプル

トピックのサンプル

RadialController のカスタマイズ

その他のサンプル

塗り絵帳のサンプル

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

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

Windows Desktop のサンプル

次の方法で共有

Surface Dial の操作

概要

システム統合

ユーザー　カスタマイズ

カスタムツール

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

開発者ガイダンス

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

長押し

回転

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

開発者ガイダンス

クリック

UX ガイダンス

開発者ガイダンス

オンスクリーン

オンスクリーン・インタラクションのUXガイダンス

開発者ガイダンス

まとめ

API リファレンス

サンプル

トピックのサンプル

その他のサンプル

フィードバック

その他のリソース

次の方法で共有

Surface Dial の操作

概要

システム統合

ユーザー カスタマイズ

カスタム ツール

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

開発者ガイダンス

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

長押し

回転

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

開発者ガイダンス

クリック

UX ガイダンス

開発者ガイダンス

オンスクリーン

オンスクリーン・インタラクションのUXガイダンス

開発者ガイダンス

まとめ

関連記事

API リファレンス

サンプル

トピックのサンプル

その他のサンプル

フィードバック

その他のリソース

ユーザー　カスタマイズ

カスタムツール

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