Condividi tramite

Esercitazione: supportare Surface Dial (e altri dispositivi con rotellina) nell'app di Windows

  • Articolo

Immagine di Surface Dial con Surface Studio
Surface Dial con Surface Studio e Surface Pen (disponibile per l'acquisto in Microsoft Store).

Questa esercitazione illustra come personalizzare le esperienze di interazione utente supportate dai dispositivi con rotellina, ad esempio Surface Dial. Vengono usati frammenti di codice da un'app di esempio, che è possibile scaricare da GitHub (vedere codice di esempio) per illustrare le varie funzionalità e le API RadialController associate descritte in ogni passaggio.

Si ci concentrerà su:

  • Specifica degli strumenti predefiniti visualizzati nel menu RadialController
  • Aggiunta di uno strumento personalizzato al menu
  • Controllo del feedback aptico
  • Personalizzazione delle interazioni ai clic
  • Personalizzazione delle interazioni di rotazione

Per ulteriori informazioni sull'implementazione di queste e altre funzionalità, vedere Interazioni di Surface Dial nelle app di Windows.

Introduzione

Surface Dial è un dispositivo di input secondario che consente agli utenti di essere più produttivi quando usato insieme a un dispositivo di input primario, ad esempio penna, tocco o mouse. Come dispositivo di input secondario, dial viene in genere usato con la mano non dominante per fornire l'accesso sia ai comandi di sistema che ad altri strumenti e funzionalità più contestuali.

Dial supporta tre movimenti di base:

  • Pressione per visualizzare il menu predefinito dei comandi.
  • Rotazione per evidenziare una voce di menu (se il menu è attivo) o per modificare l'azione corrente nell'app (se il menu non è attivo).
  • Clic per selezionare la voce di menu evidenziata (se il menu è attivo) o per richiamare un comando nell'app (se il menu non è attivo).

Prerequisiti

Configurare i dispositivi

  1. Assicurarsi che il dispositivo Windows sia attivo.
  2. Andare su Start, selezionare Impostazioni> Dispositivi>Bluetooth & altri dispositivi e quindi attivare Bluetooth.
  3. Rimuovere la parte inferiore di Surface Dial per aprire il vano batteria e assicurarsi che all'interno siano presenti due batterie AAA.
  4. Se è presente la linguetta della batteria sul lato inferiore di Dial, rimuoverla.
  5. Tenere premuto il piccolo pulsante rientrante accanto alle batterie fino a quando la luce Bluetooth lampeggia.
  6. Tornare al dispositivo Windows e selezionare Aggiungi Bluetooth o altro dispositivo.
  7. Nella finestra di dialogo Aggiungi un dispositivo selezionare Bluetooth>Surface Dial. Il dispositivo Surface Dial dovrebbe ora connettersi e essere aggiunto all'elenco dei dispositivi in Mouse, tastiera & penna nella pagina delle impostazioni Bluetooth & altri dispositivi.
  8. Testare dial tenendo premuto per alcuni secondi per visualizzare il menu predefinito.
  9. Se il menu non viene visualizzato sullo schermo (dial dovrebbe anche vibrare), tornare alle impostazioni Bluetooth, rimuovere il dispositivo e provare a connettere di nuovo il dispositivo.

Nota

I dispositivi con rotellina possono essere configurati tramite le impostazioni Rotellina:

  1. Dal menu Start scegliere Impostazioni.
  2. Selezionare Dispositivi>Rotellina.
    Schermata impostazioni rotellina

A questo punto è possibile iniziare questa esercitazione.

Codice di esempio

In questa esercitazione si usa un'app di esempio per dimostrare i concetti e le funzionalità illustrati.

Scaricare questo esempio di Visual Studio e il codice sorgente da GitHub nell'esempio windows-appsample-get-started-radialcontroller:

  1. Selezionare il pulsante verde Clonare o scaricare.
    Clonazione del repository
  2. Se si dispone di un account GitHub, è possibile clonare il repository nel computer locale scegliendo Apri in Visual Studio.
  3. Se non si dispone di un account GitHub o si desidera semplicemente una copia locale del progetto, scegliere Scarica ZIP (sarà necessario verificare regolarmente la disponibilità di aggiornamenti).

Importante

La maggior parte del codice nell'esempio è impostata come commento. Scorrendo ciascun passaggio di questa sezione, verrà chiesto di rimuovere il commento da varie sezioni del codice. In Visual Studio è sufficiente evidenziare le righe di codice e premere CTRL-K e quindi CTRL-U.

Componenti che supportano la funzionalità rotellina

Questi oggetti forniscono la maggior parte dell'esperienza dei dispositivi con rotellina per le app Windows.

Componente Descrizione
Classe RadialController e temi correlati Rappresenta un dispositivo o un accessorio di input con rotellina, ad esempio Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Questa funzionalità non viene illustrata in questa sezione. Per ulteriori informazioni, vedere l'esempio desktop di Windows.		 Abilita l'interoperabilità con un'app di Windows.

Passaggio 1: Eseguire l'esempio

Dopo aver scaricato l'app di esempio RadialController, verificare che venga eseguita:

  1. Aprire il progetto di esempio in Visual Studio.
  2. Impostare l'elenco a discesa Piattaforme soluzione su una selezione non-Arm.
  3. Premere F5 per compilare, distribuire ed eseguire.

Nota

In alternativa, è possibile selezionare la voce del menu Debug>Avvia debug oppure selezionare il pulsante Macchina locale mostrato qui: Pulsante Compila progetto di Visual Studio

Viene visualizzata la finestra dell'app e, dopo aver visualizzato una schermata iniziale per alcuni secondi, verrà visualizzata questa schermata.

App vuota

Ora si dispone dell'app Windows di base che si userà nella parte restante di questa esercitazione. Nei passaggi seguenti si aggiunge la funzionalità RadialController.

Passaggio 2: funzionalità RadialController di base

Con l'app in esecuzione e in primo piano, tenere premuto Surface Dial per visualizzare il menu RadialController.

Non è stata ancora eseguita alcuna personalizzazione per l'app, quindi il menu contiene un set predefinito di strumenti contestuali.

Queste immagini mostrano due varianti del menu predefinito. Ce ne sono molte altre, tra cui solo strumenti di sistema di base quando Windows Desktop è attivo e nessuna app è in primo piano, strumenti di input penna aggiuntivi quando è presente un controllo InkToolbar e strumenti di mapping quando si usa l'app Mappe.

Menu RadialController (impostazione predefinita) Menu RadialController (impostazione predefinita con riproduzione multimediale)
Menu RadialController predefinito Menu RadialController predefinito con musica

A questo punto è possibile iniziare con alcune personalizzazioni di base.

Passaggio 3: Aggiungere controlli per l'input tramite rotellina

Aggiungere prima di tutto l'interfaccia utente per l'app:

  1. Aprire il file MainPage_Basic.xaml.

  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 3: Aggiungere controlli per l'input tramite rotellina -->").

  3. Rimuovere i commenti dalle seguenti righe.

    <Button x:Name="InitializeSampleButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Initialize sample" />
<ToggleButton x:Name="AddRemoveToggleButton"
                HorizontalAlignment="Center" 
                Margin="10" 
                Content="Remove Item"
                IsChecked="True" 
                IsEnabled="False"/>
<Button x:Name="ResetControllerButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Reset RadialController menu" 
        IsEnabled="False"/>
<Slider x:Name="RotationSlider" Minimum="0" Maximum="10"
        Width="300"
        HorizontalAlignment="Center"/>
<TextBlock Text="{Binding ElementName=RotationSlider, Mode=OneWay, Path=Value}"
            Margin="0,0,0,20"
            HorizontalAlignment="Center"/>
<ToggleSwitch x:Name="ClickToggle"
                MinWidth="0" 
                Margin="0,0,0,20"
                HorizontalAlignment="center"/>

A questo punto, sono abilitati solo il pulsante Inizializza esempio, il dispositivo di scorrimento e l'interruttore Attiva/Disattiva. Gli altri pulsanti saranno usati nei passaggi successivi per aggiungere e rimuovere voci di menu RadialController che forniscono l'accesso al dispositivo di scorrimento e all'interruttore.

Interfaccia utente dell'app di esempio di base

Passaggio 4: Personalizzare il menu RadialController di base

Aggiungere ora il codice necessario per abilitare l'accesso ai controlli RadialController.

  1. Aprire il file MainPage_Basic.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 4: Personalizzare il menu RadialController di base").
  3. Rimuovere i commenti dalle seguenti righe:

    • I riferimenti ai tipi Windows.UI.Input e Windows.Storage.Streams vengono usati per le funzionalità nei passaggi successivi:

      // Using directives for RadialController functionality.
using Windows.UI.Input;

    • Questi oggetti globali (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) vengono usati in tutta l'app.

      private RadialController radialController;
private RadialControllerConfiguration radialControllerConfig;
private RadialControllerMenuItem radialControllerMenuItem;

    • Qui si specifica il gestore Click per il pulsante che abilita i controlli e inizializza la voce di menu RadialController personalizzata.

      InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };

    • Inizializziamo quindi l'oggetto RadialController e impostiamo i gestori per gli eventi RotationChanged e ButtonClicked.

      // Set up the app UI and RadialController.
