Interacciones de Surface Dial

Surface Dial con Surface Studio y Lápiz (disponible para su compra en Microsoft Store).

Información general

Los dispositivos de rueda de Windows, como el Surface Dial, son una nueva categoría de dispositivos de entrada que permiten una serie de experiencias de interacción con el usuario atractivas y únicas para Windows y sus aplicaciones.

Con un factor de forma basado en una acción de rotación (o gesto), el Surface Dial está diseñado como un dispositivo de entrada secundario y multimodal que complementa la entrada de un dispositivo principal. En la mayoría de los casos, el dispositivo se manipula mediante la mano no dominante de un usuario mientras realiza una tarea con su mano dominante (como la escritura a mano con un bolígrafo). No está diseñado para la entrada de puntero de precisión (como la entrada táctil, el lápiz o el mouse).

Surface Dial también admite una acción de pulsación y suspensión y una acción de clic . Mantener pulsado tiene una sola función: mostrar un menú de comandos. Si el menú está activo, el menú procesa la rotación y el clic en la entrada. De lo contrario, la entrada se pasa a la aplicación para su procesamiento.

Al igual que con todos los dispositivos de entrada de Windows, puedes personalizar la experiencia de interacción de Surface Dial para adaptarse a la funcionalidad de tus aplicaciones.

Integración del sistema

Surface Dial está estrechamente integrado con Windows y admite un conjunto de herramientas predefinidas en el menú: volumen del sistema, desplazamiento, zoom in/out y deshacer/rehacer.

Esta colección de herramientas integradas se adapta al contexto actual del sistema para incluir:

• Una herramienta de brillo del sistema cuando el usuario está en el escritorio de Windows
• Una herramienta de pista anterior/siguiente cuando se reproduce el contenido multimedia

Además de esta compatibilidad general con la plataforma, Surface Dial también está estrechamente integrado con los controles de plataforma de Windows Ink (InkCanvas y InkToolbar).

Surface Dial con el lápiz de Surface

Cuando se usa con Surface Dial, estos controles habilitan funcionalidad adicional para modificar atributos de tinta y controlar la plantilla de regla de la barra de herramientas de tinta.

Al abrir el menú de Surface Dial en una aplicación de entrada manuscrita que usa la barra de herramientas de lápiz, el menú ahora abarca herramientas para controlar el tipo de lápiz y el grosor del pincel. Cuando la regla está habilitada, se agrega una herramienta correspondiente al menú que permite al dispositivo controlar la posición y el ángulo de la regla.

Menú de Surface Dial con herramienta de selección de lápiz para la barra de herramientas de Windows Ink

Menú de Surface Dial con herramienta para ajustar el tamaño del trazo para la barra de herramientas de Windows Ink

Menú de Surface Dial con herramienta de regla para la barra de herramientas de Windows Ink

Personalización del usuario

Los usuarios pueden personalizar algunos aspectos de su experiencia con el Dial a través de la página Configuración de Windows -> Dispositivos -> Rueda, incluidas las herramientas predeterminadas, la vibración (o retroalimentación háptica), y la mano de escritura (o dominante).

Al personalizar la experiencia del usuario de Surface Dial, siempre debes asegurarte de que un comportamiento o función determinado esté disponible y habilitado por el usuario.

Herramientas personalizadas

Aquí se explica la experiencia de usuario y la guía para desarrolladores para personalizar las herramientas expuestas en el menú de Surface Dial.

Guía de experiencia del usuario para herramientas personalizadas

Asegúrese de que las herramientas se corresponden con el contexto actual Cuando te haces claro e intuitivo lo que hace una herramienta y cómo funciona la interacción de Surface Dial, ayudarás a los usuarios a aprender rápidamente y mantenerse centrados en su tarea.

Minimizar el número de herramientas de la aplicación tanto como sea posible
El menú de Surface Dial tiene espacio para siete elementos. Si hay ocho o más elementos, el usuario debe girar el Dial para ver qué herramientas están disponibles en un menú desplegable, lo que dificulta la navegación del menú y hace que sea difícil descubrir y seleccionar las herramientas.

