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

Изображение Surface Dial и Surface Studio
Surface Dial с Surface Studio и стилусом.

Обзор

Устройства с колесом для Windows, такие как Surface Dial, — это новая категория устройств ввода, которая обеспечивает разнообразные и уникальные возможности взаимодействия с пользователем для Windows и приложений для Windows.

Это важно

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

С форм-фактором на основе действия вращения (или жеста) Surface Dial предназначено как вспомогательное многомодальное устройство ввода, дополняющее ввод с основного устройства. В большинстве случаев устройство управляется не доминирующей рукой пользователя, в то время как доминирующая рука выполняет задачу (например, вписанием ручкой). Он не предназначен для точного ввода указателя (такие как сенсорный ввод, перо или мышь).

Surface Dial также поддерживает действие нажатие и удерживание и действие щелчок. Нажатие и удержание имеет одну функцию: отображение меню команд. Если меню активно, сигнал от поворота и нажатия обрабатывается меню. В противном случае входные данные передаются приложению для обработки.

Как и со всеми устройствами ввода Windows, вы можете настроить и адаптировать взаимодействие с Surface Dial в соответствии с требованиями ваших приложений.

Подсказка

Используя вместе, Surface Dial и новый Surface Studio могут обеспечить еще более отличительный пользовательский опыт.

Помимо описанного меню нажатия и удержания по умолчанию, Surface Dial также можно разместить непосредственно на экране Surface Studio. Это позволяет специальное меню "на экране".

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

Surface Dial внеэкранное меню

Снимок экрана, на котором отображено меню вне экрана Surface Dial.

экранное меню Surface Dial

Скриншот меню «Surface Dial» на экране.

Интеграция системы

Surface Dial тесно интегрирован с Windows и поддерживает набор встроенных инструментов в меню: системная громкость, прокрутка, увеличение/уменьшение масштаба и отмена действия/повтор действия.

Эта коллекция встроенных инструментов адаптируется к текущему системного контексту для включения:

  • Инструмент управления яркостью системы для пользователей на рабочем столе Windows
  • Предыдущая/следующая кнопка при воспроизведении медиа

В дополнение к этой общей поддержке платформы, Surface Dial также тесно интегрирован с элементами управления платформы Windows Ink (InkCanvas и InkToolbar).

Surface Dial с Surface Pen
Surface Dial с Surface Pen

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

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

меню Surface Dial с инструментом выбора пера для панели инструментов рукописного ввода Windows Ink
Меню Surface Dial с инструментом выбора пера для панели инструментов Windows Ink

меню Surface Dial с инструментом изменения размера штриха для панели инструментов Windows Ink
меню Surface Dial с инструментом размера линии для панели инструментов Windows Ink

меню Surface Dial с инструментом линейка для панели инструментов Windows Ink
меню Surface Dial с инструментом линейки для панели рукописного ввода Windows Ink

Настройка пользователя

Пользователи могут настроить некоторые аспекты использования Dial через страницу Windows Параметры -> Устройства -> Колесо, включая инструменты по умолчанию, вибрацию (или тактильную обратную связь) и ведущую руку.

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

Пользовательские инструменты

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

Руководство по пользовательскому опыту для кастомных инструментов

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

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

Рекомендуем предоставить один настраиваемый инструмент для приложения или его контекста. Это позволяет задать это средство на основе того, что делает пользователь, не требуя от них активации меню Surface Dial и выбора инструмента.

Динамическое обновление коллекции средств
Так как элементы меню Surface Dial не поддерживают отключенное состояние, необходимо динамически добавлять и удалять средства (включая встроенные, средства по умолчанию) на основе контекста пользователя (текущее представление или фокусное окно). Если средство не относится к текущему действию или оно избыточно, удалите его.

Это важно

При добавлении элемента в меню убедитесь, что элемент еще не существует.

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

Будьте последовательны в организации меню
Это помогает пользователям обнаруживать и изучать доступные средства при использовании приложения и повысить эффективность при переключении средств.

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

  • Укажите высококачественное изображение 64 x 64 пикселей PNG (44 x 44 является самым маленьким)
  • Убедитесь, что фон прозрачный
  • Значок должен заполнить большую часть изображения
  • Белый значок должен иметь черный контур для отображения в режиме высокой контрастности

Снимок экрана: значок с альфа-фоном.

Значок с альфа-фоном

Снимок экрана: значок, отображаемый в меню колесика с темой по умолчанию.

Значок, отображаемый в меню колесика мыши с темой по умолчанию

Снимок экрана: значок, который отображается на колёсном меню с темой

Значок, отображаемый в меню колесика с белой темой высокой контрастности

