Руководство: Поддержка Surface Dial (и других устройств с колесом) в вашем приложении для Windows

Изображение Surface Dial и Surface Studio
Surface Dial с Surface Studio и Surface Pen.

В этом руководстве рассматривается, как настроить взаимодействие с пользователем, которое поддерживается вращающимися устройствами, такими как Surface Dial. Мы используем фрагменты кода из примера приложения, которое можно скачать из GitHub (см. Sample code), чтобы продемонстрировать различные функции и связанные RadialController API, рассмотренные на каждом шаге.

Мы сосредоточимся на следующем:

  • Указание встроенных средств, отображаемых в меню RadialController
  • Добавление пользовательского инструмента в меню
  • Управление тактильной обратной связью
  • Настройка взаимодействий с щелчком
  • Настройка интеракций поворота

Дополнительные сведения о реализации этих и других функций см. в разделе взаимодействие с Surface Dial в приложениях Windows.

Введение

Surface Dial — это дополнительное устройство ввода, которое помогает пользователям быть более продуктивным при использовании вместе с основным устройством ввода, таким как перо, сенсорный ввод или мышь. Как дополнительное устройство ввода, Dial обычно используется не-доминантной рукой для обеспечения доступа как к системным командам, так и к другим, более контекстным инструментам и функциям.

The Dial поддерживает три основных жеста:

  • Нажмите и удерживайте, чтобы отобразить встроенное меню команд.
  • Поворот, чтобы выделить пункт меню (если меню активно) или изменить текущее действие в приложении (если меню неактивно).
  • Щелкните, чтобы выбрать выделенный пункт меню (если меню активно) или вызвать команду в приложении (если меню неактивно).

Необходимые условия

Настройка устройств

  1. Убедитесь, что устройство Windows подключено.
  2. Перейдите в раздел "Пуск", выберите "Параметры>устройств>Bluetooth" и "Другие устройства", а затем включите Bluetooth .
  3. Удалите нижнюю часть Surface Dial, чтобы открыть отсек батареи, и убедитесь, что внутри есть две батареи AAA.
  4. Если язычок батареи присутствует на нижней части циферблата, удалите его.
  5. Нажимайте и удерживайте небольшую кнопку вставки рядом с батареями, пока свет Bluetooth не мигает.
  6. Вернитесь к устройству Windows и выберите Add Bluetooth или другое устройство.
  7. В диалоговом окне Add a device выберите Bluetooth>Surface Dial. Теперь ваш Surface Dial должен подключаться и добавляться в список устройств в разделе Мышь, клавиатура и перо на странице параметров Bluetooth и других устройств.
  8. Испытайте переключатель, нажав и удерживая его на несколько секунд, чтобы отобразить встроенное меню.
  9. Если меню не отображается на экране (телефон должен также вибрировать), вернитесь к параметрам Bluetooth, удалите устройство и повторите попытку подключения устройства.

Замечание

Устройства с колесиками можно настроить с помощью параметров колеса :

  1. В меню "Пуск " выберите "Параметры".
  2. Выберите Устройства>Колесо.
    Экран параметров колесика

Теперь вы готовы начать работу с этим руководством.

Пример кода

В этом руководстве мы используем пример приложения для демонстрации концепций и функциональных возможностей, описанных в этом руководстве.

Скачайте этот пример и исходный код для Visual Studio с GitHub по адресу windows-appsample-get-started-radialcontroller:

  1. Нажмите зеленую кнопку "Клонировать" или "Скачать ".
    Клонирование репозитория
  2. Если у вас есть учетная запись GitHub, вы можете клонировать репозиторий на локальный компьютер, выбрав Open в Visual Studio.
  3. Если у вас нет учетной записи GitHub или требуется только локальная копия проекта, выберите Download ZIP (вам придется регулярно проверять, чтобы скачать последние обновления).

Это важно

Большая часть кода в примере закомментирована. По мере того как мы рассмотрим каждый шаг в этом разделе, вам будет предложено раскомментировать различные разделы кода. В Visual Studio просто выделите строки кода и нажмите клавишу CTRL-K, а затем CTRL-U.

Компоненты, поддерживающие функции колесика

Эти объекты составляют основную часть взаимодействия с устройством колеса для приложений Windows.

Компонент Описание
класс RadialController и связанные элементы Представляет вводное устройство, имитирующее колесо, или аксессуар, такой как Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Здесь мы не рассмотрим эту функцию, дополнительные сведения см. в примере Windows для настольного компьютера.
Обеспечивает взаимодействие с приложением Windows.