Se recomienda proporcionar una única herramienta personalizada para la aplicación o el contexto de la aplicación. Al hacerlo, puedes establecer esa herramienta en función de lo que hace el usuario sin necesidad de activar el menú Surface Dial y seleccionar una herramienta.

Actualizar dinámicamente la colección de herramientas
Dado que los elementos de menú de Surface Dial no admiten un estado deshabilitado, debes agregar y quitar herramientas de forma dinámica (incluidas las herramientas integradas y predeterminadas) en función del contexto del usuario (vista actual o ventana centrada). Si una herramienta no es relevante para la actividad actual o es redundante, quítela.

No quite la herramienta de configuración de volumen del sistema integrada
Normalmente, el usuario requiere el control de volumen. Es posible que escuchen música mientras usan la aplicación, por lo que las herramientas de volumen y pista siguiente siempre deben ser accesibles desde el menú de Surface Dial. (La herramienta de "siguiente pista" se agrega automáticamente al menú cuando se reproduce contenido multimedia).

Ser coherente con la organización del menú
Esto ayuda a los usuarios a detectar y aprender qué herramientas están disponibles al usar la aplicación y ayuda a mejorar su eficacia al cambiar de herramientas.

Proporcionar iconos de alta calidad coherentes con los iconos integrados
Los iconos pueden transmitir profesionalismo y excelencia, e inspirar la confianza en los usuarios.

• Proporcionar una imagen PNG de 64 x 64 píxeles de alta calidad (44 x 44 es la más pequeña compatible)
• Asegúrese de que el fondo es transparente
• El icono debe rellenar la mayor parte de la imagen.
• Un icono blanco debe tener un contorno negro para que sea visible en modo de contraste alto

Uso de nombres concisos y descriptivos
El nombre de la herramienta se muestra en el menú de herramientas junto con el icono de la herramienta y también lo usan los lectores de pantalla.

• Los nombres deben ser cortos para caber dentro del círculo central del menú de la rueda
• Los nombres deben identificar claramente la acción principal (una acción complementaria puede estar implícita):
  • La rueda de desplazamiento indica el efecto de ambas direcciones de rotación.
  • Deshacer especifica una acción principal, pero rehacer (la acción complementaria) puede deducirse y descubrirse fácilmente por el usuario.

Información orientativa para desarrolladores

Puedes personalizar la experiencia de Surface Dial para complementar la funcionalidad de tus aplicaciones a través de un conjunto completo de API de Windows Runtime.

Como se mencionó anteriormente, el menú predeterminado de Surface Dial se rellena previamente con un conjunto de herramientas integradas que abarcan una amplia gama de características básicas del sistema (volumen del sistema, brillo del sistema, desplazamiento, zoom, deshacer y control multimedia cuando el sistema detecta la reproducción continua de audio o vídeo). Sin embargo, es posible que estas herramientas predeterminadas no proporcionen la funcionalidad necesaria para la aplicación.

En las secciones siguientes, se describe cómo agregar una herramienta personalizada al menú de Surface Dial y especificar qué herramientas integradas se exponen.

Descargue una versión más robusta de este ejemplo de RadialController personalización.

Adición de una herramienta personalizada

En este ejemplo, agregamos una herramienta personalizada básica que pasa los datos de entrada de los eventos de rotación y clic a algunos controles de interfaz de usuario XAML.

1. En primer lugar, declaramos nuestra interfaz de usuario (solo un control deslizante y un botón de alternancia) en XAML.

   
   Interfaz de usuario de la aplicación de ejemplo

   <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. A continuación, en el código subyacente, agregamos una herramienta personalizada al menú Surface Dial y declaramos los controladores de entrada RadialController .

   Obtenemos una referencia al objeto RadialController para Surface Dial (myController) llamando a CreateForCurrentView.

   A continuación, creamos una instancia de un RadialControllerMenuItem (myItem ) llamando a RadialControllerMenuItem.CreateFromIcon.

   A continuación, anexamos ese elemento a la colección de elementos de menú.

   Declaramos los controladores de eventos de entrada (ButtonClicked y RotationChanged) para el objeto RadialController .

   Por último, definimos los controladores de eventos.

   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;
       }
   }
   

