Interacciones de Surface Dial

Artículo
06/02/2023

Imagen de Surface Dial con Surface Studio
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 Surface Dial, son una nueva categoría de dispositivo de entrada que permiten obtener una serie de experiencias de interacción de usuario atractivas y únicas para aplicaciones de Windows y Windows.

Importante

En este tema, detallaremos específicamente a las interacciones con Surface Dial, pero la información es aplicable a todos los dispositivos de rueda de Windows.

Con un factor de forma basado en una acción de rotación (o gesto), Surface Dial está pensado como un dispositivo de entrada multi modal secundario que complementa la entrada de un dispositivo primario. 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 una entrada manuscrita con un lápiz). No está diseñado para entradas de puntero de precisión (como la entrada táctil, el lápiz o el ratón).

Surface Dial también admite una acción Pulsar y sostener y una acción de clic. La opción Pulsar y sostener 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.

Igual que sucede con todos los dispositivos de entrada de Windows, puede personalizar a su gusto la experiencia de interacción de Surface Dial para adaptarla a la funcionalidad de sus aplicaciones.

Sugerencia

Cuando use juntos Surface Dial y el nuevo Surface Studio, podrá obtener una experiencia de usuario aún más característica.

Además de la experiencia predeterminada del menú de pulsar y sostener que se describe aquí, Surface Dial también se puede colocar directamente en la pantalla de Surface Studio. Esto permite ver un menú especial "en pantalla".

Al detectar tanto la ubicación de contacto como los límites de Surface Dial, el sistema usa esta información para controlar la oclusión del dispositivo y mostrar una versión más amplia del menú que se ajusta alrededor del exterior del dial. La aplicación también puede usar esta misma información para adaptar la interfaz de usuario a la presencia del dispositivo y a su uso previsto; por ejemplo, para ajustar la colocación de la mano y el brazo del usuario.

Menú fuera de pantalla de Surface Dial

Menú en pantalla de Surface Dial

Integración del sistema

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

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

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

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

Surface Dial con el lápiz para Surface

Cuando se usa con Surface Dial, estos controles habilitan funcionalidades adicionales para modificar los atributos de entrada de lápiz y controlar la galería de símbolos de regla de la barra de herramientas de entrada de lápiz.

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

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

Menú de Surface Dial con la herramienta de selección de tamaño de trazo para la barra de herramientas de Windows Ink

Menú de Surface Dial con la 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 comentarios hápticos) y la mano de escritura (o dominante).

Al personalizar la experiencia del usuario de Surface Dial, asegúrese siempre de tener disponible un comportamiento o función determinado y que lo haya habilitado 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 sus herramientas se corresponden con el contexto actual Cuando indica de forma clara e intuitiva lo que hace una herramienta y cómo funciona la interacción de Surface Dial, permitirá que los usuarios aprendan rápidamente y se mantengan centrados en su tarea.

Minimice 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 control flotante de desbordamiento; esto dificulta la navegación del menú y las herramientas son más difíciles de detectar y seleccionar.

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

Actualización dinámica de la colección de herramientas
Dado que los elementos de menú de Surface Dial no admiten un estado deshabilitado, debe 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.

Importante

Al agregar un elemento al menú, asegúrese de que el elemento aún no existe.

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

Sea 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 les permite mejorar su eficacia al cambiar de herramientas.

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

Proporcione 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 sea transparente.
El icono debe rellenar la mayor parte de la imagen.
Un icono blanco debe tener un contorno negro para que sea visible en el modo de contraste alto.

Icono con fondo alfa

Icono que se muestra en el menú de rueda con el tema predeterminado

Icono que se muestra en el menú de rueda con el tema Blanco de contraste alto

Use 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 que quepan dentro del círculo central del menú de rueda
Los nombres deben identificar claramente la acción principal (una acción complementaria puede estar implícita):
- El desplazamiento indica el efecto de ambas direcciones de rotación.
- La opción Deshacer especifica una acción principal, pero el usuario puede deducir y detectar fácilmente la opción Rehacer (la acción complementaria).

Instrucciones para desarrolladores

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

Tal 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 sólida de este ejemplo de personalización RadialController.

Adición de una herramienta personalizada

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

En primer lugar, debe declarar la interfaz de usuario (solo tiene un control deslizante y un botón de alternancia) en XAML.

Captura de pantalla del ejemplo de controlador radial con el control deslizante horizontal establecido a la izquierda.
Interfaz de usuario de la aplicación de muestra

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

