Tutorial: Cómo integrar soporte para Surface Dial (y otros dispositivos de rueda) en tu aplicación de Windows

2025-06-10

Imagen de Surface Dial con Surface Studio
Surface Dial con Surface Studio y surface Pen (disponible para su compra en elde Microsoft Store de ).

En este tutorial se explica cómo personalizar las experiencias de interacción del usuario compatibles con dispositivos de rueda como Surface Dial. Utilizamos fragmentos de una aplicación de ejemplo, que puede descargar desde GitHub (consulte Código de ejemplo), para mostrar las diversas características y las APIs asociadas de RadialController descritas en cada paso.

Nos centramos en lo siguiente:

Especificar qué herramientas integradas se muestran en el menú de RadialController
Agregar una herramienta personalizada al menú
Control de comentarios hápticos
Personalización de interacciones de clic
Personalización de interacciones de rotación

Para obtener más información sobre cómo implementar estas y otras características, consulta interacciones de Surface Dial en aplicaciones de Windows.

Introducción

Surface Dial es un dispositivo de entrada secundario que ayuda a los usuarios a ser más productivos cuando se usan junto con un dispositivo de entrada principal, como lápiz, entrada táctil o mouse. Como dispositivo de entrada secundario, el Dial se usa normalmente con la mano no dominante para proporcionar acceso tanto a comandos del sistema como a otras herramientas más contextuales y funcionalidades.

Dial admite tres gestos básicos:

Mantenga presionado para mostrar el menú integrado de comandos.
Gire para resaltar un elemento de menú (si el menú está activo) o para modificar la acción actual en la aplicación (si el menú no está activo).
Haga clic para seleccionar el elemento de menú resaltado (si el menú está activo) o para invocar un comando en la aplicación (si el menú no está activo).

Prerrequisitos

Un equipo (o una máquina virtual) que ejecuta Windows 10 Creators Update o posterior
Visual Studio 2019
SDK de Windows 10 (10.0.15063.0)
Un dispositivo de rueda (solo el surface Dial de en este momento)
Si no está familiarizado con el desarrollo de aplicaciones de Windows con Visual Studio, eche un vistazo a estos temas antes de iniciar este tutorial:
- Instalación de herramientas para el SDK de aplicaciones de Windows
- Crear una aplicación "Hola mundo" (XAML)

Configuración de los dispositivos

Asegúrese de que el dispositivo Windows está activado.
Vaya a Inicio, seleccione Configuración>Dispositivos>Bluetooth y otros dispositivos y, a continuación, active Bluetooth .
Quite la parte inferior de Surface Dial para abrir el compartimiento de la batería y asegúrese de que hay dos baterías AAA dentro.
Si la lengüeta de la batería se encuentra en la parte inferior del Dial, quítela.
Mantenga presionado el pequeño botón de inset junto a las baterías hasta que la luz Bluetooth parpadee.
Vuelva al dispositivo Windows y seleccione Agregar Bluetooth u otro dispositivo.
En el cuadro de diálogo Agregar un dispositivo, seleccione Bluetooth>Surface Dial. Tu Surface Dial ahora debería conectarse y añadirse a la lista de dispositivos en la sección de Mouse, teclado y lápiz en Bluetooth y otros dispositivos.
Pruebe el selector presionándolo y manteniéndolo pulsado durante unos segundos para mostrar el menú integrado.
Si el menú no se muestra en la pantalla (el Dial también debe vibrar), vuelva a la configuración de Bluetooth, quite el dispositivo y vuelva a intentar conectarlo.

Nota:

Los dispositivos de rueda se pueden configurar a través de la configuración de rueda.

En el menú Inicio, seleccione Configuración.
Seleccione Dispositivos>Rueda.

Ahora está listo para iniciar este tutorial.

Código de ejemplo

A lo largo de este tutorial, usamos una aplicación de ejemplo para mostrar los conceptos y la funcionalidad que se describen.

Descargue este ejemplo de Visual Studio y el código fuente desde GitHub en el ejemplo windows-appsample-get-started-radialcontroller:

Seleccione el botón verde Clonar o descargar.
Si tiene una cuenta de GitHub, puede clonar el repositorio en el equipo local si elige Abrir en Visual Studio.
Si no tiene una cuenta de GitHub o solo quiere una copia local del proyecto, elija Descargar archivo ZIP (tendrá que volver a comprobar periódicamente para descargar las actualizaciones más recientes).

Importante

La mayoría del código del ejemplo está comentado. Al avanzar por cada paso de este tema, se le pedirá que descomente varias secciones del código. En Visual Studio, simplemente resalte las líneas de código y presione CTRL-K y, a continuación, CTRL-U.