Cuando ejecutamos la aplicación, usamos Surface Dial para interactuar con ella. En primer lugar, presionamos y presionamos para abrir el menú y seleccionar nuestra herramienta personalizada. Una vez activada la herramienta personalizada, el control deslizante se puede ajustar girando el Dial y el interruptor se puede alternar haciendo clic en el Dial.

La interfaz de usuario de la aplicación de muestra se ha activado mediante la herramienta personalizada Surface Dial

Especificar las herramientas integradas

Puedes usar la clase RadialControllerConfiguration para personalizar la colección de elementos de menú integrados para la aplicación.

Por ejemplo, si la aplicación no tiene ninguna región de desplazamiento o zoom y no requiere funcionalidad de deshacer o rehacer, estas herramientas se pueden quitar del menú. Se abre espacio en el menú para agregar herramientas personalizadas para la aplicación.

Según las directrices de diseño, no se recomienda quitar las herramientas de control multimedia (volumen y pista anterior o siguiente), ya que los usuarios suelen tener música en segundo plano reproduciendo mientras realizan otras tareas.

Aquí se muestra cómo configurar el menú surface Dial para incluir solo controles multimedia para el volumen y la pista siguiente o anterior.

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

Interacciones personalizadas

Como se mencionó, Surface Dial admite tres gestos (presionar y mantener presionado, girar, hacer clic) con las interacciones predeterminadas correspondientes.

Asegúrese de que cualquier interacción personalizada basada en estos gestos tenga sentido para la acción o herramienta seleccionada.

Pulsar y sostener

Este gesto activa y muestra el menú Surface Dial, no hay ninguna funcionalidad de aplicación asociada a este gesto.

De forma predeterminada, el menú se muestra en el centro de la pantalla del usuario. Sin embargo, el usuario puede agarrarlo y moverlo en cualquier lugar que elija.

Rotate

Surface Dial está diseñado principalmente para facilitar la rotación en interacciones que requieren ajustes suaves e incrementales de controles o valores analógicos.

El dispositivo se puede girar tanto en el sentido de las agujas del reloj como en sentido contrario, y también puede proporcionar retroalimentación háptica para indicar distancias discretas.

Guía de experiencia del usuario para interacciones personalizadas

Las herramientas con sensibilidad continua o alta sensibilidad rotativa deben deshabilitar la retroalimentación háptica

La retroalimentación háptica coincide con la sensibilidad rotacional de la herramienta activa. Se recomienda deshabilitar la retroalimentación háptica para las herramientas con sensibilidad rotacional continua o alta, ya que la experiencia del usuario puede resultar incómoda.

La mano dominante no debe afectar a las interacciones basadas en rotación

Surface Dial no puede detectar qué mano se está usando, pero el usuario puede establecer la escritura (o mano dominante) en Configuración de Windows -> Dispositivo -> Lápiz y Windows Ink.

La localización debe tenerse en cuenta durante todas las interacciones de rotación

Maximice la satisfacción del cliente al acomodar y adaptar sus interacciones a localizaciones y diseños de derecha a izquierda.

Las herramientas y comandos integrados del menú Dial siguen estas directrices para las interacciones basadas en rotación:

Información orientativa para desarrolladores

A medida que el usuario gira el dispositivo, los eventos RadialController.RotationChanged se activan en función de un delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) en relación con la dirección de rotación. La sensibilidad (o resolución) de los datos se puede establecer con la propiedad RadialController.RotationResolutionInDegrees .

En general, se recomienda deshabilitar los comentarios hápticos cuando la resolución de rotación esté establecida en menos de 5 grados. Esto proporciona una experiencia más fluida para las interacciones continuas.

Puede habilitar y deshabilitar comentarios hápticos para herramientas personalizadas estableciendo la propiedad RadialController.UseAutomaticHapticFeedback .