private void InitializeSample(object sender, RoutedEventArgs e)
{
    ResetControllerButton.IsEnabled = true;
    AddRemoveToggleButton.IsEnabled = true;

    ResetControllerButton.Click += (resetsender, args) =>
    { ResetController(resetsender, args); };
    AddRemoveToggleButton.Click += (togglesender, args) =>
    { AddRemoveItem(togglesender, args); };

    InitializeController(sender, e);
}

    • In questo caso, si inizializza la voce di menu RadialController personalizzata. Si utilizza CreateForCurrentView per ottenere un riferimento all'oggetto RadialController, si imposta la sensibilità di rotazione su "1" usando la proprietà RotationResolutionInDegrees, quindi si crea il RadialControllerMenuItem usando CreateFromFontGlyph, si aggiunge la voce di menu all'insieme delle voci di menu di RadialController e infine si utilizza SetDefaultMenuItems per cancellare le voci di menu predefinite e lasciare solo lo strumento personalizzato.

      // Configure RadialController menu and custom tool.
private void InitializeController(object sender, RoutedEventArgs args)
{
    // Create a reference to the RadialController.
    radialController = RadialController.CreateForCurrentView();
    // Set rotation resolution to 1 degree of sensitivity.
    radialController.RotationResolutionInDegrees = 1;

    // Create the custom menu items.
    // Here, we use a font glyph for our custom tool.
    radialControllerMenuItem =
        RadialControllerMenuItem.CreateFromFontGlyph("SampleTool", "\xE1E3", "Segoe MDL2 Assets");

    // Add the item to the RadialController menu.
    radialController.Menu.Items.Add(radialControllerMenuItem);

    // Remove built-in tools to declutter the menu.
    // NOTE: The Surface Dial menu must have at least one menu item. 
    // If all built-in tools are removed before you add a custom 
    // tool, the default tools are restored and your tool is appended 
    // to the default collection.
    radialControllerConfig =
        RadialControllerConfiguration.GetForCurrentView();
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });

    // Declare input handlers for the RadialController.
    // NOTE: These events are only fired when a custom tool is active.
    radialController.ButtonClicked += (clicksender, clickargs) =>
    { RadialController_ButtonClicked(clicksender, clickargs); };
    radialController.RotationChanged += (rotationsender, rotationargs) =>
    { RadialController_RotationChanged(rotationsender, rotationargs); };
}

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    if (RotationSlider.Value + args.RotationDeltaInDegrees >= RotationSlider.Maximum)
    {
        RotationSlider.Value = RotationSlider.Maximum;
    }
    else if (RotationSlider.Value + args.RotationDeltaInDegrees < RotationSlider.Minimum)
    {
        RotationSlider.Value = RotationSlider.Minimum;
    }
    else
    {
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }
}