Использование кратких и описательных имен
Имя инструмента отображается в меню инструментов вместе с значком инструмента и также используется средствами чтения с экрана.

  • Имена должны быть короткими, чтобы поместиться внутри центрального круга меню колесика
  • Имена должны четко идентифицировать основное действие (дополнительное действие может быть подразумеваемым):
    • Прокрутка указывает эффект обоих направлений поворота
    • Отмена указывает основное действие, но повтор (дополнительное действие) можно подразумевать и легко обнаруживается пользователем.

Руководство для разработчика

Вы можете настроить интерфейс Surface Dial для дополнения функциональных возможностей приложений с помощью комплексного набора API Windows Runtime.

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

В следующих разделах описано, как добавить настраиваемое средство в меню Surface Dial и определить, какие встроенные средства открыты.

Скачайте более надежную версию этого примера из настройки RadialController.

Добавление пользовательского инструмента

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

  1. Сначала мы объявляем наш пользовательский интерфейс (только ползунок и кнопку переключателя) в XAML.

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

    <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>
    
  2. Затем в коде мы добавим пользовательское средство в меню Surface Dial и объявим обработчики входных данных RadialController.

    Мы получаем ссылку на объект RadialController для объекта Surface Dial (myController), вызвав CreateForCurrentView.

    Затем мы создадим экземпляр RadialControllerMenuItem (myItem), вызвав RadialControllerMenuItem.CreateFromIcon.

    Затем мы добавим этот элемент в коллекцию элементов меню.

    Мы объявляем обработчики событий ввода (ButtonClicked и RotationChanged) для объекта RadialController.

    Наконец, мы определим обработчики событий.

    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

Указание встроенных средств

Вы можете использовать класс RadialControllerConfiguration для настройки коллекции встроенных элементов меню вашего приложения.

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

Это важно

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

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

Здесь показано, как настроить меню 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 поддерживает три жеста (нажимайте и удерживайте, поворачивайте, щелкайте) с соответствующими взаимодействиями по умолчанию.

Гарантируйте, что любое взаимодействие, основанное на этих жестах, соответствует выбранному действию или инструменту.

Замечание

Взаимодействие зависит от состояния меню Surface Dial. Если меню активно, оно обрабатывает входные данные; в противном случае ваше приложение делает это.

Нажмите и удерживайте

Этот жест активирует и отображает меню Surface Dial, функциональность приложений не связана с этим жестом.

По умолчанию меню отображается в центре экрана пользователя. Однако пользователь может схватить его и переместить в любое место по своему выбору.

Замечание

Когда Surface Dial размещается на экране Surface Studio, меню отображается в центре экрана, где расположен Surface Dial.

Вращать

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

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

Замечание

Пользователь может отключить тактильную обратную связь на странице Windows Settings -> Devices -> Wheel.

Руководство по пользовательскому опыту для индивидуальных взаимодействий

Средства с непрерывной или высокой чувствительностью поворота должны отключать хаптичную обратную связь

Haptic feedback соответствует чувствительности вращения активного инструмента. Рекомендуется отключить тактильную обратную связь для инструментов с непрерывной или высокой чувствительностью к вращению, так как взаимодействие пользователя может стать неудобным.

Доминирующая рука не должна влиять на вращательные взаимодействия

Surface Dial не может определить, какая рука используется, но пользователь может задать активную руку (или доминирующую руку) в Параметры Windows -> Устройства -> Перо и Windows Ink.

Локаль следует учитывать для всех операций с вращением

Обеспечьте максимальное удовлетворение клиентов, адаптируя свои взаимодействия в соответствии с языковыми стандартами и макетами с письмом справа налево.

Встроенные средства и команды в меню "Циферблат" следуют этим рекомендациям для взаимодействия на основе поворота:

Лево

Вверх

Out

Изображение Surface Dial

Правильно

Вниз

In

Концептуальное направление Сопоставление с Surface Dial Поворот по часовой стрелке Поворот против часовой стрелки
Горизонтальный Сопоставление слева и справа на основе верхней части Surface Dial Правильно Лево
Вертикальный Сопоставление вверх и вниз в левой части Surface Dial Вниз Вверх
Ось Z В (или ближе) сопоставлено с /справа
Вне (или дальше) сопоставлено с вниз/слева
In Out

Руководство для разработчика

По мере поворота устройства события RadialController.RotationChanged инициируются на основе изменения (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) относительно направления поворота. Чувствительность (или разрешение) данных можно задать с помощью свойства RadialController.RotationResolutionInDegrees .

Замечание

По умолчанию вращающееся входное событие передается объекту RadialController только при повороте устройства не менее 10 градусов. Каждое входное событие приводит к тому, что устройство будет вибрировать.

Как правило, рекомендуется отключить хаптичную обратную связь, если разрешение поворота имеет значение менее 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 аналогично нажатию левой кнопки мыши (состояние поворота устройства не влияет на это действие).

