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

Surface StudioとSurface Dialのイメージ
Surface DialとSurface StudioとSurface Pen。

このチュートリアルでは、Surface Dialなどのホイールデバイスでサポートされるユーザー操作エクスペリエンスをカスタマイズする方法について説明します。サンプルアプリのスニペットを使用して、GitHub (Sample コードを参照) からダウンロードし、各手順で説明するさまざまな機能と関連する RadialController API を示します。

ここでは、次の点に重点を置いて説明します。

RadialController メニューに表示する組み込みツールの指定
メニューへのカスタムツールの追加
触覚フィードバックの制御
クリック操作のカスタマイズ
回転操作のカスタマイズ

これらの機能とその他の機能の実装の詳細については、「Windows アプリでのSurface Dial操作を参照してください。

はじめに

Surface Dialは、ペン、タッチ、マウスなどのプライマリ入力デバイスと共に使用する場合に、ユーザーの生産性を高めるのに役立つセカンダリ入力デバイスです。セカンダリ入力デバイスとして、ダイヤルは通常、システムコマンドとその他のコンテキスト、ツール、機能の両方へのアクセスを提供するために、非優先ハンドと共に使用されます。

ダイヤルは、次の 3 つの基本的なジェスチャをサポートします。

長押しすると、コマンドの組み込みメニューが表示されます。
回転してメニュー項目を強調表示するか (メニューがアクティブな場合)、またはアプリの現在のアクションを変更します (メニューがアクティブでない場合)。
強調表示されているメニュー項目を選択するか (メニューがアクティブな場合)、またはアプリでコマンドを呼び出します (メニューがアクティブでない場合)。

前提条件

Windows 10 の Creators Update 以降を実行しているコンピューターまたは仮想マシン
Visual Studio UWP 開発用に設定。
ホイールデバイス (現時点では Surface Dial のみ)

デバイスを設定する

