interactions Surface Dial

Image de Surface Dial avec Surface Studio
Surface Dial avec Surface Studio et stylet.

Aperçu

Les appareils Windows à molette, tels que le Surface Dial, sont une nouvelle catégorie d’appareils d’entrée qui permettent d’offrir une gamme d’expériences d’interaction utilisateur attrayantes et uniques pour Windows et les applications Windows.

Important

Dans cette rubrique, nous faisons spécifiquement référence aux interactions avec le Surface Dial, mais les informations s'appliquent à tous les appareils à molette Windows.

Avec un facteur de forme basé sur une action rotate (ou mouvement), le Surface Dial est destiné à un appareil d’entrée secondaire multimodal qui complète les entrées d’un appareil principal. Dans la plupart des cas, l'appareil est manipulé par la main non dominante d'un utilisateur en effectuant une tâche avec sa main dominante (comme écrire avec un stylo). Il n’est pas conçu pour l’entrée de pointeur de précision (par exemple, tactile, stylet ou souris).

Le Surface Dial prend également en charge une action appuyer et maintenir et une action cliquer. Appuyez longuement sur une fonction unique : affichez un menu de commandes. Si le menu est actif, l'entrée de rotation et de clic est traitée par le menu. Sinon, l’entrée est transmise à votre application pour traitement.

Comme avec tous les appareils d’entrée Windows, vous pouvez personnaliser l’expérience d'interaction avec le Surface Dial en fonction des fonctionnalités de vos applications.

Conseil / Astuce

Utilisé ensemble, le Surface Dial et le nouveau Surface Studio peuvent offrir une expérience utilisateur encore plus distinctive.

En plus de l'expérience de menu de pression et maintien par défaut décrite, la Surface Dial peut également être placée directement à l'écran du Surface Studio. Cela active un menu spécial « à l’écran ».

En détectant à la fois l’emplacement du contact et les limites du Surface Dial, le système utilise ces informations pour gérer l’occlusion par l’appareil et afficher une version plus grande du menu qui s’affiche autour de l’extérieur du Dial. Ces mêmes informations peuvent également être utilisées par votre application pour adapter l’interface utilisateur à la fois à la présence de l’appareil et à son utilisation anticipée, telles que le placement de la main et du bras de l’utilisateur.

menu hors écran pour Surface Dial

Surface Dial menu à l'écran

Intégration du système

Le Surface Dial est étroitement intégré à Windows et prend en charge un ensemble d’outils intégrés dans le menu : volume système, défilement, zoom avant/arrière et annulation/restauration.

Cette collection d’outils intégrés s’adapte au contexte système actuel pour inclure :

Outil de réglage de la luminosité du système lorsque l’utilisateur se trouve sur le bureau Windows
Outil de suivi précédent/suivant lorsque le média est en cours de lecture

Outre cette prise en charge générale de la plateforme, le Surface Dial est également étroitement intégré aux contrôles de plateforme Ink Windows (InkCanvas et InkToolbar).

Surface Dial avec Surface Pen

Lorsqu’ils sont utilisés avec le Surface Dial, ces contrôles activent des fonctionnalités supplémentaires pour modifier les attributs d'encre et contrôler la règle stencil de la barre d’outils d’encre.

Lorsque vous ouvrez le menu Surface Dial dans une application manuscrite qui utilise la barre d’outils d’entrée manuscrite, le menu inclut désormais des outils pour contrôler le type de stylet et l’épaisseur du pinceau. Lorsque la règle est activée, un outil correspondant est ajouté au menu qui permet au périphérique de contrôler la position et l’angle de la règle.

menu
menu Surface Dial avec l’outil de sélection de stylet pour la barre d’outils Windows Ink

menu
Menu Surface Dial avec outil de taille de trait pour la barre d'outils Windows Ink

menu Surface Dial avec l’outil de règle pour la barre d’outils Windows Ink

Personnalisation de l’utilisateur

Les utilisateurs peuvent personnaliser certains aspects de leur expérience de Dial via la page Paramètres Windows -> Périphériques -> Molette, y compris les outils par défaut, les vibrations (ou le retour haptique), et la main d'écriture (ou dominante).