// Connect wheel device click to toggle switch control.
private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ClickToggle.IsOn = !ClickToggle.IsOn;
}
  4. A questo punto, si esegue di nuovo l'app.
  5. Selezionare il pulsante Inizializza controller radiale.
  6. Con l'app in primo piano, tenere premuto Surface Dial per visualizzare il menu. Si noti che tutti gli strumenti predefiniti sono stati rimossi (usando il metodo RadialControllerConfiguration.SetDefaultMenuItems), lasciando solo lo strumento personalizzato. Ecco il menu con lo strumento personalizzato.
Menu RadialController (personalizzato)
Menu RadialController personalizzato
  1. Selezionare lo strumento personalizzato e provare le interazioni ora supportate tramite Surface Dial:
    • Un'azione di rotazione sposta il dispositivo di scorrimento.
    • Un clic imposta l'interruttore su attivato o disattivato.

Ok, ora è possibile associare questi pulsanti.

Passaggio 5: Configurare il menu in fase di esecuzione

In questo passaggio si associano i pulsanti Aggiungi/Rimuovi elementi e Ripristina il menu RadialController per mostrare come personalizzare dinamicamente il menu.

  1. Aprire il file MainPage_Basic.xaml.cs.

  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 5: Configurare il menu in fase di esecuzione").

  3. Rimuovere il commento dal codice nei metodi seguenti ed eseguire di nuovo l'app, ma non selezionare alcun pulsante (attendere il passaggio successivo).

    // Add or remove the custom tool.
