interazioni Surface Dial

Immagine di Surface Dial con Surface Studio
Surface Dial con Surface Studio e Surface Pen.

Informazioni generali

I dispositivi wheel di Windows, come il Surface Dial, sono una nuova categoria di dispositivi di input che consentono esperienze di interazione utente accattivanti e uniche per Windows e le app di Windows.

Importante

In questo argomento ci riferiamo specificamente alle interazioni con Surface Dial, ma le informazioni sono applicabili a tutti i dispositivi a rotella di Windows.

Con un fattore di forma basato su un'azione rotate (o movimento), il Surface Dial è concepito come un dispositivo di input secondario multimodale che completa l'input di un dispositivo primario. Nella maggior parte dei casi, il dispositivo viene manipolato dalla mano non dominante di un utente mentre con la mano dominante svolge un'attività, come scrivere con una penna. Non è progettato per l'input del puntatore di precisione (ad esempio tocco, penna o mouse).

Il Surface Dial supporta anche un'azione premere e tenere premuto e un'azione clic. La pressione e il blocco hanno una singola funzione: visualizza un menu di comandi. Se il menu è attivo, la rotazione e l'input di clic vengono elaborati dal menu. In caso contrario, l'input viene passato all'app per l'elaborazione.

Come con tutti i dispositivi di input Windows, è possibile personalizzare l'esperienza di interazione con il Surface Dial per adattarlo alle funzionalità delle tue app.

Suggerimento

Usato insieme, il Surface Dial e il nuovo Surface Studio possono offrire un'esperienza utente ancora più distintiva.

Oltre all'esperienza predefinita del menu di pressione e blocco descritta, il Surface Dial può 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 limiti della Surface Dial, il sistema usa queste informazioni per gestire l'occlusione del dispositivo e visualizzare una versione più grande del menu che circonda l'esterno della 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.

Menu fuori schermo di Surface Dial

Menu a schermo di Surface Dial

Integrazione del sistema

Il Surface Dial è strettamente integrato con Windows e supporta un set di strumenti predefiniti nel menu: volume di sistema, scorrimento, zoom avanti/zoom indietro e annulla/ripeti.

Questa raccolta di strumenti predefiniti si adatta al contesto di sistema corrente per includere:

Uno strumento di luminosità del sistema quando l'utente si trova sul Windows Desktop
Strumento di traccia precedente/successivo durante la riproduzione di elementi multimediali

Oltre a questo supporto generale della piattaforma, il Surface Dial è strettamente integrato con i controlli della piattaforma Windows Ink (InkCanvas e InkToolbar).

Surface Dial con Surface Pen

Se usato con il Surface Dial, questi controlli consentono funzionalità aggiuntive per la modifica degli attributi dell'inchiostro e per il controllo dello stencil del righello della barra degli strumenti dell'inchiostro.

Quando si apre il menu Surface Dial in un'applicazione di inchiostrazione che utilizza la barra degli strumenti dell'inchiostro, il menu include ora strumenti per controllare il tipo di penna e lo spessore del pennello. Quando il righello è abilitato, viene aggiunto uno strumento corrispondente al menu che consente al dispositivo di controllare la posizione e l'angolo del righello.

menu Surface Dial con lo strumento di selezione penna per la barra degli strumenti Windows Ink

menu
menu Surface Dial con lo strumento dimensione tratto per la barra degli strumenti Windows Ink

menu
menu Surface Dial con lo strumento righello per la barra degli strumenti di Windows Ink

Personalizzazione utente

Gli utenti possono personalizzare alcuni aspetti dell'esperienza di chiamata tramite la pagina Windows Settings -> Devices -> Wheel, inclusi strumenti predefiniti, vibrazioni (o feedback aptico) e scrittura (o mano dominante).

Quando si personalizza l'esperienza utente Surface Dial, è sempre necessario assicurarsi che una determinata funzione o comportamento sia disponibile e abilitata dall'utente.

Strumenti personalizzati