Lors de la personnalisation de l’expérience utilisateur Surface Dial, vous devez toujours vous assurer qu’une fonction ou un comportement particulier est disponible et activé par l’utilisateur.

Outils personnalisés

Ici, nous abordons les conseils relatifs à l’expérience utilisateur et au développeur pour personnaliser les outils exposés dans le menu Surface Dial.

Conseils d’expérience utilisateur pour les outils personnalisés

Ensurez vos outils correspondent au contexte actuel Lorsque vous définissez clairement et intuitivement ce qu’un outil fait et comment fonctionne l’interaction Surface Dial, vous aidez les utilisateurs à apprendre rapidement et à rester concentrés sur leur tâche.

Réduire le nombre d’outils d’application autant que possible
Le menu Surface Dial peut contenir jusqu'à sept éléments. S’il y a huit éléments ou plus, l’utilisateur doit tourner le cadran pour voir quels outils sont disponibles dans un sous-menu de débordement, rendant le menu difficile à naviguer et les outils difficiles à découvrir et à sélectionner.

Nous vous recommandons de fournir un seul outil personnalisé pour votre application ou votre contexte d’application. Cela vous permet de définir cet outil en fonction de ce que fait l’utilisateur sans les obliger à activer le menu Surface Dial et à sélectionner un outil.

Mettre à jour dynamiquement la collection d’outils
Étant donné que Surface Dial éléments de menu ne prennent pas en charge un état désactivé, vous devez ajouter et supprimer dynamiquement des outils (y compris les outils intégrés, par défaut) en fonction du contexte utilisateur (fenêtre active ou prioritaire). Si un outil n’est pas pertinent pour l’activité actuelle ou s’il est redondant, supprimez-le.

Important

Lorsque vous ajoutez un élément au menu, vérifiez que l’élément n’existe pas déjà.

Ne supprimez pas l’outil de paramètre de volume système intégré
Le contrôle de volume est généralement toujours requis par l’utilisateur. Il est possible qu'ils écoutent de la musique en utilisant votre application, donc le volume et les outils pour passer à la piste suivante devraient toujours être accessibles depuis le menu Surface Dial. (L’outil de suivi suivant est automatiquement ajouté au menu lorsque le média est en lecture.)

Être cohérent avec l’organisation de menu
Cela permet aux utilisateurs de découvrir et d’apprendre quels outils sont disponibles lors de l’utilisation de votre application et d’améliorer leur efficacité lors du changement d’outils.

Fournir des icônes de haute qualité cohérentes avec les icônes intégrées
Les icônes peuvent transmettre le professionnalisme et l’excellence, et inspirer la confiance des utilisateurs.

Fournir une image PNG de haute qualité 64 x 64 pixels (44 x 44 est la plus petite prise en charge)
Vérifier que l’arrière-plan est transparent
L’icône doit remplir la plupart de l’image
Une icône blanche doit avoir un contour noir à afficher en mode contraste élevé

Icône avec arrière-plan alpha

Icône affichée dans le menu circulaire avec le thème par défaut

Icône affichée dans le menu en forme de roue avec un thème blanc à contraste élevé

Utiliser des noms concis et descriptifs
Le nom de l’outil s’affiche dans le menu de l’outil, ainsi que l’icône outil et est également utilisé par les lecteurs d’écran.

Les noms doivent être suffisamment courts pour tenir dans le cercle central du menu en forme de roue.
Les noms doivent clairement identifier l’action principale (une action complémentaire peut être implicite) :
- Le défilement indique l’effet des deux directions de rotation
- Annuler spécifie une action principale, mais la restauration (l’action complémentaire) peut être déduite et facilement découverte par l’utilisateur

Assistance développeur

Vous pouvez personnaliser l’expérience de Surface Dial pour compléter les fonctionnalités de vos applications via un ensemble complet d’API Windows Runtime.