Componentes que admiten la funcionalidad de rueda

Estos objetos proporcionan principalmente la experiencia del dispositivo de rueda para las aplicaciones de Windows.

Componente	Descripción
de clase radialController y relacionados	Representa un dispositivo de entrada de rueda o un accesorio como el Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop Aquí no tratamos esta funcionalidad, para obtener más información, vea el ejemplo de escritorio de Windows .	Habilita la interoperabilidad con una aplicación de Windows.

Paso 1: Ejecución del ejemplo

Después de descargar la aplicación de ejemplo RadialController, compruebe que se ejecuta:

Abra el proyecto de ejemplo en Visual Studio .
Establezca la lista desplegable de Plataformas de Solución en una selección que no sea Arm.
Presione F5 para compilar, implementar y ejecutar.

Nota:

Como alternativa, puede seleccionar el elemento del menú Depurar>Iniciar depuración, o bien el botón Ejecutar en Máquina local que se muestra aquí: Compilar proyecto de Visual Studio botón

Se abre la ventana de la aplicación y, después de que aparezca una pantalla de presentación durante unos segundos, verá esta pantalla inicial.

Aplicación vacía

Bien, ahora tenemos la aplicación básica de Windows que usaremos en el resto de este tutorial. En los pasos siguientes, agregamos nuestra funcionalidad RadialController.

Paso 2: Funcionalidad básica del "RadialController"

Con la aplicación en ejecución y en primer plano, mantenga presionado el Surface Dial para mostrar el menú RadialController.

Aún no hemos realizado ninguna personalización para nuestra aplicación, por lo que el menú contiene un conjunto predeterminado de herramientas contextuales.

Estas imágenes muestran dos variaciones del menú predeterminado. (Hay muchos otros, incluidas solo las herramientas básicas del sistema cuando el escritorio de Windows está activo y no hay aplicaciones en primer plano, herramientas adicionales de entrada manuscrita cuando hay una barra de herramientas de tinta presente y herramientas de mapas cuando se usa la aplicación de Mapas.

Menú RadialController (valor predeterminado)	Menú RadialController (valor predeterminado con reproducción multimedia)

Ahora empezaremos con alguna personalización básica.

Paso 3: Agregar controles para la entrada de rueda

En primer lugar, vamos a agregar la interfaz de usuario para nuestra aplicación:

Abra el archivo MainPage_Basic.xaml.
Busque el código marcado con el título de este paso ("<!-- Paso 3: Agregar controles para la entrada de rueda,>").

Descomenta las siguientes líneas.

<Button x:Name="InitializeSampleButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Initialize sample" />
<ToggleButton x:Name="AddRemoveToggleButton"
                HorizontalAlignment="Center" 
                Margin="10" 
                Content="Remove Item"
                IsChecked="True" 
                IsEnabled="False"/>
<Button x:Name="ResetControllerButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Reset RadialController menu" 
        IsEnabled="False"/>
<Slider x:Name="RotationSlider" Minimum="0" Maximum="10"
        Width="300"
        HorizontalAlignment="Center"/>
<TextBlock Text="{Binding ElementName=RotationSlider, Mode=OneWay, Path=Value}"
            Margin="0,0,0,20"
            HorizontalAlignment="Center"/>
<ToggleSwitch x:Name="ClickToggle"
                MinWidth="0" 
                Margin="0,0,0,20"
                HorizontalAlignment="center"/>

En este momento, solo están habilitados el botón Inicializar muestra, el control deslizante y el interruptor de alternancia. Los otros botones se usan en pasos posteriores para agregar y quitar RadialController elementos de menú que proporcionan acceso al control deslizante y al interruptor.

Interfaz de usuario básica de ejemplo de la aplicación

Ahora vamos a agregar el código necesario para habilitar el acceso de RadialController a nuestros controles.

Abra el archivo MainPage_Basic.xaml.cs.
Busque el código marcado con el título de este paso ("// Paso 4: Personalización básica del menú RadialController").

Descomente las líneas siguientes:

Los tipos de referencia Windows.UI.Input y Windows.Storage.Streams se usan para la funcionalidad en los pasos siguientes:
```
// Using directives for RadialController functionality.
using Windows.UI.Input;
```

Estos objetos globales (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) se usan en toda la aplicación.

private RadialController radialController;
private RadialControllerConfiguration radialControllerConfig;
private RadialControllerMenuItem radialControllerMenuItem;

Aquí, especificamos el controlador Click para el botón que habilita nuestros controles e inicializa nuestro menú personalizado de RadialController.
```
InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };
```

A continuación, inicializamos nuestro objeto RadialController y configuramos los manejadores para los eventos RotationChanged y ButtonClicked.

// Set up the app UI and RadialController.
private void InitializeSample(object sender, RoutedEventArgs e)
{
    ResetControllerButton.IsEnabled = true;
    AddRemoveToggleButton.IsEnabled = true;

    ResetControllerButton.Click += (resetsender, args) =>
    { ResetController(resetsender, args); };
    AddRemoveToggleButton.Click += (togglesender, args) =>
    { AddRemoveItem(togglesender, args); };

    InitializeController(sender, e);
}

Aquí, inicializamos nuestro elemento de menú RadialController personalizado. Usamos CreateForCurrentView para obtener una referencia a nuestro objeto RadialController , establecemos la resolución de rotación en "1" mediante la propiedad RotationResolutionInDegrees , creamos nuestro RadialControllerMenuItem mediante CreateFromFontGlyph, agregamos el elemento de menú a la colección de elementos de menú de RadialController y, por último, usamos SetDefaultMenuItems para borrar los elementos de menú predeterminados y dejar solo nuestra herramienta personalizada.

// Configure RadialController menu and custom tool.
private void InitializeController(object sender, RoutedEventArgs args)
{
    // Create a reference to the RadialController.
    radialController = RadialController.CreateForCurrentView();
    // Set rotation resolution to 1 degree of sensitivity.
    radialController.RotationResolutionInDegrees = 1;

    // Create the custom menu items.
    // Here, we use a font glyph for our custom tool.
    radialControllerMenuItem =
        RadialControllerMenuItem.CreateFromFontGlyph("SampleTool", "\xE1E3", "Segoe MDL2 Assets");

    // Add the item to the RadialController menu.
    radialController.Menu.Items.Add(radialControllerMenuItem);

    // Remove built-in tools to declutter the menu.
    // NOTE: The Surface Dial menu must have at least one menu item. 
    // If all built-in tools are removed before you add a custom 
    // tool, the default tools are restored and your tool is appended 
    // to the default collection.
    radialControllerConfig =
        RadialControllerConfiguration.GetForCurrentView();
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });

    // Declare input handlers for the RadialController.
    // NOTE: These events are only fired when a custom tool is active.
    radialController.ButtonClicked += (clicksender, clickargs) =>
    { RadialController_ButtonClicked(clicksender, clickargs); };
    radialController.RotationChanged += (rotationsender, rotationargs) =>
    { RadialController_RotationChanged(rotationsender, rotationargs); };
}

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    if (RotationSlider.Value + args.RotationDeltaInDegrees >= RotationSlider.Maximum)
    {
        RotationSlider.Value = RotationSlider.Maximum;
    }
    else if (RotationSlider.Value + args.RotationDeltaInDegrees < RotationSlider.Minimum)
    {
        RotationSlider.Value = RotationSlider.Minimum;
    }
    else
    {
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }
}

