Compartir a través de

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

  • Artículo

Imagen de Surface Dial con Surface Studio
Surface Dial con Surface Studio y Lápiz para Surface (se puede comprar 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. Se usan fragmentos de una aplicación de muestra, que puede descargar desde GitHub (consulte Código de ejemplo), para mostrar las distintas características y las API RadialController asociadas que se describen en cada paso.

Céntrese 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 más información sobre la implementación de estas y otras características, consulte 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, función táctil o ratón. Como dispositivo de entrada secundario, Dial se utiliza 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:

  • Pulse y sostenga 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).

Requisitos previos

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, luego, active Bluetooth.
  3. Quite la parte inferior de Surface Dial para abrir el compartimento 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á presente en la parte inferior de Dial, quítela.
  5. Pulse y sostenga el botón pequeño de bajorrelieve junto a las baterías hasta que la luz de 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. Surface Dial ahora debe conectarse y agregarse a la lista de dispositivos en Ratón, teclado y lápiz en la página de configuración Bluetooth y otros dispositivos.
  8. Para probar Dial presione y sosténgalo durante unos segundos para mostrar el menú integrado.
  9. Si el menú no se muestra en la pantalla (Dial también debe vibrar), vuelva a la configuración de Bluetooth, quite el dispositivo e intente conectarlo de nuevo.

Nota:

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

  1. En el menú Inicio, seleccione Configuración.
  2. Seleccione Dispositivos>Rueda.
    Pantalla de configuración de rueda

Ahora está todo listo para iniciar este tutorial.

Código de ejemplo

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

Descargue esta muestra de Visual Studio y el código fuente de GitHub en windows-appsample-get-started-radialcontroller sample:

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

Importante

La mayor parte del código de la muestra está comentada. A medida que se avanza en cada paso de este tema, se le pedirá que quite la marca de comentario de varias secciones del código. En Visual Studio, simplemente resalte las líneas de código y presione CTRL-K y, luego, CTRL-U.

Componentes que admiten la funcionalidad de rueda

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

Componente Descripción
Clase RadialController y relacionada Representa un dispositivo de entrada de rueda o accesorio como Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Aquí no se trata esta funcionalidad, para más información, consulte Ejemplo de Escritorio de Windows.		 Permite la interoperabilidad con una aplicación de Windows.

Paso 1: ejecutar la muestra

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

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

Nota:

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

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 utilizaremos en el resto de este tutorial. En los pasos siguientes, se agrega la funcionalidad RadialController.

Paso 2: funcionalidad básica RadialController

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

Aún no se ha hecho 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 muchas otras, incluidas solo las herramientas básicas del sistema cuando el escritorio de Windows está activo y no hay aplicaciones en primer plano, herramientas de entrada manuscrita adicionales cuando hay una InkToolbar presente y herramientas de asignación cuando se utiliza la aplicación Mapas.

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

Ahora, empiece con una personalización básica.

Paso 3: agregar controles para la entrada de rueda

En primer lugar, hay que agregar la UI para nuestra aplicación:

  1. Abra el archivo MainPage_Basic.xaml.

  2. Busque el código marcado con el título de este paso ("<!-- Step 3: Add controls for wheel input -->").

  3. Quite la marca de comentario de las líneas siguientes.

    <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 se habilita el botón Inicializar muestra, el control deslizante y el conmutador de alternancia. Los demás botones se utilizan en pasos posteriores para agregar y quitar elementos de menú de RadialController que proporcionan acceso al control deslizante y al conmutador de alternancia.

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

Paso 4: personalizar el menú básico de RadialController

Ahora, hay que agregar el código necesario para habilitar el acceso de 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 ("// Step 4: Basic RadialController menu customization").
  3. Quite la marca de comentario de las líneas siguientes:

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

      // Using directives for RadialController functionality.
using Windows.UI.Input;

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

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

    • Aquí, se especifica el controlador Click para el botón que habilita nuestros controles e inicializa el elemento de menú personalizado de RadialController.

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

    • A continuación, se inicializa el objeto RadialController y se configuran los 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í, se inicializa el elemento de menú de RadialController personalizado. Se utiliza CreateForCurrentView para obtener una referencia al objeto RadialController, se establece la sensibilidad de rotación en "1" mediante la propiedad RotationResolutionInDegrees, luego se crea RadialControllerMenuItem mediante CreateFromFontGlyph, se agrega el elemento de menú a la colección de elementos de menú de RadialController y, por último, utilizamos 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, pulse y sostenga Surface Dial para mostrar el menú. Observe que se han quitado todas las herramientas predeterminadas (mediante el método RadialControllerConfiguration.SetDefaultMenuItems ), que deja solo la herramienta personalizada. Este es el menú con nuestra herramienta personalizada.