Este es un ejemplo de cómo personalizar la resolución de los datos de rotación y habilitar o deshabilitar los comentarios hápticos.

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

Hacer clic en Surface Dial es similar a hacer clic en el botón izquierdo del mouse (el estado de rotación del dispositivo no tiene ningún efecto en esta acción).

Guía de experiencia de usuario

No asigne una acción o un comando a este gesto si el usuario no se puede recuperar fácilmente del resultado

Cualquier acción realizada por la aplicación en función del usuario que haga clic en Surface Dial debe ser reversible. Permitir siempre que el usuario navegue fácilmente por la pila de navegación de la aplicación y restaure un estado anterior de la aplicación.

Las operaciones binarias como silenciar o desactivar o mostrar u ocultar proporcionan buenas experiencias de usuario con el gesto de clic.

Las herramientas modales no deben estar habilitadas ni deshabilitadas haciendo clic en Surface Dial

Algunos modos de aplicación o herramienta pueden entrar en conflicto con, o deshabilitar, interacciones que dependen de la rotación. Las herramientas, como la regla en la barra de herramientas de Windows Ink, deben activarse o desactivarse a través de otras prestaciones de la interfaz de usuario (la barra de herramientas de Windows Ink proporciona un control ToggleButton integrado).

Para las herramientas modales, asigne el elemento de menú Surface Dial activo a la herramienta de destino o al elemento de menú seleccionado anteriormente.

Información orientativa para desarrolladores

Cuando se hace clic en Surface Dial, se desencadena un evento RadialController.ButtonClicked . RadialControllerButtonClickedEventArgs incluye una propiedad Contact que contiene la ubicación y el área delimitadora del contacto de Surface Dial en la pantalla de Surface Studio. Si Surface Dial no está en contacto con la pantalla, esta propiedad es null.

En pantalla

Como se ha descrito anteriormente, Surface Dial se puede usar junto con Surface Studio para mostrar el menú de Surface Dial en un modo especial en pantalla.

Cuando esté en este modo, puede integrar y personalizar aún más las experiencias de interacción con el Dial en sus aplicaciones. Algunos ejemplos de experiencias únicas solo son posibles con Surface Dial y Surface Studio:

• Mostrar herramientas contextuales (como una paleta de colores) en función de la posición de Surface Dial, lo que facilita la búsqueda y el uso.
• Establecer la herramienta activa basada en la interfaz de usuario en la que se coloca Surface Dial
• Magnificar un área de pantalla en función de la ubicación de Surface Dial
• Interacciones únicas del juego basadas en la ubicación de la pantalla

Guía de experiencia de usuario para interacciones en pantalla

Las aplicaciones deben responder cuando Surface Dial se detecta en pantalla

Los comentarios visuales ayudan a indicar a los usuarios que la aplicación ha detectado el dispositivo en la pantalla de Surface Studio.

Ajustar la interfaz de usuario relacionada con Surface Dial en función de la ubicación del dispositivo

El dispositivo (y el cuerpo del usuario) pueden ocluir la interfaz de usuario crítica en función de dónde lo coloque el usuario.

Ajustar la interfaz de usuario relacionada con Surface Dial en función de la interacción del usuario

Además de la oclusión de hardware, la mano y el brazo de un usuario pueden ocluir parte de la pantalla al usar el dispositivo.

El área ocluida depende de la mano que se use con el dispositivo. Dado que el dispositivo está diseñado para usarse principalmente con la mano no dominante, la interfaz de usuario relacionada con Surface Dial debe ajustarse a la mano opuesta especificada por el usuario (Configuración de Windows > Dispositivos > Lápiz y Windows Ink > Elija con qué mano escribe).

Las interacciones deben responder a la posición de Surface Dial en lugar del movimiento

El pie del dispositivo está diseñado para adherirse a la pantalla en lugar de deslizarse, ya que no se trata de un dispositivo señalador de precisión. Por lo tanto, esperamos que sea más común que los usuarios levanten y coloquen Surface Dial en lugar de arrastrarlo a través de la pantalla.

Usar la posición de la pantalla para determinar la intención del usuario