In questa sezione vengono illustrate sia l'esperienza utente che le linee guida per gli sviluppatori per personalizzare gli strumenti esposti nel menu Surface Dial.

Linee guida per l'esperienza utente per gli strumenti personalizzati

Assicurati che gli strumenti corrispondano al contesto corrente Quando si rende chiaro e intuitivo cosa fa uno strumento e come funziona l'interazione con il Surface Dial, aiuta gli utenti a imparare rapidamente e a rimanere concentrati sul loro compito.

Ridurre al minimo il numero possibile di strumenti per le app
Il menu Surface Dial ha spazio per sette elementi. Se sono presenti otto o più elementi, l'utente deve girare il Dial per vedere quali strumenti sono disponibili in un menu a comparsa di overflow, rendendo il menu difficile da navigare e gli strumenti difficili da individuare e selezionare.

È consigliabile fornire un singolo strumento personalizzato per l'app o il contesto dell'app. In questo modo è possibile impostare lo strumento in base a ciò che l'utente sta facendo senza richiedere l'attivazione del menu Surface Dial e selezionare uno strumento.

Aggiornare dinamicamente la raccolta di strumenti
Poiché Surface Dial voci di menu non supportano uno stato disabilitato, è consigliabile aggiungere e rimuovere in modo dinamico gli strumenti (inclusi gli strumenti predefiniti) in base al contesto utente (visualizzazione corrente o finestra attiva). Se uno strumento non è rilevante per l'attività corrente o è ridondante, rimuoverlo.

Importante

Quando aggiungi un elemento al menu, assicurati che l'elemento non esista già.

Non rimuovere lo strumento di impostazione del volume di sistema predefinito
Il controllo volume è in genere sempre richiesto dall'utente. Potrebbero essere in ascolto della musica durante l'uso dell'app, quindi i controlli del volume e della traccia successiva dovrebbero essere sempre accessibili dal menu Surface Dial. Lo strumento per la selezione della traccia successiva viene aggiunto automaticamente al menu quando il media è in riproduzione.

Essere coerenti con l'organizzazione dei menu
In questo modo gli utenti possono scoprire e apprendere quali strumenti sono disponibili quando si usa l'app e migliorano l'efficienza durante il cambio di strumenti.

Fornire icone di alta qualità coerenti con le icone predefinite
Le icone possono trasmettere professionalità ed eccellenza e ispirare fiducia negli utenti.

Fornire un'immagine PNG di alta qualità 64 x 64 pixel (44 x 44 è la più piccola supportata)
Verificare che lo sfondo sia trasparente
L'icona deve riempire la maggior parte dell'immagine
Un'icona bianca deve avere un contorno nero per essere visibile in modalità a contrasto elevato

Icona con sfondo alfa

Icona visualizzata nel menu a rotelle con tema predefinito

Icona visualizzata nel menu a rotelle con tema bianco a contrasto elevato

Usare nomi concisi e descrittivi
Il nome dello strumento viene visualizzato nel menu degli strumenti insieme all'icona dello strumento e viene usato anche dalle utilità per la lettura dello schermo.

I nomi devono essere brevi per adattarsi all'interno del cerchio centrale della ruota del menu
I nomi devono identificare chiaramente l'azione primaria (un'azione complementare può essere implicita):
- Lo scorrimento indica l'effetto di entrambe le direzioni di rotazione
- Annulla specifica un'azione primaria, ma il rollforward (l'azione complementare) può essere dedotto e facilmente individuato dall'utente

Materiale sussidiario per sviluppatori

È possibile personalizzare l'esperienza di Surface Dial per integrare le funzionalità nelle app tramite un set completo di API Windows Runtime.

Come accennato in precedenza, il menu di Surface Dial predefinito è prepopolato con un set di strumenti predefiniti che coprono una vasta gamma di funzionalità di sistema di base (volume di sistema, luminosità del sistema, scorrimento, zoom, annullamento e controllo multimediale quando il sistema rileva la riproduzione audio o video in corso). Tuttavia, questi strumenti predefiniti potrebbero non fornire la funzionalità richiesta dall'app.

