Surface Dialのインタラクション

Surface StudioとSurface Dialのイメージ
Surface Dial と Surface Studio および Pen。

概要

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

Important

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

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

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

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

ヒント

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

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

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

Surface Dial画面外メニュー

Surface Dial画面上のメニュー

システム統合

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

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

ユーザーが Windows Desktop を使用している場合のシステムの明るさツール
メディア再生中の前または次のトラックのツール

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

Surface Dial と Surface Pen
Surface Pen と Surface Dial

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

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

Windows Ink ツールバーのペン選択ツールを含む Surface Dial メニュー

Surface Dial メニューには Windows Ink ツールバーのストロークサイズツールがあります

Windows Ink ツールバー用のルーラーツールを含むSurface Dial メニュー

ユーザーのカスタマイズ

ユーザーは、Windows 設定 -> Devices -> Wheel ページで、既定のツール、振動 (または触覚フィードバック)、書き込み (または主要な) ハンドを使用して、ダイヤルエクスペリエンスのいくつかの側面をカスタマイズできます。

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

カスタムツール

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

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

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

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

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

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

Important

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

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

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

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

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

アルファ背景のアイコン

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

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

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

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

開発者ガイダンス

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

前述のように、既定の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 入力ハンドラーを宣言します。

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

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

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

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

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

Important

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 Settings -> Devices -> Wheel ページで無効にすることができます。

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

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

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

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

Surface Dialはどちらの手が使用されているかを検出できませんが、ユーザーはWindowsの設定 -> デバイス -> ペンとWindows Inkで書き込み（または利き手）を設定できます。

すべてのローテーション操作でロケールを考慮する必要がある

ロケールと右から左のレイアウトに対応し、対話を調整することで、顧客満足度を最大化します。

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

左

上へ

Out

Surface Dial のイメージ

はい

下方向

概念の方向性	Surface Dialへのマッピング	時計回りの回転	反時計回りの回転
横方向	表面ダイヤルの上部に基づいて左右をマッピング	はい	左
垂直	Surface Dialの左側に基づく上下方向のマッピング	下方向	上へ
Z 軸	上/右にマッピングされる内部（もしくはその周辺） Out (またはそれ以降) を下/左にマップする	In	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;
  }
}

Click

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

UX ガイダンス

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

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

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

ModalツールはSurface Dialをクリックして有効化または無効化されるべきではありません

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

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

開発者ガイダンス

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

画面に表示される

前述のように、Surface DialをSurface Studioと組み合わせて使用すると、Surface Dial メニューを特別な画面上モードで表示できます。

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

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

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

画面上でSurface Dialが検出されたときにAppsが応答する必要があります

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

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

デバイス (およびユーザーの身体) は、ユーザーが配置する場所に応じて、重要な UI を遮ることがあります。

ユーザー操作に基づくSurface Dial関連 UI の調整

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

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

Interactions は動きではなく、Surface Dial位置に応答すべきです

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

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

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

開発者ガイダンス

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

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

連絡先情報 (RadialControllerScreenContact) には、アプリの座標空間における Surface Dial の中心の X/Y 座標 (RadialControllerScreenContact.Position)、およびデバイス独立ピクセル (DIPs) の外接する四角形 (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で使用する場合の画面外のシナリオだけでなく、画面外のシナリオに合わせてユーザーエクスペリエンスをカスタマイズする方法に関する開発者向けガイダンスを提供します。

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

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

API リファレンス

サンプル

トピックのサンプル

RadialController のカスタマイズ

その他のサンプル

Coloring Book サンプル

Get Started Tutorial: Windows アプリでSurface Dial (およびその他のホイールデバイス) をサポートします

Universal Windows Platform サンプル (C# および C++)

Windows デスクトップサンプル

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-11

次の方法で共有

Surface Dialのインタラクション

概要

システム統合

ユーザーのカスタマイズ

カスタム ツール

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

開発者ガイダンス

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

長押ししてください

回転

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

開発者ガイダンス

Click

UX ガイダンス

開発者ガイダンス

画面に表示される

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

開発者ガイダンス

まとめ

関連資料

API リファレンス

サンプル

トピックのサンプル

その他のサンプル

フィードバック

その他のリソース

カスタムツール

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