Шаг 1. Запуск примера

После загрузки примера приложения RadialController убедитесь, что он работает.

  1. Откройте пример проекта в Visual Studio.
  2. Установите выпадающее меню "Платформы решения" на вариант, отличный от Arm.
  3. Нажмите клавишу F5, чтобы скомпилировать, развернуть и запустить.

Замечание

Кроме того, можно выбрать Debug>Start debugging пункт меню, или нажмите кнопку Local Machine Запустить, показанную здесь: Visual Studio Кнопка

Откроется окно приложения, и после того, как экран-заставка появится в течение нескольких секунд, вы увидите этот начальный экран.

Пустое приложение

Теперь у нас есть базовое приложение Windows, которое мы будем использовать в остальной части этого руководства. В следующих шагах мы добавим функциональные возможности RadialController .

Шаг 2. Основные функции RadialController

При запуске приложения и на переднем плане нажмите и удерживайте Surface Dial, чтобы отобразить меню RadialController.

Мы еще не сделали настройки для нашего приложения, поэтому меню содержит набор контекстных инструментов по умолчанию.

Эти изображения показывают два варианта меню по умолчанию. (Существует много других, включая просто базовые системные инструменты, когда Windows Desktop активен, и нет приложений на переднем плане, дополнительных средств рукописного ввода при наличии панели InkToolbar и средств сопоставления при использовании приложения Maps.

Меню RadialController (по умолчанию) Меню RadialController (по умолчанию с воспроизведением мультимедиа)
Меню RadialController по умолчанию Меню RadialController по умолчанию с музыкой

Теперь мы начнем с некоторых основных настроек.

Шаг 3. Добавление элементов управления для ввода колесика

Сначала добавим пользовательский интерфейс для нашего приложения:

  1. Откройте файл MainPage_Basic.xaml.

  2. Найдите код, помеченный заголовком этого шага ("<-- шаг 3. Добавление элементов управления для ввода колесика -->").

  3. Раскомментируйте следующие строки.

    <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, которые предоставляют доступ к ползунку и переключателю.

Базовый пример пользовательского интерфейса приложения

Шаг 4. Настройка базового меню RadialController

Теперь добавим код, необходимый для включения доступа RadialController к нашим элементам управления.

  1. Откройте файл MainPage_Basic.xaml.cs.
  2. Найдите код, помеченный заголовком этого шага ("// Шаг 4. Настройка меню "Базовый радиалКонтроллер").
  3. Раскомментируйте следующие строки:
    • 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;
      
    • Здесь мы назначаем обработчик Click для кнопки, которая активирует наши элементы управления и инициализирует наш пользовательский элемент меню RadialController.

      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, устанавливаем чувствительность поворота на "1" с помощью свойства RotationResolutionInDegrees, затем создаем RadialControllerMenuItem с помощью CreateFromFontGlyph, добавляем элемент меню в коллекцию элементов меню 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;
      }
      
  4. Теперь снова запустите приложение.
  5. Нажмите кнопку инициализировать радиальный контроллер .
  6. С помощью приложения на переднем плане нажмите и удерживайте Surface Dial, чтобы отобразить меню. Обратите внимание, что все средства по умолчанию удалены (с помощью метода RadialControllerConfiguration.SetDefaultMenuItems ), оставляя только пользовательское средство. Вот меню с нашим пользовательским инструментом.
Меню RadialController (настраиваемое)
Пользовательское меню RadialController
  1. Выберите пользовательское средство и попробуйте взаимодействия, которые теперь поддерживаются через Surface Dial:
    • Действие поворота перемещает ползунок.
    • Щелчок задает переключатель для включения или выключения.

Ок, давайте подключим эти кнопки.

Шаг 5. Настройка меню во время выполнения

На этом шаге мы подключим кнопки Добавить/Удалить элемент и Сбросить меню RadialController, чтобы показать, как динамически настроить меню.

  1. Откройте файл MainPage_Basic.xaml.cs.

  2. Найдите код, помеченный заголовком этого шага ("// Шаг 5. Настройка меню во время выполнения").

  3. Раскомментируйте код в указанных ниже методах и снова запустите приложение, но не нажимайте ни на какие кнопки (это действие сохраните для следующего шага).

    // 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[] { });
    }
    
  4. Нажмите кнопку Удалить элемент, а затем нажмите и удерживайте рычаг, чтобы снова отобразить меню.

    Обратите внимание, что меню теперь содержит коллекцию инструментов по умолчанию. Помните, что на шаге 3 при настройке настраиваемого меню мы удалили все средства по умолчанию и добавили только наше пользовательское средство. Мы также отметили, что при установке меню пустой коллекции элементы по умолчанию для текущего контекста восстанавливаются. (Мы добавили пользовательское средство перед удалением инструментов по умолчанию.)

  5. Нажмите кнопку "Добавить элемент" , а затем нажмите и удерживайте телефонный номер.

    Обратите внимание, что меню теперь содержит как коллекцию инструментов по умолчанию, так и наш пользовательский инструмент.

  6. Нажмите кнопку меню Reset RadialController , а затем нажмите и удерживайте телефон.

    Обратите внимание, что меню возвращается в исходное состояние.