A continuación, en el código subyacente, agregue una herramienta personalizada al menú de Surface Dial y declare los controladores de entrada RadialController.

Obtendrá una referencia al objeto RadialController para Surface Dial (myController) si llama a CreateForCurrentView.

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

Después, anexe ese elemento a la colección de elementos de menú.

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

Por último, defina 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 ejecute la aplicación, use Surface Dial para interactuar con ella. En primer lugar, matenga presionado para abrir el menú y seleccionar la herramienta personalizada. Una vez activada la herramienta personalizada, el control deslizante se puede ajustar girando el dial; asimismo, el conmutador se puede activar o desactivar haciendo clic en dial.

Captura de pantalla del ejemplo de controlador radial con el control deslizante horizontal establecido en el centro.
Interfaz de usuario de la aplicación de muestra que se activó mediante la herramienta personalizada de surface Dial

Especificación de las herramientas integradas

Puede 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 la 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.

Importante

El menú de Surface Dial debe tener al menos un elemento de menú. Si se quitan todas las herramientas predeterminadas antes de agregar una de las herramientas personalizadas, se restauran las herramientas predeterminadas y la herramienta se anexa a la colección predeterminada.

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 reproducir música en segundo plano mientras realizan otras tareas.

Aquí se muestra cómo configurar el menú de Surface Dial para incluir solo controles multimedia como 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