// Connect wheel device click to toggle switch control.
private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ClickToggle.IsOn = !ClickToggle.IsOn;
}

Ahora, vuelva a ejecutar la aplicación.
Seleccione el botón Inicializar controlador radial.
Con la aplicación en primer plano, mantenga presionado el Surface Dial para mostrar el menú. Observe que se han quitado todas las herramientas predeterminadas (mediante el RadialControllerConfiguration.SetDefaultMenuItems método), dejando solo la herramienta personalizada. Este es el menú con nuestra herramienta personalizada.

Menú RadialController (personalizado)

Selecciona la herramienta personalizada y prueba las interacciones que ahora se admiten a través de Surface Dial:
- Una acción de rotación mueve el control deslizante.
- Un clic establece el interruptor en encendido o apagado.

Bien, vamos a conectar esos botones.

En este paso, enlazamos los botones Agregar o quitar elemento y Restablecer menú RadialController para mostrar cómo puede personalizar dinámicamente el menú.

Abra el archivo MainPage_Basic.xaml.cs.
Busque el código marcado con el título de este paso ("// Paso 5: Configurar menú en tiempo de ejecución").

Descomente el código en los siguientes métodos y vuelva a ejecutar la aplicación, sin seleccionar ningún botón (déjelo para el siguiente paso).

// Add or remove the custom tool.
private void AddRemoveItem(object sender, RoutedEventArgs args)
{
    if (AddRemoveToggleButton?.IsChecked == true)
    {
        AddRemoveToggleButton.Content = "Remove item";
        if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Add(radialControllerMenuItem);
        }
    }
    else if (AddRemoveToggleButton?.IsChecked == false)
    {
        AddRemoveToggleButton.Content = "Add item";
        if (radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Remove(radialControllerMenuItem);
            // Attempts to select and activate the previously selected tool.
            // NOTE: Does not differentiate between built-in and custom tools.
            radialController.Menu.TrySelectPreviouslySelectedMenuItem();
        }
    }
}