Nelle sezioni seguenti viene descritto come aggiungere uno strumento personalizzato al menu Surface Dial e specificare gli strumenti predefiniti esposti.

Scaricare una versione più robusta di questo esempio da RadialController customization.

Aggiungere uno strumento personalizzato

In questo esempio viene aggiunto uno strumento personalizzato di base che passa i dati di input sia dalla rotazione che dagli eventi click ad alcuni controlli dell'interfaccia utente XAML.

In primo luogo, dichiariamo l'interfaccia utente (solo un dispositivo di scorrimento e un pulsante di attivazione/ disattivazione) in XAML.

Screenshot dell'esempio di controller radiale con il dispositivo di scorrimento orizzontale impostato a sinistra.
Interfaccia utente dell'app di esempio

<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>

Quindi, nel code-behind, aggiungiamo uno strumento personalizzato al menu Surface Dial e dichiariamo il gestore di input RadialController.

Otteniamo un riferimento all'oggetto RadialController per il Surface Dial (myController) chiamando CreateForCurrentView.

Si crea quindi un'istanza di un RadialControllerMenuItem (myItem) chiamando RadialControllerMenuItem.CreateFromIcon.

Quindi, si aggiunge quell'elemento alla raccolta di voci di menu.

Dichiariamo i gestori eventi di input (ButtonClicked e RotationChanged) per l'oggetto RadialController.

Infine, definiamo i gestori eventi.

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;
    }
}

Quando si esegue l'app, si usa il Surface Dial per interagire con esso. Per prima cosa, tenere premuto per aprire il menu e selezionare il nostro strumento personalizzato. Una volta attivato lo strumento personalizzato, il dispositivo di scorrimento può essere regolato ruotando la manopola e l'interruttore può essere attivato facendo clic sulla manopola.

Screenshot dell'esempio di controller radiale con il dispositivo di scorrimento orizzontale impostato al centro.
L'interfaccia utente dell'app di esempio attivata con lo strumento personalizzato Surface Dial

Specificare gli strumenti predefiniti

È possibile usare la classe RadialControllerConfiguration per personalizzare la raccolta di voci di menu predefinite per l'app.

Ad esempio, se l'app non dispone di aree di scorrimento o zoom e non richiede funzionalità di annullamento/rollforward, questi strumenti possono essere rimossi dal menu. Verrà aperto lo spazio nel menu per aggiungere strumenti personalizzati per l'app.

Importante

Il menu Surface Dial deve avere almeno una voce di menu. Se tutti gli strumenti predefiniti vengono rimossi prima di aggiungere uno degli strumenti personalizzati, vengono ripristinati gli strumenti predefiniti e lo strumento viene aggiunto alla raccolta predefinita.

In base alle linee guida di progettazione, non è consigliabile rimuovere gli strumenti di controllo multimediale (volume e traccia precedente/successiva) perché gli utenti hanno spesso musica di sottofondo mentre eseguono altre attività.

Qui viene illustrato come configurare il menu Surface Dial in modo da includere solo i controlli multimediali per il volume e la traccia successiva/precedente.

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

Interazioni personalizzate

Come accennato, il Surface Dial supporta tre movimenti (pressione e blocco, rotazione, clic) con le interazioni predefinite corrispondenti.

Assicurarsi che le interazioni personalizzate basate su questi movimenti abbiano senso per l'azione o lo strumento selezionato.

Annotazioni

L'esperienza di interazione dipende dallo stato del menu Surface Dial. Se il menu è attivo, elabora l'input; in caso contrario, l'app lo fa.

Premi e tieni premuto

Questo gesto si attiva e mostra il menu Surface Dial, non esiste alcuna funzionalità dell'app associata a questo gesto.

Per impostazione predefinita, il menu viene visualizzato al centro della schermata dell'utente. Tuttavia, l'utente può afferrarlo e spostarlo in qualsiasi punto scelto.