Tal como se mencionó, Surface Dial admite tres gestos (pulsar y sostener, 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.

Nota:

La experiencia de interacción depende del estado del menú de Surface Dial. Si el menú está activo, procesa la entrada; de lo contrario, la aplicación se encarga de ello.

Pulsar y sostener

Este gesto activa y muestra el menú de 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 a cualquier lugar que elija.

Nota:

Cuando Surface Dial se coloca en la pantalla de Surface Studio, el menú se centra en la ubicación en pantalla de Surface Dial.

Girar

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

El dispositivo se puede girar en sentido contrario a las agujas del reloj y también puede proporcionar comentarios hápticos para indicar distancias discretas.

Nota:

El usuario puede deshabilitar los comentarios hápticos en la página Configuración de Windows -> Dispositivos -> Rueda.

Guía de experiencia del usuario para interacciones personalizadas

Las herramientas con sensibilidad rotacional continua o alta deben deshabilitar los comentarios hápticos

Los comentarios hápticos coinciden con la sensibilidad rotacional de la herramienta activa. Se recomienda deshabilitar los comentarios hápticos 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 la rotación

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

La configuración regional debe tenerse en cuenta para todas las interacciones de rotación

Maximice la satisfacción del cliente mediante la agregación y adaptación de interacciones a diseños de configuración regional y de derecha a izquierda.

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

Izquierda

Up (Arriba)

Fuera

Imagen de Surface Dial

Right

Bajar

Dirección conceptual	Asignación a Surface Dial	Rotación en sentido de las agujas del reloj	Rotación en sentido contrario a las agujas del reloj
Horizontal	Asignación izquierda y derecha basada en la parte superior de Surface Dial	Right	Izquierda
Vertical	Asignación ascendente y descendente basada en el lado izquierdo de Surface Dial	Bajar	Up (Arriba)
Eje Z	Dentro (o más cerca), asignado a arriba/derecha Fuera (o más lejos), asignado a abajo/izquierda	En	Fuera

Instrucciones para desarrolladores

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

Nota:

De forma predeterminada, un evento de entrada rotacional se entrega a un objeto RadialController solo cuando el dispositivo gira un mínimo de 10 grados. Cada evento de entrada hace que el dispositivo vibre.

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 los comentarios hápticos de las herramientas personalizadas estableciendo la propiedad RadialController.UseAutomaticHapticFeedback.

Nota:

No se puede invalidar el comportamiento háptico de las herramientas del sistema, como el control de volumen. Para estas herramientas, el usuario solo puede deshabilitar los comentarios hápticos desde la página de configuración de la rueda.

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

Haga clic

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

Directrices sobre la 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 que realice la aplicación en función del usuario que haga clic en Surface Dial debe ser reversible. Permita siempre que el usuario recorra fácilmente la pila de retroceso de la aplicación y restaure un estado anterior de la aplicación.

Las operaciones binarias como Silenciar o Reactivar audio o Mostrar u Ocultar proporcionan buenas experiencias de usuario con el gesto de clic.

Las herramientas modales no deben habilitarse ni deshabilitarse haciendo clic en Surface Dial

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

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

Instrucciones 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 de límite 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

Tal 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 se encuentra en este modo, puede integrar y personalizar aún más las experiencias de interacción del dial con las aplicaciones. Algunos ejemplos de experiencias únicas solo son posibles con Surface Dial y Surface Studio:

Puede 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.
Puede establecer la herramienta activa basada en la interfaz de usuario en la que se coloca Surface Dial.
Puede magnificar un área de pantalla en función de la ubicación de Surface Dial.
Puede tener interacciones únicas de juego según 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 bloquear 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 del bloqueo del hardware, la mano y el brazo de un usuario pueden bloquear parte de la pantalla al usar el dispositivo.

El área bloqueada depende de la mano que se use con el dispositivo. Como el dispositivo está diseñado para usarse principalmente con la mano no dominante, la interfaz de usuario relacionada con Surface Dial debe ajustarse para la mano opuesta que haya especificado el usuario (Configuración de Windows > Dispositivos > Lápiz y Windows Ink > opción Elegir la mano con la que escribe).

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

El pie del dispositivo está diseñado para pegarse a la pantalla en lugar de deslizarse, ya que no es un dispositivo de señalización de precisión. Por lo tanto, se supone que para los usuarios es más común levantar y colocar Surface Dial donde quieran en lugar de arrastrarlo a través de la pantalla.

Utilización de 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.

Instrucciones 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 al usuario comentarios visuales relacionados con el dispositivo.

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, utilizará la posición en pantalla de Surface Dial para determinar qué conjunto de controles deslizantes y alternancias se controlan mediante Surface Dial.

En primer lugar, debe declarar la interfaz de usuario (tiene cuatro secciones, cada una con un control deslizante y un botón de alternancia) en XAML.

Captura de pantalla del ejemplo de controlador radial con cuatro controles deslizantes horizontales establecidos a la izquierda.
Interfaz de usuario de la aplicación de muestra

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

Este es el código subyacente con controladores definidos para la posición en 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 ejecute la aplicación, use Surface Dial para interactuar con ella. En primer lugar, debe colocar el dispositivo en la pantalla de Surface Studio, para que la aplicación pueda detectarlo y asociarlo con la sección inferior derecha (consulte la imagen). En primer lugar, matenga presionado Surface Dial para abrir el menú y seleccionar la herramienta personalizada. Una vez activada la herramienta personalizada, el control deslizante se puede ajustar girando Surface Dial; asimismo, el conmutador se puede activar o desactivar haciendo clic en Surface Dial.

Captura de pantalla del ejemplo de controlador radial con cuatro controles deslizantes horizontales establecidos a la izquierda y el cuarto controlador resaltado.
Interfaz de usuario de la aplicación de muestra que se activó mediante la herramienta personalizada de surface Dial

Resumen

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

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

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

Referencia de las API

Ejemplos

Ejemplos del tema

Personalización de RadialController

Otros ejemplos

Ejemplo de Coloring Book

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

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

Ejemplo de Escritorio de Windows

Compartir a través de

Interacciones de Surface Dial

Información general

Integración del sistema

Personalización del usuario

Herramientas personalizadas

Guía de experiencia del usuario para herramientas personalizadas

Instrucciones para desarrolladores

Interacciones personalizadas

Pulsar y sostener

Girar

Guía de experiencia del usuario para interacciones personalizadas

Instrucciones para desarrolladores

Haga clic

Directrices sobre la experiencia de usuario

Instrucciones para desarrolladores

En pantalla

Guía de experiencia de usuario para interacciones en pantalla

Instrucciones para desarrolladores

Resumen

Referencia de las API

Ejemplos

Ejemplos del tema

Otros ejemplos

Recursos adicionales

Compartir a través de

Interacciones de Surface Dial

Información general

Integración del sistema

Personalización del usuario

Herramientas personalizadas

Guía de experiencia del usuario para herramientas personalizadas

Instrucciones para desarrolladores

Interacciones personalizadas

Pulsar y sostener

Girar

Guía de experiencia del usuario para interacciones personalizadas

Instrucciones para desarrolladores

Haga clic

Directrices sobre la experiencia de usuario

Instrucciones para desarrolladores

En pantalla

Guía de experiencia de usuario para interacciones en pantalla

Instrucciones para desarrolladores

Resumen

Artículos relacionados

Referencia de las API

Ejemplos

Ejemplos del tema

Otros ejemplos

Recursos adicionales