Comme mentionné précédemment, le menu par défaut Surface Dial est prérempli avec un ensemble d’outils intégrés couvrant une large gamme de fonctionnalités système de base (volume système, luminosité système, défilement, zoom, annulation et contrôle multimédia lorsque le système détecte la lecture audio ou vidéo en cours). Toutefois, ces outils par défaut peuvent ne pas fournir les fonctionnalités requises par votre application.

Dans les sections suivantes, nous décrivons comment ajouter un outil personnalisé au menu Surface Dial et spécifier les outils intégrés qui sont exposés.

Téléchargez une version plus robuste de cet exemple depuis la personnalisation du RadialController.

Ajouter un outil personnalisé

Dans cet exemple, nous ajoutons un outil personnalisé de base qui transmet les données d’entrée de la rotation et des événements de clic à certains contrôles d’interface utilisateur XAML.

Tout d’abord, nous déclarons notre interface utilisateur (simplement un curseur et un bouton bascule) en XAML.

Capture d’écran de l’exemple de contrôleur radial avec le curseur horizontal défini sur la gauche.
Exemple d’interface utilisateur d’application

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

Ensuite, dans code-behind, nous ajoutons un outil personnalisé au menu Surface Dial et déclarons les gestionnaires d’entrée RadialController.

Nous obtenons une référence à l’objet RadialController pour l’objet Surface Dial (myController) en appelant CreateForCurrentView.

Nous créons ensuite une instance d’un RadialControllerMenuItem (myItem) en appelant RadialControllerMenuItem.CreateFromIcon.

Ensuite, nous ajoutons cet élément à la collection d’éléments de menu.

Nous déclarons les gestionnaires d’événements d’entrée (ButtonClicked et RotationChanged) pour l’objet RadialController.

Enfin, nous définissons les gestionnaires d’événements.

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

Lorsque nous exécutons l’application, nous utilisons la Surface Dial pour interagir avec elle. Tout d’abord, nous appuyons longuement pour ouvrir le menu et sélectionner notre outil personnalisé. Une fois l’outil personnalisé activé, on peut ajuster le curseur en faisant pivoter le cadran, et on peut activer le commutateur en cliquant sur le cadran.

Capture d’écran de l’exemple de contrôleur radial avec le curseur horizontal défini sur le milieu.
L’exemple d’interface utilisateur de l’application activé à l’aide de l’outil personnalisé Surface Dial

Spécifier les outils intégrés

Vous pouvez utiliser la classe RadialControllerConfiguration pour personnaliser la collection d’éléments de menu intégrés pour votre application.

Par exemple, si votre application ne dispose d’aucune zone de défilement ou de zoom et ne nécessite pas de fonctionnalité d’annulation/restauration, ces outils peuvent être supprimés du menu. Cela ouvre l’espace dans le menu pour ajouter des outils personnalisés pour votre application.

Important

Le menu Surface Dial doit avoir au moins un élément de menu. Si tous les outils par défaut sont supprimés avant d’ajouter l’un de vos outils personnalisés, les outils par défaut sont restaurés et votre outil est ajouté à la collection par défaut.

Conformément aux instructions de conception, nous vous déconseillons de supprimer les outils de contrôle multimédia (volume et piste précédente/suivante), car les utilisateurs ont souvent de la musique d’arrière-plan pendant qu’ils effectuent d’autres tâches.

Ici, nous montrons comment configurer le menu Surface Dial pour inclure uniquement les contrôles multimédias pour le volume et la piste suivante/précédente.

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

Interactions personnalisées

Comme mentionné, le Surface Dial prend en charge trois mouvements (appuyez longuement, faites pivoter, cliquez) avec les interactions par défaut correspondantes.

Assurez-vous que toutes les interactions personnalisées basées sur ces mouvements sont logiques pour l’action ou l’outil sélectionné.

Note

L’expérience d’interaction dépend de l’état du menu Surface Dial. Si le menu est actif, il traite l’entrée ; sinon, votre application le fait.

Appuyer de manière prolongée

Ce mouvement s’active et affiche le menu Surface Dial, aucune fonctionnalité d’application n’est associée à ce mouvement.

