Supportare il Surface Dial nelle applicazioni Universal Windows Platform

di Matteo Tumiati, in Windows 10,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi