Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Surface Dial avec Surface Studio et stylet (disponible pour l’achat dans le Microsoft Store).
Aperçu
Les périphériques à molette Windows, tels que le Surface Dial, sont une nouvelle catégorie de périphériques d’entrée qui permettent d’offrir une multitude d’expériences d'interaction utilisateur attrayantes et uniques pour Windows et ses applications.
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 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).
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, 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 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 / Astuce
Utilisé ensemble, Surface Dial et le nouveau Surface Studio peuvent offrir une expérience utilisateur encore plus distinctive.
En plus de l’expérience de menu d’appui et de 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 contours du Surface Dial, le système utilise ces informations pour gérer l’occlusion due à l’appareil et afficher une version plus grande du menu qui s’entoure autour de l’extérieur du Surface 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 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 réglage de luminosité du système lorsque l’utilisateur est 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 le Surface Dial, ces commandes activent des fonctionnalités supplémentaires pour modifier les attributs d'encre et contrôler le pochoir de règle de la barre d’outils d'encre.
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 utilisateur
Les utilisateurs peuvent personnaliser certains aspects de leur expérience Dial via les paramètres Windows -> Appareils -> Wheel, y compris les outils par défaut, les vibrations (ou rétroaction haptique) et la main dominante pour l'écriture.
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
Vérifiez que vos outils correspondent au contexte actuel Lorsque vous faites en sorte qu’il soit clair et intuitif 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 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 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 pourraient écouter de la musique tout en utilisant votre application, il est donc important que les commandes de volume et de piste suivante soient toujours accessibles depuis le menu du 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
Conseils pour les développeurs
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 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.
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 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 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 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.
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é, 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 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.
Note
Les commentaires haptiques peuvent être désactivés par l’utilisateur dans la page Paramètres Windows -> Appareils -> Roues .
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
Surface Dial ne peut pas détecter la main utilisée, mais l’utilisateur peut définir l’écriture (ou la main dominante) dans les paramètres Windows -> 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 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
Droite
Bas
In
| Direction conceptuelle | Mappage pour 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 | Droite | Gauche |
| Vertical | Mappage haut et 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 |
Conseils pour les développeurs
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 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 .
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 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 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 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é.
Conseils pour les développeurs
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é
- Agrandir la zone d'un é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. Puisque 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 (Paramètres Windows > Appareils > Stylet & Windows Ink > Choisir la main avec laquelle vous écrivez réglage).
Les interactions doivent répondre à la position Surface Dial plutôt qu’au déplacement
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.
Conseils pour les développeurs
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.
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 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 pour sélectionner 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.
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 conseils UX destinés aux développeurs sur la façon de personnaliser l'expérience utilisateur pour les scénarios hors écran et à l'écran lorsqu'il est utilisé avec le Surface Studio.
Envoyez vos questions, suggestions et commentaires à radialcontroller@microsoft.com.
Articles connexes
Référence d’API
- RadialController , classe
- Classe RadialControllerButtonClickedEventArgs
- RadialControllerConfiguration , classe
- classe RadialControllerControlAcquiredEventArgs
- RadialControllerMenu , classe
- RadialControllerMenuItem classe
- RadialControllerRotationChangedEventArgs classe
- RadialControllerScreenContact , classe
- Classe RadialControllerScreenContactContinuedEventArgs
- Classe RadialControllerScreenContactStartedEventArgs
- Enum RadialControllerMenuKnownIcon
- RadialControllerSystemMenuItemKind enum
Samples
Exemples de rubriques
La personnalisation du RadialController
Autres exemples
Exemple de livre de coloration
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.
Windows developer