private void AddRemoveItem(object sender, RoutedEventArgs args)
{
    if (AddRemoveToggleButton?.IsChecked == true)
    {
        AddRemoveToggleButton.Content = "Remove item";
        if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Add(radialControllerMenuItem);
        }
    }
    else if (AddRemoveToggleButton?.IsChecked == false)
    {
        AddRemoveToggleButton.Content = "Add item";
        if (radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Remove(radialControllerMenuItem);
            // Attempts to select and activate the previously selected tool.
            // NOTE: Does not differentiate between built-in and custom tools.
            radialController.Menu.TrySelectPreviouslySelectedMenuItem();
        }
    }
}

// Reset the RadialController to initial state.
private void ResetController(object sender, RoutedEventArgs arg)
{
    if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
    {
        radialController.Menu.Items.Add(radialControllerMenuItem);
    }
    AddRemoveToggleButton.Content = "Remove item";
    AddRemoveToggleButton.IsChecked = true;
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });
}

  4. Selezionare il pulsante Rimuovi elemento e quindi tenere premuto Dial per visualizzare di nuovo il menu.

    Si noti che il menu contiene ora la raccolta predefinita di strumenti. Tenere presente che, nel passaggio 3, durante la configurazione del menu personalizzato, sono stati rimossi tutti gli strumenti predefiniti ed è stato aggiunto solo lo strumento personalizzato. Si noti inoltre che, quando il menu è impostato su una raccolta vuota, le voci predefinite per il contesto corrente vengono ripristinate. (Prima di rimuovere gli strumenti predefiniti è stato aggiunto lo strumento personalizzato.)

  5. Selezionare il pulsante Aggiungi elemento e quindi tenere premuto Dial.

    Si noti che il menu contiene ora sia la raccolta predefinita di strumenti che lo strumento personalizzato.

  6. Selezionare il pulsante di menu Reset RadialController e quindi tenere premuto Dial.

    Si noti che il menu torna allo stato originale.

Passaggio 6: Personalizzare gli effetti aptici del dispositivo

Surface Dial e altri dispositivi con rotellina possono fornire agli utenti un feedback aptico corrispondente all'interazione corrente (in base al clic o alla rotazione).

In questo passaggio viene illustrato come personalizzare il feedback aptico associando i controlli dispositivo di scorrimento e interruttore e attivandoli per specificare dinamicamente il comportamento del feedback aptico. Per questo esempio, l'interruttore attiva/disattiva deve essere impostato su On per consentire l'abilitazione del feedback mentre il valore del dispositivo di scorrimento specifica la frequenza con cui viene ripetuto il feedback del clic.