Annotazioni

Quando il Surface Dial viene posizionato sullo schermo del Surface Studio, il menu viene centrato nella posizione sullo schermo del Surface Dial.

Rotazione

Il Surface Dial è progettato principalmente per supportare la rotazione per le interazioni che comportano regolazioni uniformi e incrementali a valori analogici o controlli.

Il dispositivo può essere ruotato sia in senso orario che in senso antiorario e può anche fornire feedback aptico per indicare distanze discrete.

Annotazioni

Il feedback aptico può essere disabilitato dall'utente nella pagina Windows Settings -> Devices -> Wheel.

Linee guida per l'esperienza utente per interazioni personalizzate

Gli strumenti con sensibilità rotazionale continua o elevata devono disabilitare il feedback aptico

Il feedback aptico corrisponde alla sensibilità rotazionale dello strumento attivo. È consigliabile disabilitare il feedback aptico per gli strumenti con sensibilità rotazionale continua o elevata perché l'esperienza utente può risultare scomoda.

La mano dominante non deve influire sulle interazioni basate sulla rotazione

Il Surface Dial non è in grado di rilevare quale mano viene utilizzata, ma l'utente può impostare la mano di scrittura (o la mano dominante) in Impostazioni di Windows -> Dispositivo -> Penna e Windows Ink.

La localizzazione deve essere considerata per tutte le interazioni di rotazione

Ottimizzare la soddisfazione dei clienti accomodando e adattando le interazioni ai layout locali e da destra a sinistra.

Gli strumenti e i comandi predefiniti nel menu Dial seguono queste linee guida per le interazioni basate sulla rotazione:

Sinistra

Attivo

Out

Immagine del Surface Dial

Giusto

Non operativo

Direzione concettuale	Mapping del Surface Dial	Rotazione in senso orario	Rotazione antiorario
Orizzontale	Mappatura sinistra e destra basata sulla parte superiore del Surface Dial	Giusto	Sinistra
Verticale	Mappatura su e giù basata sul lato sinistro del Surface Dial	Non operativo	Attivo
Asse Z	In (o più vicino) mappato verso l'alto o verso destra Out (o più) mappato verso il basso/a sinistra	In	Out

Materiale sussidiario per sviluppatori

Quando l'utente ruota il dispositivo, gli eventi RadialController.RotationChanged vengono generati in base a un delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) rispetto alla direzione di rotazione. La sensibilità (o la risoluzione) dei dati può essere impostata con la proprietà RadialController.RotationResolutionInDegrees .

Annotazioni

Per impostazione predefinita, un evento di input rotazionale viene recapitato a un oggetto RadialController solo quando il dispositivo viene ruotato di almeno 10 gradi. Ogni evento di input fa sì che il dispositivo vibra.

In generale, è consigliabile disabilitare il feedback aptico quando la risoluzione della rotazione è impostata su meno di 5 gradi. Ciò offre un'esperienza più fluida per le interazioni continue.

È possibile abilitare e disabilitare il feedback aptico per gli strumenti personalizzati impostando la proprietà RadialController.UseAutomaticHapticFeedback .

Annotazioni

Non è possibile eseguire l'override del comportamento aptico per gli strumenti di sistema, ad esempio il controllo volume. Per questi strumenti, il feedback aptico può essere disabilitato solo dall'utente dalla pagina delle impostazioni della rotellina.

Ecco un esempio di come personalizzare la risoluzione dei dati di rotazione e abilitare o disabilitare il feedback aptico.

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

Facendo clic sul Surface Dial è simile al clic sul pulsante sinistro del mouse (lo stato di rotazione del dispositivo non ha alcun effetto su questa azione).

Linee guida per l'esperienza utente

Non eseguire il mapping di un'azione o di un comando a questo movimento se l'utente non riesce facilmente a ripristinare lo stato precedente al risultato