Windows デバイスがオンになっていることを確認します。
[スタート] に移動し、設定>Devices>Bluetoothその他のデバイスを選択し、Bluetoothをオンにします。
Surface Dialの下部を取り外してバッテリコンパートメントを開き、内部に 2 つの AAA バッテリがあることを確認します。
バッテリータブがダイヤルの下側にある場合は、取り外します。
Bluetoothライトが点滅するまで、バッテリーの横にある小さなインセットボタンを長押しします。
Windowsデバイスに戻り、[Bluetoothまたはその他のデバイスの追加を選択します。
デバイスの追加 ダイアログで、Bluetooth>Surface Dial を選択します。これで、Surface Dialが接続され、マウス、キーボード、ペンの下のデバイスの一覧に追加され、Bluetoothおよびその他のデバイス設定ページに表示されます。
ダイヤルを数秒間長押しして、組み込みメニューを表示してテストします。
メニューが画面に表示されない場合 (ダイヤルも振動する必要があります)、Bluetoothの設定に戻り、デバイスを削除して、もう一度デバイスを接続してみてください。

注

ホイールデバイスは、 Wheel 設定を使用して構成できます。

[スタート] メニューの [設定] を選択します。
デバイス>、ホイールを選択します。

これで、このチュートリアルを開始する準備ができました。

サンプルコード

このチュートリアルでは、サンプルアプリを使用して、説明されている概念と機能を示します。

GitHubのwindows-appsample-get-started-radialcontroller サンプルから、このVisual Studioのサンプルとソースコードをダウンロードしてください。

緑色の [複製またはダウンロード ] ボタンを選択します。
GitHub アカウントがある場合は、Visual Studio で開くを選択して、リポジトリをローカルコンピューターにクローンできます。
GitHub アカウントがない場合、またはプロジェクトのローカルコピーが必要な場合は、DOWNload ZIP を選択します (最新の更新プログラムをダウンロードするには、定期的に確認する必要があります)。

Important

サンプルのコードのほとんどはコメントアウトされています。このトピックの各手順を実行すると、コードのさまざまなセクションのコメントを解除するように求められます。 Visual Studioで、コード行を強調表示してから、CTRL-Kを押し、その後CTRL-Uを押します。

ホイール機能をサポートするコンポーネント

これらのオブジェクトは、Windows アプリのホイールデバイスエクスペリエンスの大部分を提供します。

コンポーネント	説明
RadialController クラスおよび関連	ホイール入力デバイスまたはSurface Dialなどのアクセサリを表します。
IRadialControllerConfigurationInterop / IRadialControllerInterop ここでは、この機能については説明しません。詳細については、Windows デスクトップサンプルを参照してください。	Windows アプリとの相互運用性を有効にします。

手順 1: サンプルを実行する

RadialController サンプルアプリをダウンロードしたら、それが実行されていることを確認します。

Visual Studioでサンプルプロジェクトを開きます。
[ソリューションプラットフォーム] ドロップダウンを Arm 以外の選択に設定します。
F5 キーを押してコンパイル、デプロイ、および実行します。

注

または、Debug>Start debugging メニュー項目を選択することもできます。または、Local Machine の [実行] ボタンをこちらで選択します: Visual Studio ビルドプロジェクトボタン

アプリウィンドウが開き、スプラッシュ画面が数秒表示されると、この最初の画面が表示されます。

空のアプリ

これで、このチュートリアルの残りの部分で使用する基本的なWindows アプリが作成されました。次の手順では、 RadialController 機能を追加します。

手順 2: RadialController の基本的な機能

アプリを実行し、フォアグラウンドでSurface Dialを長押しして、RadialController メニューを表示します。

アプリのカスタマイズはまだ行っていないので、メニューにはコンテキストツールの既定のセットが含まれています。

これらの画像は、既定のメニューの 2 つのバリエーションを示しています。 (他にも、Windows Desktop がアクティブで、アプリがフォアグラウンドに存在しない場合の基本的なシステムツール、InkToolbar が存在する場合の追加の手描き入力ツール、Maps アプリを使用している場合のマッピングツールなど、他にも多くのツールがあります。

RadialController メニュー (既定)	RadialController メニュー (メディアの再生時の既定値)

ここでは、基本的なカスタマイズから始めます。

手順 3: ホイール入力のコントロールを追加する

まず、アプリの UI を追加しましょう。

MainPage_Basic.xaml ファイルを開きます。
この手順のタイトルでマークされたコードを見つけます ("")。

次の行のコメントを解除しなさい。

<Button x:Name="InitializeSampleButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Initialize sample" />
<ToggleButton x:Name="AddRemoveToggleButton"
                HorizontalAlignment="Center" 
                Margin="10" 
                Content="Remove Item"
                IsChecked="True" 
                IsEnabled="False"/>
<Button x:Name="ResetControllerButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Reset RadialController menu" 
        IsEnabled="False"/>
<Slider x:Name="RotationSlider" Minimum="0" Maximum="10"
        Width="300"
        HorizontalAlignment="Center"/>
<TextBlock Text="{Binding ElementName=RotationSlider, Mode=OneWay, Path=Value}"
            Margin="0,0,0,20"
            HorizontalAlignment="Center"/>
<ToggleSwitch x:Name="ClickToggle"
                MinWidth="0" 
                Margin="0,0,0,20"
                HorizontalAlignment="center"/>

この時点で、[サンプルの 初期化 ] ボタン、スライダー、トグルスイッチのみが有効になります。その他のボタンは、スライダーとトグルスイッチへのアクセスを提供する RadialController メニュー項目を追加および削除するために、後の手順で使用します。

基本的なサンプルアプリ UI

次に、 RadialController のコントロールへのアクセスを有効にするために必要なコードを追加しましょう。

MainPage_Basic.xaml.cs ファイルを開きます。
この手順のタイトルでマークされたコードを見つけます ("// 手順 4: 基本的な RadialController メニューのカスタマイズ")。

次の行のコメントを外してください。

Windows。Ui。Input および Windows。Storage.Streams 型参照は、後続の手順の機能に使用されます。
```
// Using directives for RadialController functionality.
using Windows.UI.Input;
```
これらのグローバルオブジェクト (RadialController、 RadialControllerConfiguration、 RadialControllerMenuItem) は、アプリ全体で使用されます。
```
private RadialController radialController;
private RadialControllerConfiguration radialControllerConfig;
private RadialControllerMenuItem radialControllerMenuItem;
```
ここでは、コントロールを有効にし、カスタム RadialController メニュー項目を初期化するボタンの Click ハンドラーを指定します。
```
InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };
```

次に、 RadialController オブジェクトを初期化し、 RotationChanged イベントと ButtonClicked イベントのハンドラーを設定します。

// Set up the app UI and RadialController.
private void InitializeSample(object sender, RoutedEventArgs e)
{
    ResetControllerButton.IsEnabled = true;
    AddRemoveToggleButton.IsEnabled = true;

    ResetControllerButton.Click += (resetsender, args) =>
    { ResetController(resetsender, args); };
    AddRemoveToggleButton.Click += (togglesender, args) =>
    { AddRemoveItem(togglesender, args); };

    InitializeController(sender, e);
}

ここでは、カスタム RadialController メニュー項目を初期化します。 CreateForCurrentView を使用して RadialController オブジェクトへの参照を取得し、RotationResolutionInDegrees プロパティを使用して回転感度を "1" に設定し、CreateFromFontGlyph を使用して RadialControllerMenuItem を作成し、RadialController メニュー項目コレクションにメニュー項目を追加し、最後に SetDefaultMenuItems を使用して既定のメニュー項目をクリアし、カスタムツールのみを残します。

// Configure RadialController menu and custom tool.
private void InitializeController(object sender, RoutedEventArgs args)
{
    // Create a reference to the RadialController.
    radialController = RadialController.CreateForCurrentView();
    // Set rotation resolution to 1 degree of sensitivity.
    radialController.RotationResolutionInDegrees = 1;

    // Create the custom menu items.
    // Here, we use a font glyph for our custom tool.
    radialControllerMenuItem =
        RadialControllerMenuItem.CreateFromFontGlyph("SampleTool", "\xE1E3", "Segoe MDL2 Assets");

    // Add the item to the RadialController menu.
    radialController.Menu.Items.Add(radialControllerMenuItem);

    // Remove built-in tools to declutter the menu.
    // NOTE: The Surface Dial menu must have at least one menu item. 
    // If all built-in tools are removed before you add a custom 
    // tool, the default tools are restored and your tool is appended 
    // to the default collection.
    radialControllerConfig =
        RadialControllerConfiguration.GetForCurrentView();
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });

    // Declare input handlers for the RadialController.
    // NOTE: These events are only fired when a custom tool is active.
    radialController.ButtonClicked += (clicksender, clickargs) =>
    { RadialController_ButtonClicked(clicksender, clickargs); };
    radialController.RotationChanged += (rotationsender, rotationargs) =>
    { RadialController_RotationChanged(rotationsender, rotationargs); };
}

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    if (RotationSlider.Value + args.RotationDeltaInDegrees >= RotationSlider.Maximum)
    {
        RotationSlider.Value = RotationSlider.Maximum;
    }
    else if (RotationSlider.Value + args.RotationDeltaInDegrees < RotationSlider.Minimum)
    {
        RotationSlider.Value = RotationSlider.Minimum;
    }
    else
    {
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }
}