Establecer la herramienta activa en función del contexto de la interfaz de usuario, como la proximidad a un control, lienzo o ventana, puede mejorar la experiencia del usuario reduciendo los pasos necesarios para realizar una tarea.

Información orientativa para desarrolladores

Cuando Surface Dial se coloca en la superficie del digitalizador de Surface Studio, se desencadena un evento RadialController.ScreenContactStarted y se proporciona la información de contacto (RadialControllerScreenContactStartedEventArgs.Contact) a la aplicación.

Del mismo modo, si se hace clic en Surface Dial cuando está en contacto con la superficie del digitalizador de Surface Studio, se desencadena un evento RadialController.ButtonClicked y se proporciona la información de contacto (RadialControllerButtonClickedEventArgs.Contact) a la aplicación.

La información de contacto (RadialControllerScreenContact) incluye la coordenada X/Y del centro de Surface Dial en el espacio de coordenadas de la aplicación (RadialControllerScreenContact.Position), así como el rectángulo delimitador (RadialControllerScreenContact.Bounds) en píxeles independientes del dispositivo (DIP). Esta información es muy útil para proporcionar contexto a la herramienta activa y proporcionar comentarios visuales relacionados con el dispositivo al usuario.

En el ejemplo siguiente, hemos creado una aplicación básica con cuatro secciones diferentes, cada una de las cuales incluye un control deslizante y un botón de alternancia. A continuación, usamos la posición en pantalla de Surface Dial para determinar qué conjunto de controles deslizantes y alternancias se controlan mediante Surface Dial.

1. En primer lugar, declaramos nuestra interfaz de usuario (cuatro secciones, cada una con un control deslizante y un botón de alternancia) en XAML.

   
   Interfaz de usuario de la aplicación de ejemplo

   <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. Este es el código subyacente con controladores definidos para la posición de pantalla de 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;
       }
     }
   }
   

Cuando ejecutamos la aplicación, usamos Surface Dial para interactuar con ella. En primer lugar, colocamos el dispositivo en la pantalla de Surface Studio, que la aplicación detecta y asocia con la sección inferior derecha (consulta la imagen). A continuación, presionamos y mantenemos presionado el Surface Dial para abrir el menú y seleccionar nuestra herramienta personalizada. Una vez activada la herramienta personalizada, el control deslizante se puede ajustar girando el Surface Dial y el conmutador se puede activar o desactivar haciendo clic en el Surface Dial.

La interfaz de usuario de la aplicación de muestra se ha activado mediante la herramienta personalizada Surface Dial

Resumen

En este tema se proporciona una visión general sobre el dispositivo de entrada Surface Dial, con orientación sobre la experiencia de usuario y para desarrolladores sobre cómo personalizar la experiencia del usuario para escenarios fuera de la pantalla, así como escenarios en la pantalla cuando se usa con el Surface Studio.

Envíe sus preguntas, sugerencias y comentarios a radialcontroller@microsoft.com.

Artículos relacionados

Tutorial: Compatibilidad con Surface Dial (y otros dispositivos de rueda) en la aplicación de Windows

Referencia de API

• Clase RadialController
• Clase RadialControllerButtonClickedEventArgs
• RadialControllerConfiguration clase
• Clase RadialControllerControlAcquiredEventArgs
• Clase RadialControllerMenu
• Clase RadialControllerMenuItem
• Clase RadialControllerRotationChangedEventArgs
• Clase RadialControllerScreenContact
• RadialControllerScreenContactContinuedEventArgs clase
• La clase RadialControllerScreenContactStartedEventArgs
• Enumeración RadialControllerMenuKnownIcon
• Enumeración RadialControllerSystemMenuItemKind

Samples

Ejemplos de temas

Personalización de RadialController

Otros ejemplos

Ejemplo de libro de colorear

Tutorial de introducción: Compatibilidad con Surface Dial (y otros dispositivos de rueda) en la aplicación de Windows

Ejemplos de la Plataforma universal de Windows (C# y C++)

Ejemplo de escritorio de Windows