Nota

Il feedback aptico può essere disabilitato dall'utente nella pagina Impostazioni>Dispositivi>Rotellina.

  1. Aprire il file App.xaml.cs.

  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("Passaggio 6: Personalizzare gli effetti aptici del dispositivo").

  3. Impostare come commento la prima e la terza riga ("MainPage_Basic" e "MainPage") e rimuovere il commento dalla seconda ("MainPage_Haptics").

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  4. Aprire il file MainPage_Haptics.xaml.

  5. Trovare il codice contrassegnato con il titolo di questo passaggio ("<!--Passaggio 6: Personalizzare gli effetti aptici del dispositivo -->").

  6. Rimuovere i commenti dalle seguenti righe. (Questo codice dell'interfaccia utente indica semplicemente quali funzionalità di tipo aptico sono supportate dal dispositivo corrente.)

    <StackPanel x:Name="HapticsStack" 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            BorderBrush="Gray" 
            BorderThickness="1">
    <TextBlock Padding="10" 
                Text="Supported haptics properties:" />
    <CheckBox x:Name="CBDefault" 
                Content="Default" 
                Padding="10" 
                IsEnabled="False" 
                IsChecked="True" />
    <CheckBox x:Name="CBIntensity" 
                Content="Intensity" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayCount" 
                Content="Play count" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayDuration" 
                Content="Play duration" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBReplayPauseInterval" 
                Content="Replay/pause interval" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBBuzzContinuous" 
                Content="Buzz continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBClick" 
                Content="Click" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPress" 
                Content="Press" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRelease" 
                Content="Release" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRumbleContinuous" 
                Content="Rumble continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
</StackPanel>

  7. Aprire il file MainPage_Haptics.xaml.cs.

  8. Trovare il codice contrassegnato con il titolo di questo passaggio ("Passaggio 6: Personalizzazione degli effetti aptici").

  9. Rimuovere i commenti dalle seguenti righe:

    • Il riferimento al tipo Windows.Devices.Haptics viene usato per le funzionalità nei passaggi successivi.

      using Windows.Devices.Haptics;

    • Qui si specifica il gestore per l'evento ControlAcquired che viene attivato quando è selezionata la voce di menu RadialController personalizzata.

      radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };

    • Successivamente, si definisce il gestore ControlAcquired, in cui disabilitiamo il feedback aptico predefinito e inizializziamo l'interfaccia utente aptica.

      private void RadialController_ControlAcquired(
    RadialController rc_sender,
    RadialControllerControlAcquiredEventArgs args)
{
    // Turn off default haptic feedback.
    radialController.UseAutomaticHapticFeedback = false;

    SimpleHapticsController hapticsController =
        args.SimpleHapticsController;

    // Enumerate haptic support.
    IReadOnlyCollection<SimpleHapticsControllerFeedback> supportedFeedback =
        hapticsController.SupportedFeedback;

    foreach (SimpleHapticsControllerFeedback feedback in supportedFeedback)
    {
        if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.BuzzContinuous)
        {
            CBBuzzContinuous.IsEnabled = true;
            CBBuzzContinuous.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Click)
        {
            CBClick.IsEnabled = true;
            CBClick.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Press)
        {
            CBPress.IsEnabled = true;
            CBPress.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Release)
        {
            CBRelease.IsEnabled = true;
            CBRelease.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.RumbleContinuous)
        {
            CBRumbleContinuous.IsEnabled = true;
            CBRumbleContinuous.IsChecked = true;
        }
    }

    if (hapticsController?.IsIntensitySupported == true)
    {
        CBIntensity.IsEnabled = true;
        CBIntensity.IsChecked = true;
    }
    if (hapticsController?.IsPlayCountSupported == true)
    {
        CBPlayCount.IsEnabled = true;
        CBPlayCount.IsChecked = true;
    }
    if (hapticsController?.IsPlayDurationSupported == true)
    {
        CBPlayDuration.IsEnabled = true;
        CBPlayDuration.IsChecked = true;
    }
    if (hapticsController?.IsReplayPauseIntervalSupported == true)
    {
        CBReplayPauseInterval.IsEnabled = true;
        CBReplayPauseInterval.IsChecked = true;
    }
}

    • Nei gestori eventi RotationChanged e ButtonClicked colleghiamo i controlli del dispositivo di scorrimento e del pulsante di attivazione/disattivazione corrispondenti agli effetti aptici personalizzati.

      // Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    ...
    if (ClickToggle.IsOn && 
        (RotationSlider.Value > RotationSlider.Minimum) && 
        (RotationSlider.Value < RotationSlider.Maximum))
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.BuzzContinuous);
        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedback(waveform);
        }
    }
}