// Connect wheel device click to toggle switch control.
private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ClickToggle.IsOn = !ClickToggle.IsOn;
}

次に、アプリをもう一度実行します。
[ 放射状コントローラーの初期化 ] ボタンを選択します。
アプリをフォアグラウンドにして、Surface Dialを長押ししてメニューを表示します。 ( RadialControllerConfiguration.SetDefaultMenuItems メソッドを使用して) すべての既定のツールが削除され、カスタムツールのみが残っていることに注意してください。カスタムツールのメニューを次に示します。

RadialController メニュー (カスタム)

カスタムツールを選択し、Surface Dialでサポートされる操作を試します。
- 回転アクションを実行すると、スライダーが移動します。
- クリックすると、トグルがオンまたはオフに設定されます。

じゃあ、ボタンを接続しましょう。

この手順では、[ 追加/削除] 項目 と [RadialController のリセット] メニュー ボタンをフックして、メニューを動的にカスタマイズする方法を示します。

MainPage_Basic.xaml.cs ファイルを開きます。
この手順のタイトルでマークされたコードを見つけます ("// 手順 5: 実行時にメニューを構成する")。

次のメソッドのコードのコメントを解除し、アプリをもう一度実行しますが、ボタンを選択しないでください (次の手順で保存します)。

// Add or remove the custom tool.
private void AddRemoveItem(object sender, RoutedEventArgs args)
{
    if (AddRemoveToggleButton?.IsChecked == true)
    {
        AddRemoveToggleButton.Content = "Remove item";
        if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Add(radialControllerMenuItem);
        }
    }
    else if (AddRemoveToggleButton?.IsChecked == false)
    {
        AddRemoveToggleButton.Content = "Add item";
        if (radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Remove(radialControllerMenuItem);
            // Attempts to select and activate the previously selected tool.
            // NOTE: Does not differentiate between built-in and custom tools.
            radialController.Menu.TrySelectPreviouslySelectedMenuItem();
        }
    }
}

