Tutorial: Soporte para Surface Dial (y otros dispositivos de rueda) en tu aplicación de Windows

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

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

Nos centramos en lo siguiente:

• Especificar qué herramientas integradas se muestran en el menú 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 la implementación de 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 los comandos del sistema como a otras herramientas y funcionalidades más contextuales.

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 Surface Dial por el 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 "Hello, world" (XAML)

Configuración de los dispositivos

1. Asegúrese de que el dispositivo Windows está activado.
2. Vaya a Inicio, seleccione Configuración>Dispositivos>Bluetooth y otros dispositivos y, a continuación, active Bluetooth .
3. 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.
4. Si la pestaña de la batería está en la parte inferior del dial, quítela.
5. Mantenga presionado el pequeño botón de inset junto a las baterías hasta que la luz Bluetooth parpadee.
6. Vuelva al dispositivo Windows y seleccione Agregar Bluetooth u otro dispositivo.
7. En el cuadro de diálogo Agregar un dispositivo , seleccione Bluetooth>Surface Dial. Su Surface Dial ahora debería conectarse y agregarse a la lista de dispositivos en Ratón, teclado y lápiz en la página de configuración de Bluetooth y otros dispositivos.
8. Pruebe el dial presionándolo y manteniéndolo pulsado durante unos segundos para mostrar el menú integrado.
9. Si el menú no se muestra en la pantalla y el Dial tampoco vibra, vuelva a la configuración de Bluetooth, quite el dispositivo e intente volver a conectar el dispositivo.

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 de GitHub en el ejemplo windows-appsample-get-started-radialcontroller:

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

Componentes que admiten la funcionalidad de rueda

Estos objetos constituyen la mayor parte de la experiencia del dispositivo de rueda para las aplicaciones de Windows.

Paso 1: Ejecución del ejemplo

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

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

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.

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 de 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, incluyendo solo las herramientas básicas del sistema cuando el escritorio de Windows está activo y no hay aplicaciones en primer plano, herramientas de escritura a mano adicionales cuando hay una barra de herramientas de escritura presente y herramientas de cartografía cuando se usa la aplicación 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:

1. Abra el archivo MainPage_Basic.xaml.

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

3. 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 punto, solo están habilitados el botón Inicializar ejemplo, el control deslizante y el interruptor de palanca. Los demás botones se usan en pasos posteriores para agregar y quitar elementos de menú RadialController que proporcionan acceso al control deslizante y al modificador de alternancia.

Paso 4: Personalizar el menú básico del RadialController

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

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

   • Las referencias de tipo Windows.UI.Input y Windows.Storage.Streams se usan para la funcionalidad en pasos posteriores:

     // 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 elemento de menú RadialController personalizado.

     InitializeSampleButton.Click += (sender, args) =>
     { InitializeSample(sender, args); };
     

   • A continuación, inicializamos nuestro objeto RadialController y configuramos controladores 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 sensibilidad de rotación en "1" mediante la propiedad RotationResolutionInDegrees , luego creamos nuestro RadialControllerMenuItem mediante CreateFromFontGlyph, agregamos el elemento de menú a la colección de elementos de menú 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;
     }
     

4. Ahora, vuelva a ejecutar la aplicación.
5. Seleccione el botón Inicializar controlador radial .
6. 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 método RadialControllerConfiguration.SetDefaultMenuItems ), dejando solo la herramienta personalizada. Este es el menú con nuestra herramienta personalizada.

Menú RadialController (personalizado)

7. 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 posición de encendido o apagado.

Bien, vamos a conectar esos botones.

Paso 5: Configurar el menú en tiempo de ejecución

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

1. Abra el archivo MainPage_Basic.xaml.cs.

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

3. Descomente el código en los métodos siguientes y vuelva a ejecutar la aplicación, pero no seleccione ningún botón (guarde eso para el paso siguiente).

   // 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[] { });
   }
   

4. Seleccione el botón Quitar elemento y luego presione y 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).

5. Seleccione el botón Add item y luego mantenga presionado el Dial.

   Observe que el menú ahora contiene la colección predeterminada de herramientas y nuestra herramienta personalizada.

6. Seleccione el botón de Reset RadialController menu 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, mostraremos cómo personalizar la retroalimentación háptica asociando nuestros controles deslizantes e interruptor de palanca y usándolos para especificar dinámicamente el comportamiento de la retroalimentación háptica. En este ejemplo, el interruptor de activación debe estar en "activado" 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 del clic.

1. Abra el archivo App.xaml.cs.

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

3. Comenta las primeras y terceras líneas ("MainPage_Basic" y "MainPage") y quítale el comentario a la segunda ("MainPage_Haptics").

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

4. Abra el archivo MainPage_Haptics.xaml.

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

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

7. Abra el archivo MainPage_Haptics.xaml.cs

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

9. Descomente las siguientes líneas:

   • La referencia de tipo Windows.Devices.Haptics se usa para la funcionalidad en los 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.

     radialController.ControlAcquired += (rc_sender, args) =>
     { RadialController_ControlAcquired(rc_sender, args); };
     

   • A continuación, definimos el controlador ControlAcquired , donde deshabilitamos los comentarios hápticos predeterminados 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 los controles de botón de alternancia correspondientes a 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"));
             }
         }
     }
     

   • Por último, obtenemos la forma de onda solicitada (si se admite) para los comentarios hápticos.

     // 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, ejecute nuevamente la aplicación para probar los hápticos personalizados cambiando el valor del control deslizante y el estado del interruptor de palanca.

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 de presionar y mantener del menú descrito, 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 de Surface Dial, el sistema controla la oclusión por parte del dispositivo y muestra una versión más grande 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 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):

1. Descargar el ejemplo en un dispositivo Surface Studio (con Visual Studio instalado)

2. Apertura del ejemplo en Visual Studio

3. Abra el archivo App.xaml.cs

4. Busque el código marcado con el título de este paso ("Paso 7: Definir interacciones en pantalla para Surface Studio y dispositivos similares")

5. Comente las líneas primera y segunda ("MainPage_Basic" y "MainPage_Haptics") y quite la marca de comentario de la tercera línea ("MainPage")

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

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

Resumen

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

Artículos relacionados

Interacciones de Surface Dial

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

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

Ejemplo de escritorio de Windows