private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ...

    if (RotationSlider?.Value > 0)
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.Click);

        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedbackForPlayCount(
                waveform, 1.0, 
                (int)RotationSlider.Value, 
                TimeSpan.Parse("1"));
        }
    }
}

    • Infine, si ottiene la forma d'onda richiesta (se supportata) per il feedback aptico.

      // Get the requested waveform.
private SimpleHapticsControllerFeedback FindWaveform(
    SimpleHapticsController hapticsController,
    ushort waveform)
{
    foreach (var hapticInfo in hapticsController.SupportedFeedback)
    {
        if (hapticInfo.Waveform == waveform)
        {
            return hapticInfo;
        }
    }
    return null;
}

Eseguire di nuovo l'app per provare gli effetti aptici personalizzati modificando il valore del dispositivo di scorrimento e attivando/disattivando lo stato dell'interruttore.

Passaggio 7: Definire le interazioni sullo schermo per Surface Studio e dispositivi simili

Abbinato a Surface Studio, Surface Dial può offrire un'esperienza utente ancora più distintiva.

Oltre all'esperienza predefinita descritta del menu attivato dalla pressione, Surface Dial può anche essere posizionato direttamente sullo schermo di Surface Studio. In questo modo viene abilitato un menu speciale "sullo schermo".

Rilevando sia la posizione del contatto che i limiti di Surface Dial, il sistema gestisce l'occlusione generata dal dispositivo e visualizza una versione più grande del menu che si sviluppa attorno al Dial. Queste stesse informazioni possono essere usate anche dall'app per adattare l'interfaccia utente sia per la presenza del dispositivo che per l'utilizzo previsto, ad esempio il posizionamento della mano e del braccio dell'utente.

L'esempio che accompagna questa esercitazione include un esempio leggermente più complesso che illustra alcune di queste funzionalità.

Per visualizzarlo in azione (è necessario un dispositivo Surface Studio):

  1. Scaricare l'esempio su un dispositivo Surface Studio (con Visual Studio installato)

  2. Aprire l'esempio in Visual Studio

  3. Aprire il file App.xaml.cs

  4. Trovare il codice contrassegnato con il titolo di questo passaggio ("Passaggio 7: Definire le interazioni sullo schermo per Surface Studio e dispositivi simili")

  5. Impostare come commento la prima e la seconda riga ("MainPage_Basic" e "MainPage_Haptics") e rimuovere il commento dalla terza ("MainPage").

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  6. Eseguire l'app e posizionare Surface Dial in ognuna delle due aree di controllo, alternandole.
    RadialController su schermo

Riepilogo

Congratulazioni, L'esercitazione introduttiva: supportare Surface Dial (e altri dispositivi con rotellina) nell'app di Windows è stata completata! Abbiamo mostrato il codice di base necessario per supportare un dispositivo con rotellina nelle app di Windows e come fornire alcune delle esperienze utente più avanzate supportate dalle API RadialController.

Interazioni con Surface Dial

Informazioni di riferimento sulle API

Esempi

Esempi di argomento

Personalizzazione RadialController

Altri esempi

Esempio album da colorare

Esempi per la piattaforma UWP (Universal Windows Platform) (C# e C++)

Esempio desktop di Windows