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


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

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

Обзор

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

Это важно

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

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

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

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

Подсказка

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

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

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

Контекстное меню Surface Dial за пределами экрана

Снимок меню Surface Dial вне дисплея.

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

снимок экрана экранного меню Surface Dial.

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

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

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

  • Инструмент для регулировки яркости системы, когда пользователь находится на Windows Desktop
  • Инструмент для переключения на предыдущий или следующий трек при воспроизведении медиа

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

Surface Dial с Surface Pen
Surface Dial c Surface Pen

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

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

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

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

меню Surface Dial c инструментом линейки для панели инструментов 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.

Как упоминалось ранее, меню 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 —> Устройства —> Колесо.

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

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

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

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

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

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

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

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

Лево

Вверх

Вышел

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

Правильно

Вниз

В

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

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

По мере поворота устройства события 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;
  }
}

Щелкните

Нажатие Surface Dial аналогично нажатию левой кнопки мыши (состояние поворота устройства не влияет на это действие).

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

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

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

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

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

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

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

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

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

На экране

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

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

Отправьте свои вопросы, предложения и отзывы [email protected].

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

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

Образцы

Примеры тем

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

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

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

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

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

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