Поделиться через


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

изображение Surface Dial с Surface Studio
Surface Dial с Surface Studio и Surface Pen (можно купить в магазине Microsoft Store).

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

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

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

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

Введение

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

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

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

Предпосылки

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

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

Замечание

Колесные устройства можно настраивать через настройки колеса.

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

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

Пример кода

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

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

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

Это важно

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

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

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

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

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

После того как вы скачали образец приложения RadialController, убедитесь, что оно запускается:

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

Замечание

Кроме того, можно выбрать пункт меню Отладка>начать отладку или выбрать кнопку запуска локального компьютера, показанную здесь: кнопка

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

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

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

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

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

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

Эти изображения показывают два варианта меню по умолчанию. (Существует много других, включая просто базовые системные инструменты, когда рабочий стол Windows активен, и нет приложений на переднем плане, дополнительные средства рукописного ввода при наличии панели 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 (пользовательское)
меню Custom RadialController
  1. Выберите пользовательское средство и попробуйте взаимодействия, которые теперь поддерживаются с помощью Surface Dial.
    • Действие поворота перемещает ползунок.
    • Щелчок задает переключатель для включения или выключения.

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

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

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

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

Образцы

Примеры тем

Настройка контроллера Radial

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

Пример раскраски

Примеры универсальной платформы Windows (C# и C++)

образец рабочего стола Windows