// Reset the RadialController to initial state.
private void ResetController(object sender, RoutedEventArgs arg)
{
    if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
    {
        radialController.Menu.Items.Add(radialControllerMenuItem);
    }
    AddRemoveToggleButton.Content = "Remove item";
    AddRemoveToggleButton.IsChecked = true;
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });
}

[ アイテムの削除 ] ボタンを選択し、ダイヤルを長押ししてメニューをもう一度表示します。

メニューにツールの既定のコレクションが含まれていることに注意してください。手順 3 では、カスタムメニューを設定するときに、すべての既定のツールを削除し、カスタムツールのみを追加したことを思い出してください。また、メニューが空のコレクションに設定されている場合は、現在のコンテキストの既定の項目が復元されます。 (既定のツールを削除する前にカスタムツールを追加しました)。
[ アイテムの追加 ] ボタンを選択し、ダイヤルを長押しします。

メニューにツールの既定のコレクションとカスタムツールの両方が含まれていることに注意してください。
[ RadialController のリセット] メニュー ボタンを選択し、ダイヤルを長押しします。

メニューが元の状態に戻っていることがわかります。

手順 6: デバイスの触覚をカスタマイズする

Surface Dialおよびその他のホイールデバイスは、現在の相互作用に対応する触覚フィードバックをユーザーに提供できます (クリックまたは回転に基づく)。

この手順では、スライダーとトグルスイッチコントロールを関連付け、それらを使用して触覚フィードバックの動作を動的に指定することで、触覚フィードバックをカスタマイズする方法について説明します。この例では、フィードバックを有効にするにはトグルスイッチをオンに設定する必要があります。スライダーの値はクリックフィードバックを繰り返す頻度を指定します。

注

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

App.xaml.cs ファイルを開きます。
この手順のタイトルでマークされたコードを見つけます ("手順 6: デバイス触覚をカスタマイズする")。

1 行目と 3 行目 ("MainPage_Basic" と "MainPage") にコメントを付け、2 行目 ("MainPage_Haptics") のコメントを解除します。

rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

MainPage_Haptics.xaml ファイルを開きます。
この手順のタイトルでマークされたコードを見つけます ("")。

次の行のコメントを解除しなさい。 (この UI コードは、現在のデバイスでサポートされている触覚機能を示すだけです)。

<StackPanel x:Name="HapticsStack" 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            BorderBrush="Gray" 
            BorderThickness="1">
    <TextBlock Padding="10" 
                Text="Supported haptics properties:" />
    <CheckBox x:Name="CBDefault" 
                Content="Default" 
                Padding="10" 
                IsEnabled="False" 
                IsChecked="True" />
    <CheckBox x:Name="CBIntensity" 
                Content="Intensity" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayCount" 
                Content="Play count" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayDuration" 
                Content="Play duration" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBReplayPauseInterval" 
                Content="Replay/pause interval" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBBuzzContinuous" 
                Content="Buzz continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBClick" 
                Content="Click" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPress" 
                Content="Press" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRelease" 
                Content="Release" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRumbleContinuous" 
                Content="Rumble continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
</StackPanel>

MainPage_Haptics.xaml.cs ファイルを開く
この手順のタイトルでマークされたコードを見つけます ("手順 6: 触覚カスタマイズ")

次の行のコメントを解除しなさい。

Windows.Devices.Haptics 型参照は、後のステップでの機能に使用されます。
```
using Windows.Devices.Haptics;
```
ここでは、カスタム RadialController メニュー項目が選択されたときにトリガーされる ControlAcquired イベントのハンドラーを指定します。
```
radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };
```

次に、 ControlAcquired ハンドラーを定義します。ここでは、既定の触覚フィードバックを無効にし、触覚 UI を初期化します。

