Condividi tramite


Esercitazione: Come supportare Surface Dial (e altri dispositivi a rotella) nell'app per Windows

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

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

Ci concentriamo sui seguenti aspetti:

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

Per altre informazioni sull'implementazione di queste e altre funzionalità, vedi 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 usati insieme a un dispositivo di input primario, ad esempio penna, tocco o mouse. Come dispositivo di input secondario, la Manopola viene in genere usata con la mano non dominante per fornire l'accesso sia ai comandi di sistema che ad altri strumenti e funzionalità più contestuali.

Il Dial supporta tre gesti di base:

  • Tenere premuto per visualizzare il menu predefinito dei comandi.
  • Ruotare per evidenziare una voce di menu (se il menu è attivo) o per modificare l'azione corrente nell'app (se il menu non è attivo).
  • Fare 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. Vai a Start, seleziona Impostazioni Dispositivi>>Bluetooth e altri dispositivi e quindi attiva Bluetooth.
  3. Rimuovere la parte inferiore di Surface Dial per aprire il vano batteria e assicurarsi che ci siano due batterie AAA all'interno.
  4. Se la linguetta della batteria è presente sul lato inferiore del Dial, rimuoverla.
  5. Premere e tenere il piccolo pulsante incassato vicino 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 e penna nella pagina delle impostazioni Bluetooth e altri dispositivi .
  8. Testare la manopola premendola e tenendola premuta per alcuni secondi per visualizzare il menu integrato.
  9. Se il menu non viene visualizzato sullo schermo (anche dial dovrebbe vibrare), tornare alle impostazioni Bluetooth, rimuovere il dispositivo e provare a connettere di nuovo il dispositivo.

Annotazioni

I dispositivi a rotella possono essere configurati tramite le impostazioni della rotella.

  1. Nel menu Start selezionare Impostazioni.
  2. Selezionare Dispositivi>Ruota.
    schermata delle impostazioni della ruota

A questo punto si è pronti per iniziare questa esercitazione.

Esempio di codice

In questa esercitazione viene usata un'app di esempio per illustrare i concetti e le funzionalità illustrati.

Scarica questo esempio di Visual Studio e il codice sorgente da GitHub su esempio windows-appsample-get-started-radialcontroller:

  1. Clicca sul pulsante verde Clona o scarica.
    Clonazione del repository
  2. Se si ha 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 vuole semplicemente una copia locale del progetto, selezionare Download ZIP (sarà necessario controllare regolarmente per scaricare gli aggiornamenti più recenti).

Importante

La maggior parte del codice nell'esempio è commentato. Man mano che affrontiamo ogni passaggio di questo argomento, verrà chiesto di togliere i commenti 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à ruota

Questi oggetti forniscono la maggior parte dell'esperienza con il dispositivo a rotella per le app di Windows.

Componente Descrizione
classe RadialController e correlati Rappresenta un dispositivo di input o un accessorio come la rotella, ad esempio il Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Non copriamo questa funzionalità qui. Per ulteriori informazioni, vedere l'esempio di Windows desktop .
Abilita l'interoperabilità con un'app di Windows.

Passaggio 1: Eseguire l'esempio

Dopo aver scaricato l'app di esempio RadialController, verificare che funzioni correttamente.

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

Annotazioni

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

Viene visualizzata la finestra dell'app e, dopo aver visualizzato una schermata di avvio per alcuni secondi, vedrai questa schermata principale.

app vuota

Ok, ora abbiamo l'app di Base di Windows che verrà usata in tutto il resto di questa esercitazione. Nei passaggi seguenti aggiungeremo la funzionalità RadialController.

Passaggio 2: Funzionalità RadialController di base

Con l'app in esecuzione e in primo piano, premi e tieni premuto il 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. Esistono molti altri strumenti, come ad esempio gli strumenti di sistema di base quando il Desktop di Windows è attivo e nessuna app è in primo piano, strumenti di inchiostrazione aggiuntivi quando è presente un InkToolbar, e strumenti di mappatura quando utilizzi l'app Mappe.

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

A questo punto si inizierà con alcune personalizzazioni di base.

Passaggio 3: Aggiungere controlli per l'input della rotellina

Per prima cosa, aggiungiamo l'interfaccia utente per la nostra 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 della rotellina -->").

  3. Rimuovere il commento dalle righe seguenti.

    <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 a levetta. Gli altri pulsanti vengono utilizzati nei passaggi successivi per aggiungere e rimuovere voci del menu di RadialController che forniscono l'accesso al dispositivo di scorrimento e all'interruttore.

Interfaccia utente base dell'app di esempio

Passaggio 4: Personalizzare il menu RadialController di base