Qualsiasi azione eseguita dall'app in base all'utente che fa clic sul Surface Dial deve essere reversibile. Consentire sempre all'utente di attraversare facilmente lo stack di navigazione inversa dell'app e ripristinare lo stato precedente dell'applicazione.

Le operazioni binarie, ad esempio disattivazione/disattivazione o visualizzazione/nascondi, offrono esperienze utente valide con il movimento di clic.

Gli strumenti modal non devono essere abilitati o disabilitati facendo clic sul Surface Dial.

Alcune modalità delle app o degli strumenti possono entrare in conflitto con o disabilitare le interazioni che si basano sulla rotazione. Gli strumenti come il righello nella barra degli strumenti Windows Ink devono essere attivati o disattivati tramite altri elementi dell'interfaccia utente (la barra degli strumenti Windows Ink fornisce un controllo integrato ToggleButton).

Per gli strumenti modali, mappare la voce di menu attiva del Surface Dial allo strumento di destinazione o alla voce di menu precedentemente selezionata.

Materiale sussidiario per sviluppatori

Quando si fa clic sul Surface Dial, viene generato un evento RadialController.ButtonClicked. I RadialControllerButtonClickedEventArgs includono una proprietà Contact che contiene la posizione e l'area di delimitazione del contatto di Surface Dial sullo schermo di Surface Studio. Se il Surface Dial non è in contatto con la schermata, questa proprietà è null.

Su schermo

Come descritto in precedenza, il Surface Dial può essere usato insieme al Surface Studio per visualizzare il menu Surface Dial in una modalità speciale sullo schermo.

Quando si usa questa modalità, è possibile integrare e personalizzare ulteriormente le esperienze di interazione con dial con le app. Esempi di esperienze uniche possibili solo con il Surface Dial e Surface Studio includono:

Visualizzazione di strumenti contestuali (ad esempio una tavolozza dei colori) in base alla posizione del Surface Dial, che li rende più facili da trovare e usare
L'impostazione dello strumento attivo in base all'interfaccia utente su cui è posizionato il Surface Dial
Ingrandimento di un'area dello schermo in base alla posizione del Surface Dial
Interazioni di gioco univoche in base alla posizione dello schermo

Linee guida per l'esperienza utente per le interazioni su schermo

Apps deve rispondere quando il Surface Dial viene rilevato sullo schermo

Il feedback visivo consente di indicare agli utenti che l'app ha rilevato il dispositivo sullo schermo del Surface Studio.

Regola l'interfaccia utente relativa al Surface Dial in base alla posizione del dispositivo