private void RadialController_ControlAcquired(
    RadialController rc_sender,
    RadialControllerControlAcquiredEventArgs args)
{
    // Turn off default haptic feedback.
    radialController.UseAutomaticHapticFeedback = false;

    SimpleHapticsController hapticsController =
        args.SimpleHapticsController;

    // Enumerate haptic support.
    IReadOnlyCollection<SimpleHapticsControllerFeedback> supportedFeedback =
        hapticsController.SupportedFeedback;

    foreach (SimpleHapticsControllerFeedback feedback in supportedFeedback)
    {
        if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.BuzzContinuous)
        {
            CBBuzzContinuous.IsEnabled = true;
            CBBuzzContinuous.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Click)
        {
            CBClick.IsEnabled = true;
            CBClick.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Press)
        {
            CBPress.IsEnabled = true;
            CBPress.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Release)
        {
            CBRelease.IsEnabled = true;
            CBRelease.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.RumbleContinuous)
        {
            CBRumbleContinuous.IsEnabled = true;
            CBRumbleContinuous.IsChecked = true;
        }
    }

    if (hapticsController?.IsIntensitySupported == true)
    {
        CBIntensity.IsEnabled = true;
        CBIntensity.IsChecked = true;
    }
    if (hapticsController?.IsPlayCountSupported == true)
    {
        CBPlayCount.IsEnabled = true;
        CBPlayCount.IsChecked = true;
    }
    if (hapticsController?.IsPlayDurationSupported == true)
    {
        CBPlayDuration.IsEnabled = true;
        CBPlayDuration.IsChecked = true;
    }
    if (hapticsController?.IsReplayPauseIntervalSupported == true)
    {
        CBReplayPauseInterval.IsEnabled = true;
        CBReplayPauseInterval.IsChecked = true;
    }
}

RotationChanged イベントハンドラーと ButtonClicked イベントハンドラーでは、対応するスライダーコントロールとトグルボタンコントロールをカスタム触覚に接続します。

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    ...
    if (ClickToggle.IsOn && 
        (RotationSlider.Value > RotationSlider.Minimum) && 
        (RotationSlider.Value < RotationSlider.Maximum))
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.BuzzContinuous);
        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedback(waveform);
        }
    }
}

private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ...

    if (RotationSlider?.Value > 0)
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.Click);

        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedbackForPlayCount(
                waveform, 1.0, 
                (int)RotationSlider.Value, 
                TimeSpan.Parse("1"));
        }
    }
}

最後に、触覚フィードバックに対して要求された波形 (サポートされている場合) を取得します。

// Get the requested waveform.
private SimpleHapticsControllerFeedback FindWaveform(
    SimpleHapticsController hapticsController,
    ushort waveform)
{
    foreach (var hapticInfo in hapticsController.SupportedFeedback)
    {
        if (hapticInfo.Waveform == waveform)
        {
            return hapticInfo;
        }
    }
    return null;
}

次に、スライダーの値とトグルスイッチの状態を変更して、アプリをもう一度実行してカスタム触覚を試します。

手順 7: Surface Studioと同様のデバイスの画面上の対話を定義する

Surface Studioと組み合わせて、Surface Dialはさらに独特なユーザーエクスペリエンスを提供できます。

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

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

このチュートリアルに付属するサンプルには、これらの機能の一部を示す少し複雑な例が含まれています。

この動作を確認するには (Surface Studioが必要です)。

Surface Studio デバイス (Visual Studio インストール済み) にサンプルをダウンロードする
Visual Studioでサンプルを開く
App.xaml.cs ファイルを開く
この手順のタイトルでマークされたコードを見つけます ("手順 7: Surface Studioと同様のデバイスの画面上の対話を定義する")

1 行目と 2 行目 ("MainPage_Basic" と "MainPage_Haptics") にコメントを付け、3 行目のコメントを解除します ("MainPage")

rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

アプリを実行し、2 つのコントロール領域のそれぞれにSurface Dialを配置し、それらの間で交互に配置します。

まとめ

おめでとうございます！初めてのチュートリアル: WindowsアプリでSurface Dial（その他のホイールデバイス）をサポートする方法が完了しました。 Windows アプリでホイールデバイスをサポートするために必要な基本的なコードと、RadialController API でサポートされる豊富なユーザーエクスペリエンスを提供する方法について説明しました。

Surface Dialの操作

API リファレンス

サンプル

トピックのサンプル

RadialController のカスタマイズ

その他のサンプル

Coloring Book サンプル

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

Windows デスクトップサンプル

フィードバック

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

Last updated on 2026-03-11