Par défaut, le menu s’affiche au centre de l’écran de l’utilisateur. Toutefois, l’utilisateur peut le saisir et le déplacer n’importe où il choisit.

Note

Lorsque la Surface Dial est placée sur l’écran de l’Surface Studio, le menu est centré sur l’emplacement de l’Surface Dial à l’écran.

Faire pivoter

Le Surface Dial est principalement conçu pour prendre en charge la rotation des interactions qui impliquent des ajustements lisses et incrémentiels sur des valeurs ou des contrôles analogiques.

L’appareil peut être pivoté à la fois dans le sens des aiguilles d’une montre et dans le sens inverse, et peut également fournir des commentaires haptiques pour indiquer des distances discrètes.

Note

Les commentaires haptiques peuvent être désactivés par l’utilisateur dans la page Windows Settings -> Devices -> Wheel.

Conseils d’expérience utilisateur pour les interactions personnalisées

Les outils ayant une sensibilité continue ou élevée doivent désactiver le retour haptique

Les retours haptiques correspondent à la sensibilité de rotation de l’outil actif. Nous vous recommandons de désactiver la rétroaction haptique pour les outils ayant une sensibilité continue ou une haute sensibilité à la rotation, car cela peut rendre l'expérience utilisateur inconfortable.

La main dominante ne doit pas affecter les interactions basées sur la rotation

Le Surface Dial ne peut pas détecter quelle main est utilisée, mais l’utilisateur peut définir l’écriture (ou la main dominante) dans Windows Settings - Device - Pen & Windows Ink.

Les paramètres régionaux doivent être pris en compte pour toutes les interactions de rotation

Optimisez la satisfaction des clients en adaptant et accommodant vos interactions à la localisation et à la conception de droite à gauche.

Les outils et commandes intégrés du menu Cadran suivent ces directives pour les interactions basées sur la rotation :

Gauche

Haut

Out

Image du Surface Dial

Droite

Bas

Direction conceptuelle	Configuration du Surface Dial	Rotation dans le sens des aiguilles d’une montre	Rotation dans le sens inverse des aiguilles d’une montre
Horizontal	Mappage gauche et droit en fonction de la partie supérieure du Surface Dial	Droite	Gauche
Vertical	Mappage de haut en bas basé sur le côté gauche du « Surface Dial »	Bas	Haut
Axe Z	Dans (ou plus proche) orienté vers le haut/droite Sortie (ou plus loin) associée vers le bas/gauche	In	Out

Assistance développeur

Lorsque l’utilisateur fait pivoter l’appareil, les événements RadialController.RotationChanged sont déclenchés en fonction d’un delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) par rapport à la direction de rotation. La sensibilité (ou la résolution) des données peut être définie avec la propriété RadialController.RotationResolutionInDegrees .

Note

Par défaut, un événement d’entrée rotation est remis à un objet RadialController uniquement lorsque l’appareil effectue une rotation minimale de 10 degrés. Chaque événement d’entrée fait vibrer l’appareil.

En général, nous vous recommandons de désactiver les commentaires haptiques lorsque la résolution de rotation est définie sur moins de 5 degrés. Cela offre une expérience plus fluide pour les interactions continues.

Vous pouvez activer et désactiver les commentaires haptiques pour les outils personnalisés en définissant la propriété RadialController.UseAutomaticHapticFeedback .

Note

Vous ne pouvez pas remplacer le comportement haptique pour les outils système tels que le contrôle de volume. Pour ces outils, les commentaires haptiques peuvent être désactivés uniquement par l’utilisateur à partir de la page des paramètres de roue.

Voici un exemple de personnalisation de la résolution des données de rotation et d’activation ou de désactivation des commentaires haptiques.

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

Click

Cliquer sur le Surface Dial est similaire au clic sur le bouton gauche de la souris (l’état de rotation de l’appareil n’a aucun effet sur cette action).

Conseils sur l’expérience utilisateur

Ne mappez pas une action ou une commande à ce mouvement si l’utilisateur ne peut pas facilement récupérer à partir du résultat