Il dispositivo (e il corpo dell'utente) può occludere elementi critici dell'interfaccia utente, a seconda di dove l'utente lo posiziona.

Adatta l'interfaccia utente relativa al Surface Dial in base all'interazione dell'utente

Oltre all'occlusione hardware, la mano e il braccio di un utente possono occudere parte dello schermo quando si usa il dispositivo.

L'area occlusa dipende da quale mano viene usata con il dispositivo. Poiché il dispositivo è progettato per essere usato principalmente con la mano non dominante, l'interfaccia utente correlata al Surface Dial deve adattarsi per la mano opposta specificata dall'utente (Impostazioni di Windows > Dispositivi > Penna e Windows Ink > Scegli quale mano utilizzare per scrivere).

Interactions deve rispondere alla posizione Surface Dial anziché al movimento

Il piede del dispositivo è progettato per aderire allo schermo anziché farlo scorrere, in quanto non è un dispositivo di puntamento di precisione. Pertanto, ci aspettiamo che sia più comune per gli utenti sollevare e posizionare il Surface Dial anziché trascinarlo sullo schermo.

Usare la posizione dello schermo per determinare la finalità dell'utente

L'impostazione dello strumento attivo in base al contesto dell'interfaccia utente, ad esempio la prossimità a un controllo, un canvas o una finestra, può migliorare l'esperienza utente riducendo i passaggi necessari per eseguire un'attività.

Materiale sussidiario per sviluppatori

Quando il Surface Dial viene posizionato sulla superficie del digitalizzatore del Surface Studio, viene generato un evento RadialController.ScreenContactStarted e le informazioni di contatto (RadialControllerScreenContactStartedEventArgs.Contact) sono fornite alla tua app.

Analogamente, se si fa clic sul Surface Dial in contatto con la superficie del digitalizzatore del Surface Studio, Viene generato un evento RadialController.ButtonClicked e le informazioni di contatto (RadialControllerButtonClickedEventArgs.Contact) vengono fornite all'app.

Le informazioni di contatto (RadialControllerScreenContact) includono la coordinata X/Y del centro del Surface Dial nello spazio delle coordinate dell'app (RadialControllerScreenContact.Position), nonché il rettangolo di delimitazione (RadialControllerScreenContact.Bounds) in Device Independent Pixel (DIP). Queste informazioni sono molto utili per fornire contesto allo strumento attivo e fornire feedback visivo correlato al dispositivo all'utente.

Nell'esempio seguente è stata creata un'app di base con quattro sezioni diverse, ognuna delle quali include un dispositivo di scorrimento e un interruttore. Usiamo quindi la posizione sullo schermo del Surface Dial per determinare quale set di dispositivi di scorrimento e interruttori sono controllati dal Surface Dial.

In primo luogo, dichiariamo l'interfaccia utente (quattro sezioni, ognuna con un dispositivo di scorrimento e un pulsante di attivazione/disattivazione) in XAML.

Screenshot dell'esempio di controller radiale con quattro dispositivi di scorrimento orizzontali impostati a sinistra.
Interfaccia utente dell'app di esempio

<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>

Ecco il code-behind con i gestori definiti per la posizione dello schermo del 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;
    }
  }
}

Quando si esegue l'app, si usa il Surface Dial per interagire con esso. Prima di tutto, posizionare il dispositivo nella schermata Surface Studio, che l'app rileva e associa alla sezione inferiore destra (vedere l'immagine). Si preme quindi e si tiene premuto il Surface Dial per aprire il menu e selezionare lo strumento personalizzato. Una volta che lo strumento personalizzato è stato attivato, il cursore può essere regolato ruotando il Surface Dial e l'interruttore può essere attivato cliccando sul Surface Dial.

Screenshot dell'esempio di controller radiale con quattro dispositivi di scorrimento orizzontali impostati a sinistra e il quarto controller evidenziato.
L'interfaccia utente dell'app di esempio attivata con lo strumento personalizzato Surface Dial

Sommario

Questo argomento offre una panoramica del dispositivo di input Surface Dial con l'esperienza utente e le indicazioni per gli sviluppatori su come personalizzare l'esperienza utente per scenari fuori schermo e scenari su schermo quando vengono usati con Surface Studio.

Inviare domande, suggerimenti e commenti a radialcontroller@microsoft.com.

Tutorial: supportare il Surface Dial (e altri dispositivi ruota) nell'app Windows

Informazioni di riferimento sulle API

Esempi

Esempi di argomenti

Personalizzazione del RadialController

Altri esempi

Esempio di Coloring Book

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

esempi di Piattaforma Universale Windows (C# e C++)

Esempio desktop Windows

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2026-03-11

Condividi tramite

interazioni Surface Dial

Informazioni generali

Integrazione del sistema

Personalizzazione utente

Strumenti personalizzati

Linee guida per l'esperienza utente per gli strumenti personalizzati

Materiale sussidiario per sviluppatori

Interazioni personalizzate

Premi e tieni premuto

Rotazione

Linee guida per l'esperienza utente per interazioni personalizzate

Materiale sussidiario per sviluppatori

Click

Linee guida per l'esperienza utente

Materiale sussidiario per sviluppatori

Su schermo

Linee guida per l'esperienza utente per le interazioni su schermo

Materiale sussidiario per sviluppatori

Sommario

Articoli correlati

Informazioni di riferimento sulle API

Esempi

Esempi di argomenti

Altri esempi

Commenti e suggerimenti

Risorse aggiuntive