Menú RadialController (personalizado)
Menú RadialController personalizado
  1. Seleccione la herramienta personalizada y pruebe 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 botón de alternancia en activado o desactivado.

Enlace esos botones.

Paso 5: configurar el menú en runtime

En este paso, enlazamos los botones Agregar o eliminar elemento y Restablecer menú de 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 ("// Step 5: Configure menu at runtime").

  3. Quite la marca de comentario del código en los métodos siguientes y vuelva a ejecutar la aplicación, pero no seleccione ningún botón (espere al 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 presione y sostenga 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 el menú personalizado, se quitaron todas las herramientas predeterminadas y se agregó solo la herramienta personalizada. También se observa que, cuando el menú está establecido en una colección vacía, se restablece el valor predeterminado de los elementos del contexto actual. (Se agregó la herramienta personalizada antes de quitar las herramientas predeterminadas).

  5. Seleccione el botón Agregar elemento y, luego, pulse y sostenga el Dial.

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

  6. Seleccione el botón Restablecer menú de RadialController y, luego, pulse y sostenga 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, se muestra cómo puede personalizar los comentarios hápticos mediante la asociación de los controles deslizantes y conmutador de alternancia y su uso para especificar dinámicamente el comportamiento de comentarios hápticos. En este ejemplo, el conmutador de alternancia debe establecerse en activado para que los comentarios se habiliten mientras que el valor del control deslizante especifica la frecuencia con la que se repiten los comentarios de clic.

Nota:

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

  1. Abra el archivo App.xaml.cs.

  2. Busque el código marcado con el título de este paso ("Step 6: Customize the device haptics").

  3. Comente las primeras y terceras líneas ("MainPage_Basic" y "MainPage") y quite la marca de comentario de 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 ("<!-- Step 6: Customize the device haptics -->").

  6. Quite la marca de comentario de las líneas siguientes. (Este código de UI 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 ("Step 6: Haptics customization")

  9. Quite la marca de comentario de las líneas siguientes:

    • La referencia de tipo Windows.Devices.Haptics se utiliza para la funcionalidad en los pasos posteriores.

      using Windows.Devices.Haptics;

    • Aquí, se especifica el controlador para el evento ControlAcquired que se desencadena cuando se selecciona el elemento de menú personalizado de RadialController.

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

    • A continuación, se define el controlador ControlAcquired, donde se deshabilitan los comentarios hápticos predeterminados y se inicializa la UI 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 los controladores de eventos RotationChanged y ButtonClicked, se conecta el control deslizante y los controles de botón de alternancia correspondientes a los 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, se obtiene 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, vuelva a ejecutar la aplicación para probar los hápticos personalizados al cambiar el valor del control deslizante y el estado del conmutador de alternancia.

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

Enlazado con Surface Studio, Surface Dial puede brindar una experiencia del 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 controla la oclusión del dispositivo y muestra 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.

La muestra adjunta a este tutorial incluye un ejemplo ligeramente más complejo que muestra algunas de estas funcionalidades.

Para ver esto en acción, haga lo siguiente (necesitará Surface Studio):

  1. Descargar la muestra en un dispositivo Surface Studio (con Visual Studio instalado)

  2. Abrir la muestra en Visual Studio

  3. Abrir el archivo App.xaml.cs.

  4. Buscar el código marcado con el título de este paso ("Step 7: Define on-screen interactions for Surface Studio and similar devices")

  5. Comentar las primeras y segundas líneas ("MainPage_Basic" y "MainPage_Haptics") y quite la marca de comentario de la tercera ("MainPage").

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

  6. Ejecutar la aplicación y colocar Surface Dial en cada una de las dos regiones de control, y alterne entre ellas.
    RadialController en pantalla

Resumen

Enhorabuena. Ha finalizado el Tutorial de introducción: compatibilidad con Surface Dial (y otros dispositivos de rueda) en una aplicación de Windows. Se mostró el código básico necesario para admitir un dispositivo de rueda en las aplicaciones de Windows y cómo proporcionar algunas de las experiencias del usuario más enriquecidas compatibles con las API de RadialController.

Interacciones de Surface Dial

Referencia de las API

Ejemplos

Ejemplos del tema

Personalización de RadialController

Otros ejemplos

Ejemplo de Coloring Book

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

Ejemplo de Escritorio de Windows