// Reset the RadialController to initial state.
private void ResetController(object sender, RoutedEventArgs arg)
{
    if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
    {
        radialController.Menu.Items.Add(radialControllerMenuItem);
    }
    AddRemoveToggleButton.Content = "Remove item";
    AddRemoveToggleButton.IsChecked = true;
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });
}

Seleccione el botón Quitar elemento y luego mantenga presionado el Dial para volver a mostrar el menú.

Observe que el menú contiene ahora la colección predeterminada de herramientas. Recuerde que, en el paso 3, al configurar nuestro menú personalizado, quitamos todas las herramientas predeterminadas y agregamos solo nuestra herramienta personalizada. También hemos observado que, cuando el menú está establecido en una colección vacía, se restablece el valor predeterminado de los elementos del contexto actual. (Hemos agregado nuestra herramienta personalizada antes de quitar las herramientas predeterminadas).
Seleccione el botón Agregar ítem y, a continuación, mantenga presionado el dial.

Observe que el menú ahora contiene la colección predeterminada de herramientas y nuestra herramienta personalizada.
Seleccione el botón del menú Restablecer RadialController y, a continuación, mantenga presionado el Dial.

Observe que el menú vuelve a su estado original.

Paso 6: Personalizar los hápticos del dispositivo

Surface Dial y otros dispositivos de rueda pueden proporcionar a los usuarios comentarios hápticos correspondientes a la interacción actual (en función del clic o la rotación).

En este paso, mostramos cómo puedes personalizar la retroalimentación háptica asociando nuestros controles deslizantes e interruptores de palanca y usándolos para especificar dinámicamente el comportamiento de la retroalimentación. En este ejemplo, el interruptor de palanca debe estar en posición de encendido para que se active la retroalimentación, mientras que el valor del control deslizante especifica la frecuencia con la que se repite la retroalimentación de clic.

Nota:

El usuario puede deshabilitar la retroalimentación háptica en la página Configuración>Dispositivos>Rueda.

Abra el archivo App.xaml.cs.
Busque el código marcado con el título de este paso ("Paso 6: Personalizar los hápticos del dispositivo").

Comente las primeras y terceras líneas ("MainPage_Basic" y "MainPage") y descomente la segunda ("MainPage_Haptics").

rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

Abra el archivo MainPage_Haptics.xaml.
Busque el código marcado con el título de este paso ("<!-- Paso 6: Personalizar los hápticos del dispositivo:>").

Descomenta las siguientes líneas. (Este código de interfaz de usuario simplemente indica qué características hápticas son compatibles con el dispositivo actual).

<StackPanel x:Name="HapticsStack" 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            BorderBrush="Gray" 
            BorderThickness="1">
    <TextBlock Padding="10" 
                Text="Supported haptics properties:" />
    <CheckBox x:Name="CBDefault" 
                Content="Default" 
                Padding="10" 
                IsEnabled="False" 
                IsChecked="True" />
    <CheckBox x:Name="CBIntensity" 
                Content="Intensity" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayCount" 
                Content="Play count" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayDuration" 
                Content="Play duration" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBReplayPauseInterval" 
                Content="Replay/pause interval" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBBuzzContinuous" 
                Content="Buzz continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBClick" 
                Content="Click" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPress" 
                Content="Press" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRelease" 
                Content="Release" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRumbleContinuous" 
                Content="Rumble continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
</StackPanel>

Abra el archivo MainPage_Haptics.xaml.cs
Busque el código marcado con el título de este paso ("Paso 6: personalización de hápticos")

Descomente las siguientes líneas:

La referencia de tipo Windows.Devices.Haptics se usa para la funcionalidad en pasos posteriores.
```
using Windows.Devices.Haptics;
```
Aquí, especificamos el controlador para el evento ControlAcquired que se desencadena cuando se selecciona el elemento de menú RadialController personalizado de .
```
radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };
```

A continuación, definimos el controlador ControlAcquired, donde deshabilitamos la retroalimentación háptica predeterminada e inicializamos nuestra interfaz de usuario háptica.