Руководство по пользовательскому интерфейсу

Не сопоставляйте действие или команду с этим жестом, если пользователь не может легко восстановиться после результата.

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

Двоичные операции, такие как отключение/включение или отображение/скрытие, обеспечивают хороший пользовательский опыт с помощью жеста щелчка.

Средства Modal не должны быть включены или отключены путем щелчка Surface Dial

Некоторые режимы либо приложений, либо инструментов могут конфликтовать или отключать взаимодействия, зависящие от поворота. Такие средства, как линейка на панели инструментов Windows рукописного ввода, следует переключать или выключать с помощью других возможностей пользовательского интерфейса (панель инструментов рукописного ввода предоставляет встроенный элемент управления ToggleButton).

Для модальных инструментов сопоставьте активный элемент меню Surface Dial с целевым инструментом или с ранее выбранным элементом меню.

Руководство для разработчика

При нажатии Surface Dial событие RadialController.ButtonClicked инициируется. RadialControllerButtonClickedEventArgs включает свойство Contact, содержащее положение и границы точки касания Surface Dial на экране Surface Studio. Если Surface Dial не связан с экраном, это свойство равно NULL.

На экране

Как описано ранее, Surface Dial можно использовать вместе с Surface Studio для отображения меню Surface Dial в специальном режиме на экране.

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

  • Отображение контекстных инструментов (например, цветовой палитры) на основе положения Surface Dial, что упрощает поиск и использование.
  • Настройка активного инструмента в зависимости от пользовательского интерфейса, на который устанавливается Surface Dial
  • Увеличение области экрана на основе расположения устройства Surface Dial
  • Уникальные взаимодействия с игрой на основе расположения экрана

Руководство по пользовательскому интерфейсу для взаимодействия на экране

Приложения должны реагировать, когда Surface Dial обнаруживается на экране

Визуальная обратная связь помогает пользователям понять, что приложение обнаружило устройство на экране Surface Studio.

Настраивайте пользовательский интерфейс Surface Dial в зависимости от расположения устройства

Устройство (и тело пользователя) может перекрывать критически важный интерфейс пользователя в зависимости от того, где пользователь его размещает.

Настройте элементы пользовательского интерфейса, связанные с Surface Dial, на основе взаимодействия с пользователем

Кроме аппаратной окклюзии, рука и предплечье пользователя могут закрывать часть экрана при использовании устройства.

Зависимость площади перекрытия от того, какая рука используется с устройством. Так как устройство предназначено для использования в первую очередь с недоминирующей рукой, пользовательский интерфейс Surface Dial должен настраиваться для противоположной руки, указанной пользователем (Параметры Windows > Устройства > Перо и Windows Ink > Выберите, с какой рукой вы пишете).

Взаимодействия должны реагировать на позицию Surface Dial, а не на перемещение

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

Использование положения экрана для определения намерения пользователя

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

Руководство для разработчика

Когда Surface Dial помещается на поверхность дигитайзера Surface Studio, происходит событие RadialController.ScreenContactStarted, и информация о контакте (RadialControllerScreenContactStartedEventArgs.Contact) передается вашему приложению.

Также, если Surface Dial нажимается при контакте с поверхностью дигитайзера Surface Studio, срабатывает событие RadialController.ButtonClicked, и контактные данные (RadialControllerButtonClickedEventArgs.Contact) предоставляются вашему приложению.

Информация о контакте (RadialControllerScreenContact) включает координату X/Y центра Surface Dial в координатном пространстве приложения (RadialControllerScreenContact.Position), а также ограничивающий прямоугольник (RadialControllerScreenContact.Bounds) в независимых от устройства пикселах (DIPs). Эта информация очень полезна для предоставления контекста активному инструменту и предоставления визуальной обратной связи, связанной с устройством, пользователю.

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

  1. Сначала мы объявляем наш пользовательский интерфейс (четыре раздела, каждый из которых содержит ползунок и кнопку переключателя) в XAML.

    Снимок экрана: пример радиального контроллера с четырьмя горизонтальными ползунками слева.
    Пример пользовательского интерфейса приложения

    <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>
    
  2. На фоне представлен код с обработчиками, определенными для положения 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.

Снимок экрана: пример радиального контроллера с четырьмя горизонтальными ползунками слева и выделенным четвертым контроллером.
Пример пользовательского интерфейса приложения, активированного с помощью пользовательского средства Surface Dial

Сводка

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

Отправьте свои вопросы, предложения и отзывы radialcontroller@microsoft.com.

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

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

Образцы

Примеры тем

Настройка RadialController

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

пример Coloring Book

Учебник: Начало работы. Поддержка Surface Dial (и других колесных устройств) в вашем приложении Windows

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

пример Windows desktop