Il Surface Dial è un accessorio che rientra in una nuova categoria, mai vista prima, di prodotti che sfruttano un avanzato sistema di controllo, tramite un collegamento BLE, per interagire con i contenuti delle applicazioni della Universal Windows Platform e permette di scorrere pagine web, modificare il volume, modificare gli strumenti di disegno e molto altro ancora, attraverso l'uso della mano secondaria, un po' come avviene nel caso del mouse. Sebbene sia stato presentato con il Surface Studio, con il quale lavora in perfetta sinergia, Surface Dial è in grado di funzionare in tutte le applicazioni native in Windows 10 a partire dall'Anniversary Update, grazie all'introduzione delle API per i RadialController.
Per aggiungere il supporto al Surface Dial è necessario creare un oggetto RadialController a partire dalla view corrente e, successivamente, lo si può personalizzare aggiungendo tutti i pulsanti e le relative funzionalità di cui l'applicazione necessita:
private void CreateRadialHandler() { var myController = RadialController.CreateForCurrentView(); // creo dei pulsanti personalizzati. var volume = RadialControllerMenuItem.CreateFromKnownIcon("Volume", RadialControllerMenuKnownIcon.Volume); var scroll = RadialControllerMenuItem.CreateFromKnownIcon("Scroll", RadialControllerMenuKnownIcon.Scroll); var zoom = RadialControllerMenuItem.CreateFromFontGlyph("Zoom", "ZoomIn", "SegoeUI"); var undo = RadialControllerMenuItem.CreateFromIcon("Undo", RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Undo.png"))); // aggiungo i pulsanti al menù myController.Menu.Items.Add(volume); myController.Menu.Items.Add(scroll); myController.Menu.Items.Add(zoom); myController.Menu.Items.Add(undo); // registro gli eventi myController.ButtonClicked += MyController_ButtonClicked; myController.RotationChanged += MyController_RotationChanged; }
In questo caso specifico, una volta ottenuto l'oggetto controller, abbiamo aggiunto al menù quattro pulsanti differenti, le cui icone sono state recuperate a partire da risorse note, da glyph e da icone inserite all'interno dell'applicazione stessa. Infine, ci siamo registrati agli eventi relativi al click di un elemento sul menù e alla rotazione del Dial, ma ci si può anche registrare all'evento ScreenContactStarted in caso in cui si vogliano applicare condizioni specifiche in base alla posizione in cui il Dial è stato appoggiato allo schermo. Il risultato finale sarà simile al seguente:
L'utilizzo di queste API richiede la presenza di un device fisico, dato che non è presente un vero e proprio simulatore, ma è possibile installare pacchetti di NuGet, tipo InTheHand.UI.Input.SimulatedRadialController, che sfruttano il mouse per realizzare comportamenti similari e così facendo sarete in grado di testare il codice appena scritto. In ogni caso, rimandiamo alla documentazione tecnica che è molto completa e spiega anche come realizzare scenari specifici: https://docs.microsoft.com/en-us/windows/uwp/design/input/windows-wheel-interactions
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare flat e flatMap per appiattire array innestati in array
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Gestire undefined e partial nelle reactive forms di Angular
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare Model as a Service su Microsoft Azure
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Inizializzare i container in Azure Container Apps
Evitare la script injection nelle GitHub Actions
Reactive form tipizzati con modellazione del FormBuilder in Angular
Limitare le richieste lato server con l'interactive routing di Blazor 8
Sostituire la GitHub Action di login su private registry