private void RadialController_ControlAcquired(
    RadialController rc_sender,
    RadialControllerControlAcquiredEventArgs args)
{
    // Turn off default haptic feedback.
    radialController.UseAutomaticHapticFeedback = false;

    SimpleHapticsController hapticsController =
        args.SimpleHapticsController;

    // Enumerate haptic support.
    IReadOnlyCollection<SimpleHapticsControllerFeedback> supportedFeedback =
        hapticsController.SupportedFeedback;

    foreach (SimpleHapticsControllerFeedback feedback in supportedFeedback)
    {
        if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.BuzzContinuous)
        {
            CBBuzzContinuous.IsEnabled = true;
            CBBuzzContinuous.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Click)
        {
            CBClick.IsEnabled = true;
            CBClick.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Press)
        {
            CBPress.IsEnabled = true;
            CBPress.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Release)
        {
            CBRelease.IsEnabled = true;
            CBRelease.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.RumbleContinuous)
        {
            CBRumbleContinuous.IsEnabled = true;
            CBRumbleContinuous.IsChecked = true;
        }
    }

    if (hapticsController?.IsIntensitySupported == true)
    {
        CBIntensity.IsEnabled = true;
        CBIntensity.IsChecked = true;
    }
    if (hapticsController?.IsPlayCountSupported == true)
    {
        CBPlayCount.IsEnabled = true;
        CBPlayCount.IsChecked = true;
    }
    if (hapticsController?.IsPlayDurationSupported == true)
    {
        CBPlayDuration.IsEnabled = true;
        CBPlayDuration.IsChecked = true;
    }
    if (hapticsController?.IsReplayPauseIntervalSupported == true)
    {
        CBReplayPauseInterval.IsEnabled = true;
        CBReplayPauseInterval.IsChecked = true;
    }
}

En nuestros controladores de eventos RotationChanged y ButtonClicked, conectamos los controles deslizantes y de botón de alternancia con nuestros hápticos personalizados.

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    ...
    if (ClickToggle.IsOn && 
        (RotationSlider.Value > RotationSlider.Minimum) && 
        (RotationSlider.Value < RotationSlider.Maximum))
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.BuzzContinuous);
        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedback(waveform);
        }
    }
}

private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ...

    if (RotationSlider?.Value > 0)
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.Click);

        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedbackForPlayCount(
                waveform, 1.0, 
                (int)RotationSlider.Value, 
                TimeSpan.Parse("1"));
        }
    }
}

Finalmente, obtenemos la forma de onda solicitada (si se admite) para la retroalimentación háptica.

// Get the requested waveform.
private SimpleHapticsControllerFeedback FindWaveform(
    SimpleHapticsController hapticsController,
    ushort waveform)
{
    foreach (var hapticInfo in hapticsController.SupportedFeedback)
    {
        if (hapticInfo.Waveform == waveform)
        {
            return hapticInfo;
        }
    }
    return null;
}

Ahora, vuelva a ejecutar la aplicación para probar los hápticos personalizados al cambiar el valor del control deslizante y el estado del interruptor.

Paso 7: Definir interacciones en pantalla para Surface Studio y dispositivos similares

Emparejado con Surface Studio, Surface Dial puede proporcionar una experiencia de usuario aún más distintiva.

Además de la experiencia predeterminada del menú de pulsación prolongada descrita, el Surface Dial también se puede colocar directamente sobre la pantalla del Surface Studio. Esto permite un menú especial "en pantalla".

Al detectar tanto la ubicación de contacto como los límites del Surface Dial, el sistema maneja la oclusión por parte del dispositivo y muestra una versión más grande del menú que se envuelve alrededor del exterior del Dial. La aplicación también puede usar esta misma información para adaptar la interfaz de usuario tanto para la presencia del dispositivo como para su uso previsto, como la colocación de la mano y el brazo del usuario.

El ejemplo que acompaña a este tutorial incluye un ejemplo ligeramente más complejo que muestra algunas de estas funcionalidades.

Para ver esto en acción (necesitarás surface Studio):

Descargar el ejemplo en un dispositivo Surface Studio (con Visual Studio instalado)
Apertura del ejemplo en Visual Studio
Abra el archivo App.xaml.cs
Busque el código marcado con el título de este paso ("Paso 7: Definir interacciones en pantalla para Surface Studio y dispositivos similares")

Comente las líneas primera y segunda ("MainPage_Basic" y "MainPage_Haptics") y descomente la tercera ("MainPage")

rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

Ejecute la aplicación y coloque Surface Dial en cada una de las dos regiones de control, alternando entre ellas.

Resumen

Enhorabuena, ha completado el tutorial de introducción : Compatibilidad con Surface Dial (y otros dispositivos de rueda) en la aplicación de Windows! Te mostramos el código básico necesario para admitir un dispositivo wheel en tus aplicaciones de Windows y cómo proporcionar algunas de las experiencias de usuario más enriquecidas compatibles con las API de RadialController.

Interacciones con el Surface Dial