Toute action effectuée par votre application en fonction du clic de l’utilisateur sur le Surface Dial doit être réversible. Toujours permettre à l’utilisateur de parcourir facilement l'historique de navigation de l’application et de restaurer un état antérieur de l'application.

Les opérations binaires telles que activer/désactiver le son ou afficher/masquer fournissent de bonnes expériences utilisateur avec le mouvement de clic.

Les outils modaux ne doivent pas être activés ou désactivés en cliquant sur Surface Dial

Certains modes d’application/outil peuvent entrer en conflit ou désactiver des interactions qui s’appuient sur la rotation. Les outils tels que la règle dans la barre d’outils Windows Ink doivent être activés ou désactivés via d’autres affordances d’interface utilisateur (la barre d’outils Ink fournit un contrôle intégré ToggleButton).

Pour les outils modals, mappez l’élément de menu actif Surface Dial à l’outil cible ou à l’élément de menu précédemment sélectionné.

Assistance développeur

Lorsque le Surface Dial est cliqué, un événement RadialController.ButtonClicked est déclenché. La classe RadialControllerButtonClickedEventArgs inclut une propriété Contact qui contient l’emplacement et la zone englobante du contact Surface Dial sur l’écran Surface Studio. Si le Surface Dial n’est pas en contact avec l’écran, cette propriété a la valeur Null.

À l’écran

Comme décrit précédemment, le Surface Dial peut être utilisé conjointement avec le Surface Studio pour afficher le menu Surface Dial en mode spécial à l’écran.

Quand vous utilisez ce mode, vous pouvez intégrer et personnaliser vos expériences d’interaction de numérotation avec vos applications encore plus loin. Voici quelques exemples d’expériences uniques possibles uniquement avec les Surface Dial et les Surface Studio :

Affichage d’outils contextuels (tels qu’une palette de couleurs) en fonction de la position du Surface Dial, ce qui facilite leur recherche et leur utilisation
Définition de l’outil actif en fonction de l’interface utilisateur sur laquelle le Surface Dial est placé
Agrandir une zone de l'écran en fonction de l’emplacement du Surface Dial
Interactions de jeu uniques en fonction de l’emplacement de l’écran

Conseils sur l’expérience utilisateur pour les interactions à l’écran

Apps doit répondre lorsque le Surface Dial est détecté à l’écran

Les commentaires visuels permettent d’indiquer aux utilisateurs que votre application a détecté l’appareil à l’écran du Surface Studio.

Ajuster l’interface utilisateur associée à Surface Dial en fonction de l’emplacement de l’appareil

L’appareil (et le corps de l’utilisateur) peut masquer l’interface utilisateur critique en fonction de l’emplacement de l’utilisateur.

Ajuster l'interface utilisateur liée au Surface Dial en fonction de l'interaction utilisateur

En plus de l’occlusion matérielle, la main et le bras d’un utilisateur peuvent obstruer une partie de l’écran lors de l’utilisation de l’appareil.

La zone obstruée dépend de la main utilisée avec l’appareil. Comme l’appareil est conçu pour être utilisé principalement avec la main non dominante, Surface Dial’interface utilisateur associée doit s’ajuster à la main opposée spécifiée par l’utilisateur (Windows Settings Devices Pen & Windows Ink Choisir la main avec laquelle vous écrivez paramètre).

Les interactions doivent répondre à la position du Surface Dial plutôt qu'au mouvement

Le pied de l'appareil est conçu pour adhérer à l'écran plutôt que de glisser, car il ne s'agit pas d'un dispositif de pointage de précision. Par conséquent, nous nous attendons à ce qu’il soit plus courant pour les utilisateurs de soulever et de placer le Surface Dial plutôt que de le faire glisser sur l’écran.

Utiliser la position de l’écran pour déterminer l’intention de l’utilisateur

La définition de l’outil actif en fonction du contexte de l’interface utilisateur, comme la proximité d’un contrôle, d’un canevas ou d’une fenêtre, peut améliorer l’expérience utilisateur en réduisant les étapes requises pour effectuer une tâche.

Assistance développeur