Ora aggiungiamo il codice necessario per abilitare l'accesso ai controlli di RadialController.

  1. Aprire il file MainPage_Basic.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 4: personalizzazione del menu RadialController di base").
  3. Rimuovere il commento dalle righe seguenti:
    • I riferimenti di tipo Windows.UI.Input e Windows.Storage.Streams vengono utilizzati 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 specifichiamo il gestore Click per il pulsante che abilita i nostri controlli e inizializza la nostra voce di menu RadialController personalizzata.

      InitializeSampleButton.Click += (sender, args) =>
      { InitializeSample(sender, args); };
      
    • Successivamente, inizializziamo 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, inizializziamo la voce di menu RadialController personalizzata. Viene usato CreateForCurrentView per ottenere un riferimento all'oggetto RadialController, impostiamo la sensibilità di rotazione a "1" usando la proprietà RotationResolutionInDegrees, quindi creiamo il RadialControllerMenuItem utilizzando CreateFromFontGlyph, aggiungiamo la voce di menu alla raccolta di voci di menu RadialController e infine, usiamo 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. Eseguire di nuovo l'app.
  5. Selezionare il pulsante Inizializza controller radiale.
  6. Con l'app in primo piano, tieni premuto il 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 il nostro strumento personalizzato.
Menu RadialController (personalizzato)
menu personalizzato di RadialController
  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, colleghiamo quei pulsanti.

Passaggio 5: Configurare il menu in fase di esecuzione

In questo passaggio viene collegato il aggiungi/rimuovi elemento e menu Reset RadialController pulsanti 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 (salvarlo per 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 il comando Dial per visualizzare nuovamente 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 e sono stati aggiunti solo lo strumento personalizzato. Si è inoltre notato che, quando il menu è impostato su una raccolta vuota, le voci predefinite per il contesto corrente vengono ripristinate. Abbiamo aggiunto il nostro strumento personalizzato prima di rimuovere gli strumenti predefiniti.

  5. Selezionare il pulsante Aggiungi elemento e quindi tenere premuta la manopola.

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

  6. Selezionare il pulsante Reset del menu RadialController e poi tenere premuta la Manopola.

    Si noti che il menu torna allo stato originale.

Passaggio 6: Personalizzare gli aptici del dispositivo

Surface Dial e altri dispositivi a rotelle 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 nostri controlli di cursore e interruttore, e utilizzandoli per specificare dinamicamente il comportamento del feedback aptico. Per questo esempio, l'interruttore attiva/disattiva deve essere impostato su attivato per abilitare il feedback, mentre il valore del cursore specifica quante volte viene ripetuto il feedback del clic.

Annotazioni

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

  1. Aprire il file App.xaml.cs.

  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("Passaggio 6: Personalizzare l'aptico del dispositivo").

  3. Impostare come commento le prime e le terze righe ("MainPage_Basic" e "MainPage") e rimuovere il commento dal secondo ("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 il dispositivo aptici -->").

  6. Rimuovere il commento dalle righe seguenti. Questo codice dell'interfaccia utente indica semplicemente quali funzionalità aptici 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 di MainPage_Haptics.xaml.cs

  8. Individuare il codice contrassegnato con il titolo di questo passaggio ("Passaggio 6: personalizzazione aptiche")

  9. Rimuovere il commento dalle righe seguenti:

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

      using Windows.Devices.Haptics;
      
    • Qui specifichiamo il gestore per l'evento ControlAcquired che viene attivato quando si seleziona la voce di menu personalizzata RadialController.

      radialController.ControlAcquired += (rc_sender, args) =>
      { RadialController_ControlAcquired(rc_sender, args); };
      
    • Successivamente, definiamo 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 di eventi RotationChanged e ButtonClicked, connettiamo i controlli del dispositivo di scorrimento e interruttore corrispondenti ai nostri 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 ottengono le waveform richieste (se supportato) 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;
      }
      

Avvia di nuovo l'app per provare il feedback aptico personalizzato, modificando il valore del cursore e attivando/disattivando il commutatore.

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 del menu di pressione e tenuta descritta, il Surface Dial può anche essere posizionato direttamente sullo schermo del Surface Studio. In questo modo viene abilitato un menu speciale "sullo schermo".

Rilevando sia la posizione del contatto che i confini del Surface Dial, il sistema gestisce l'occlusione causata dal dispositivo e visualizza una versione più grande del menu che avvolge l'esterno del Surface Dial. Queste stesse informazioni possono essere usate anche dalla tua 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 in 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 interazioni sullo schermo per Surface Studio e dispositivi simili")

  5. Impostare come commento le prime e le seconde righe ("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 tra di esse.
    RadialController su schermo

Riassunto

Congratulazioni, hai completato il Get Started Tutorial : Supporta il Surface Dial (e altri dispositivi a rotella) nella tua app Windows! Ti abbiamo mostrato il codice di base necessario per supportare un dispositivo a rotella nelle tue app di Windows e come offrire alcune esperienze utente più ricche supportate dalle API RadialController.

interazioni con il Surface Dial

Informazioni di riferimento sulle API

Esempi

Esempi di argomenti

Personalizzazione del RadialController

Altri campioni

esempio di libro da colorare

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

esempio di desktop di Windows