Шаг 6. Настройка тактильной отдачи устройства

Surface Dial и другие устройства с колесиком могут предоставлять пользователям осязательную обратную связь, соответствующую текущему взаимодействию (основанное на щелчке или повороте).

На этом шаге мы покажем, как настроить тактильную обратную связь, связав элементы управления ползунком и переключателем и используя их для динамического указания тактильного поведения обратной связи. В этом примере переключатель должен быть установлен в положение "включено", чтобы обратная связь была активирована, а значение ползунка указывает, как часто повторяется обратная связь щелчка.

Замечание

Гаптическую обратную связь можно отключить пользователем в разделе "Параметры" – "Устройства" – "Руль".

  1. Откройте файл App.xaml.cs.

  2. Найдите код, помеченный заголовком этого шага ("Шаг 6: Настройка тактильных ощущений устройства").

  3. Закомментируйте первые и третьи строки ("MainPage_Basic" и "MainPage") и раскомментируйте вторую ("MainPage_Haptics").

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
    rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
    
  4. Откройте файл MainPage_Haptics.xaml.

  5. Найдите код, помеченный заголовком этого шага ("<!-- Шаг 6: Настройка тактильной отдачи устройства -->").

  6. Раскомментируйте следующие строки. (Этот код пользовательского интерфейса просто указывает, какие хаптитические функции поддерживаются текущим устройством.)

    <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>
    
  7. Откройте файл MainPage_Haptics.xaml.cs

  8. Найдите код, помеченный заголовком этого шага ("Шаг 6. Настройка Haptics")

  9. Раскомментируйте следующие строки:

    • Windows.Devices.Haptics используется для функциональности в последующих шагах.

      using Windows.Devices.Haptics;
      
    • Здесь мы указываем обработчик события ControlAcquired , активируемого при выборе пользовательского элемента меню RadialController .

      radialController.ControlAcquired += (rc_sender, args) =>
      { RadialController_ControlAcquired(rc_sender, args); };
      
    • Затем мы определим обработчик ControlAcquired , где мы отключаем хаптикальную обратную связь по умолчанию и инициализируем хиптичный пользовательский интерфейс.

      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, система обрабатывает окклюзию устройством и отображает более крупную версию меню, которая располагается вокруг внешней стороны Surface Dial. Эту же информацию может использовать приложение для адаптации пользовательского интерфейса как в случаях присутствия устройства, так и для его предполагаемого использования, например, размещения руки и предплечья пользователя.

Пример, который сопровождается этим руководством, содержит немного более сложный пример, демонстрирующий некоторые из этих возможностей.

Чтобы увидеть это в действии (вам потребуется Surface Studio):

  1. Скачайте пример на устройстве Surface Studio (с установленным Visual Studio)

  2. Открытие примера в Visual Studio

  3. Откройте файл App.xaml.cs

  4. Найдите код, помеченный заголовком этого шага ("Шаг 7. Определение взаимодействия на экране для Surface Studio и аналогичных устройств")

  5. Закомментируйте первую и вторую строки ("MainPage_Basic" и "MainPage_Haptics") и раскомментируйте третью строку ("MainPage")

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
    rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
    
  6. Запустите приложение и поместите Surface Dial в каждую из двух областей управления, чередуясь между ними.
    На экране RadialController

Сводка

Поздравляем! Вы завершили руководство «Начать»: поддержка Surface Dial (и других устройств с колесами) в вашем приложении Windows! Мы показали базовый код, необходимый для поддержки устройства колеса в приложениях Windows, а также как обеспечить некоторые из более богатых пользовательских возможностей, поддерживаемых API RadialController.

взаимодействия с Surface Dial

Справочник по API

Образцы

Примеры тем

Настройка RadialController

Другие примеры

пример Coloring Book

Образцы Universal Windows Platform (C# и C++)

пример Windows desktop