Interactions avec Surface Dial

Article
01/22/2024

Image de Surface Dial avec Surface Studio
Surface Dial avec Surface Studio et stylet (disponible pour l’achat dans le Microsoft Store).

Vue d’ensemble

Les appareils Windows Wheel, tels que Surface Dial, sont une nouvelle catégorie d’appareil d’entrée qui permet d’avoir une multitude d’expériences d’interaction utilisateur attrayantes et uniques pour les applications Windows et Windows.

Important

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

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

Surface Dial prend également en charge une action d’appui et de suspension et une action de clic . Appuyez longuement sur une fonction unique : affichez un menu de commandes. Si le menu est actif, la rotation et le clic d’entrée sont traités par le menu. Sinon, l’entrée est transmise à votre application pour traitement.

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

Conseil

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

En plus de l’expérience du menu appui prolongé et suspension par défaut décrite, le Surface Dial peut également être placé directement sur l’écran de 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’encapsule à l’extérieur du numéro. Ces mêmes informations peuvent également être utilisées par votre application pour adapter l’IU à la fois à la présence de l’appareil et à son utilisation anticipée, telles que la position de la main et du bras de l’utilisateur.

Menu Hors écran surface Dial

Menu Surface Dial à l’écran

Intégration du système

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 luminosité 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, Surface Dial est également étroitement intégré aux contrôles de plateforme Windows Ink (InkCanvas et InkToolbar).

Surface Dial avec stylet Surface

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

Lorsque vous ouvrez le menu Surface Dial dans une application d’entrée 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 Surface Dial avec outil de sélection de stylet pour la barre d’outils Windows Ink

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

Menu Surface Dial avec 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 numérotation via la page Windows Paramètres -> Appareils -> Roues, y compris les outils par défaut, les vibrations (ou commentaires haptiques) et l’écriture (ou dominante) main.

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

Assurez-vous que vos outils correspondent au contexte actuel lorsque vous le faites 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 dispose d’une place pour sept éléments. S’il y a huit éléments ou plus, l’utilisateur doit activer la numérotation pour voir quels outils sont disponibles dans un menu volant de dépassement de capacité, ce qui rend le menu difficile à parcourir et aux 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 les éléments de menu Surface Dial 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. Ils peuvent écouter de la musique lors de l’utilisation de votre application. Le volume et les outils de piste suivants doivent toujours être accessibles à partir du 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 roue avec thème par défaut

Icône affichée dans le menu 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 courts à l’intérieur du cercle central du menu 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 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 Surface Dial par défaut est prérempli avec un ensemble d’outils intégrés couvrant un large éventail 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 à partir de la personnalisation 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.
L’exemple d’IU de l’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 le 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 Surface Dial (myController) en appelant CreateForCurrentView.

Nous créons ensuite une instance d’un RadialControllerMenuItem (myItem) en appellant 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 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é, le contrôle de curseur peut être ajusté en faisant pivoter le numéro et le commutateur peut être activé en cliquant sur le numéro.

Capture d’écran de l’exemple de contrôleur radial avec le curseur horizontal défini sur le milieu.
L’exemple d’IU 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 prédéfini 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 client

Comme mentionné, 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é.

Remarque

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.

Remarque

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

Faire pivoter

Surface Dial est principalement conçu pour prendre en charge la rotation pour les 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.

Remarque

Les commentaires haptiques peuvent être désactivés par l’utilisateur dans la page Windows Paramètres -> Appareils -> Roue.

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

Les outils avec une sensibilité continue ou élevée doivent désactiver les commentaires haptiques

Les commentaires haptiques correspondent à la sensibilité de rotation de l’outil actif. Nous vous recommandons de désactiver les commentaires haptiques pour les outils avec une sensibilité continue ou haute rotation, car l’expérience utilisateur peut se sentir mal à l’aise.

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

Surface Dial ne peut pas détecter la main utilisée, mais l’utilisateur peut définir l’écriture (ou la main dominante) dans Windows Paramètres -> Appareil -> Stylet et Windows Ink.

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

Optimisez la satisfaction des clients en accommodant et en adaptant vos interactions aux paramètres régionaux et aux dispositions de droite à gauche.

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

Left

Haut

Out

Image du Surface Dial

Right

Descendre

Dans

Direction conceptuelle	Mappage à 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 du haut du Surface Dial	Right	Left
Vertical	Mappage haut et bas basé sur le côté gauche du Surface Dial	Descendre	Haut
Axe Z	Dans (ou plus proche) mappé vers le haut/vers la droite Sortie (ou plus) mappée vers le bas/gauche	Dans	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.

Remarque

Par défaut, un événement d’entrée rotation est remis à un objet RadialController uniquement lorsque l’appareil est pivoté à un minimum 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.

Remarque

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

Cliquez

Cliquer sur 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).

Recommandations en matière d’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 Surface Dial doit être réversible. Toujours permettre à l’utilisateur de parcourir facilement la pile arrière de l’application et de restaurer un état d’application précédent.

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

Les outils modals 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 ToggleButton intégré).

Pour les outils modals, mappez l’élément de menu Surface Dial actif à 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é. RadialControllerButtonClickedEventArgs inclut une propriété Contact qui contient l’emplacement et la zone englobante du contact Surface Dial sur l’écran Surface Studio. Si 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, Surface Dial peut être utilisé conjointement avec 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 Surface Dial et 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 Surface Dial est placé
Loupe une zone d’é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

Les applications doivent répondre lorsque Surface Dial est détecté à l’écran

Les commentaires visuels permettent d’indiquer aux utilisateurs que votre application a détecté l’appareil sur 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 associée à Surface Dial en fonction de l’interaction de l’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, l’interface utilisateur associée à Surface Dial doit s’ajuster à la main opposée spécifiée par l’utilisateur (Windows Paramètres > Devices Pen > & Windows Ink > Choisir la main que vous écrivez avec le paramètre).

Les interactions doivent répondre à la position Surface Dial plutôt qu’au déplacement

Le pied de l’appareil est conçu pour coller à l’écran plutôt que sur la diapositive, car il ne s’agit pas d’un appareil 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 Surface Dial est placé sur la surface du numériseur de 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 de 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 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.
L’exemple d’IU de l’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 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 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 Surface Dial pour ouvrir le menu et sélectionnez notre outil personnalisé. Une fois l’outil personnalisé activé, le contrôle de curseur peut être ajusté en faisant pivoter Surface Dial et le commutateur peut être activé en cliquant sur 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’IU 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 sur l’expérience utilisateur et les 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.

Prise en charge de Surface Dial (et autres périphériques à molette) dans votre application Windows

Informations de référence sur l'API

Exemples

Exemples de la rubrique

Personnalisation RadialController

Autres exemples

Exemple de Livre de coloriage

Prise en charge de Surface Dial (et autres périphériques à molette) dans votre application Windows

Exemples de la plateforme Windows universelle (C# et C++)

Exemple de bureau Windows

Partager via

Interactions avec Surface Dial

Vue d’ensemble

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 client

Appuyer de manière prolongée

Faire pivoter

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

Assistance développeur

Cliquez

Recommandations en matière d’expérience utilisateur

Assistance développeur

À L’ÉCRAN

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

Assistance développeur

Résumé

Informations de référence sur l'API

Exemples

Exemples de la rubrique

Autres exemples

Ressources supplémentaires

Partager via

Interactions avec Surface Dial

Vue d’ensemble

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 client

Appuyer de manière prolongée

Faire pivoter

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

Assistance développeur

Cliquez

Recommandations en matière d’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

Informations de référence sur l'API

Exemples

Exemples de la rubrique

Autres exemples

Ressources supplémentaires