Lorsque le Surface Dial est placé sur la surface du numériseur de la Surface Studio, un événement RadialController.ScreenContactStarted est déclenché et les informations de contact (RadialControllerScreenContactStartedEventArgs.Contact) sont fournies à votre application.

De même, si le Surface Dial est cliqué en contact avec la surface du numériseur du Surface Studio, un événement RadialController.ButtonClicked est déclenché et les informations de contact (RadialControllerButtonClickedEventArgs.Contact) sont fournies à votre application.

Les informations de contact (RadialControllerScreenContact) incluent la coordonnée X/Y du centre du Surface Dial dans l’espace de coordonnées de l’application (RadialControllerScreenContact.Position), ainsi que le rectangle englobant (RadialControllerScreenContact.Bounds) dans les pixels indépendants de l’appareil (DIPs). Ces informations sont très utiles pour fournir un contexte à l’outil actif et fournir des commentaires visuels liés à l’appareil à l’utilisateur.

Dans l’exemple suivant, nous avons créé une application de base avec quatre sections différentes, chacune incluant un curseur et un bouton bascule. Nous utilisons ensuite la position à l’écran du Surface Dial pour déterminer quel ensemble de curseurs et bascules sont contrôlés par le Surface Dial.

Tout d’abord, nous déclarons notre interface utilisateur (quatre sections, chacune avec un curseur et un bouton bascule) en XAML.

Capture d’écran de l’exemple de contrôleur radial avec quatre curseurs horizontaux définis sur la gauche.
Exemple d’interface utilisateur d’application

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

Voici le code-behind avec les gestionnaires définis pour la position de l'écran du 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;
    }
  }
}

Lorsque nous exécutons l’application, nous utilisons la Surface Dial pour interagir avec elle. Tout d’abord, nous placeons l’appareil sur l’écran Surface Studio, que l’application détecte et associe à la section inférieure droite (voir l’image). Nous appuyons ensuite longuement sur le Surface Dial pour ouvrir le menu et sélectionner notre outil personnalisé. Une fois l’outil personnalisé activé, le contrôle de curseur peut être ajusté en faisant pivoter le Surface Dial et le commutateur peut être activé en cliquant sur le Surface Dial.

Capture d’écran de l’exemple de contrôleur radial avec quatre curseurs horizontaux définis sur la gauche et le quatrième contrôleur mis en surbrillance.
L’exemple d’interface utilisateur de l’application activé à l’aide de l’outil personnalisé Surface Dial

Résumé

Cette rubrique fournit une vue d’ensemble de l’appareil d’entrée Surface Dial avec des instructions relatives à l’expérience utilisateur et aux développeurs sur la façon de personnaliser l’expérience utilisateur pour les scénarios hors écran, ainsi que les scénarios à l’écran lorsqu’ils sont utilisés avec Surface Studio.

Envoyez vos questions, suggestions et commentaires à radialcontroller@microsoft.com.

Didacticiel : Prendre en charge le Surface Dial (et autres périphériques de commande) dans votre application Windows

Référence d’API

Échantillons

Exemples de rubriques

La personnalisation du RadialController

Autres exemples

exemple Coloring Book

Didacticiel Commencer : Compatibilité avec le Surface Dial (et d'autres périphériques à molette) dans votre application Windows

exemples Universal Windows Platform (C# et C++)

exemple de bureau Windows

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-03-11

Partager via

interactions Surface Dial

Aperçu

Intégration du système

Personnalisation de l’utilisateur

Outils personnalisés

Conseils d’expérience utilisateur pour les outils personnalisés

Assistance développeur

Interactions personnalisées

Appuyer de manière prolongée

Faire pivoter

Conseils d’expérience utilisateur pour les interactions personnalisées

Assistance développeur

Click

Conseils sur l’expérience utilisateur

Assistance développeur

À l’écran

Conseils sur l’expérience utilisateur pour les interactions à l’écran

Assistance développeur

Résumé

Articles connexes

Référence d’API

Échantillons

Exemples de rubriques

Autres exemples

Commentaires

Ressources supplémentaires