Condividi tramite

Le interazioni con Surface Dial

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

Informazioni generali

I dispositivi con rotellina di Windows, ad esempio Surface Dial, sono una nuova categoria di dispositivi di input che consentono un'esperienza di interazione utente accattivante e univoca per le app di Windows e Windows.

Importante

In questo argomento si fa riferimento in modo specifico alle interazioni con Surface Dial, ma le informazioni sono applicabili a tutti i dispositivi Con rotellina di Windows.

Con un fattore di forma basato su un'azione di rotazione (o movimento), Surface Dial è destinato a un dispositivo di input secondario multi modale che integra l'input da 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).

Surface Dial supporta anche un'azione di pressione e di blocco e un'azione di 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 per tutti i dispositivi di input Windows, puoi personalizzare l'esperienza di interazione con Surface Dial in base alle funzionalità delle tue app.

Suggerimento

Usato insieme, 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, 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 contorni di Surface Dial, il sistema usa queste informazioni per gestire l'occlusione causata dal dispositivo e visualizzare 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.

Menu fuori schermo di Surface Dial

Screenshot del menu fuori schermo di Surface Dial.

Menu di Surface Dial sullo schermo

Screenshot del menu di Surface Dial sullo schermo.

Integrazione del sistema

Surface Dial è strettamente integrato con Windows e supporta un set di strumenti predefiniti nel menu: volume di sistema, scorrimento, zoom avanti/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 su Windows Desktop
  • Strumento di traccia precedente/successivo durante la riproduzione di elementi multimediali

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

Surface Dial con Surface Pen
Surface Dial con Surface Pen

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

Quando si apre il Menu Surface Dial in un'applicazione di disegno a mano libera che utilizza la barra degli strumenti input penna, il menu ora include strumenti per controllare il tipo di penna e lo spessore del tratto. 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 dotato di strumento di selezione penna per la barra degli strumenti di Windows Ink
Menu Surface Dial con lo strumento di selezione penna per la toolbar di Windows Ink

Menu del Surface Dial con lo strumento dimensione tratto per la barra degli strumenti di Windows Ink
Menu Surface Dial con lo strumento per la dimensione del tratto per la barra degli strumenti di Windows Ink

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

Personalizzazione utente

Gli utenti possono personalizzare alcuni aspetti della loro esperienza con il Dial tramite la pagina Impostazioni di Windows -> Dispositivi -> Ruota, inclusi gli strumenti predefiniti, le vibrazioni (o feedback aptico) e la mano di scrittura (o dominante).

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

Strumenti personalizzati

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

Linee guida per l'esperienza utente per gli strumenti personalizzati

Verificare che gli strumenti corrispondano al contesto corrente Quando si rende chiaro e intuitivo il funzionamento di uno strumento e il funzionamento dell'interazione di Surface Dial, è possibile aiutare gli utenti a imparare rapidamente e rimanere concentrati sul loro compito.

Ridurre al minimo il numero possibile di strumenti per le app
Il menu di 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 puoi impostare lo strumento in base a ciò che l'utente sta facendo senza richiedere loro di attivare il menu di Surface Dial e selezionare uno strumento.

Aggiornare dinamicamente la raccolta di strumenti
Poiché le voci di menu di Surface Dial 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 ascoltare musica durante l'uso dell'app, quindi gli strumenti di volume e di traccia successivi dovrebbero essere sempre accessibili dal menu di 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

Screenshot di un'icona con sfondo alfa.

Icona con sfondo alfa

Screenshot di un'icona visualizzata nel menu a rotelle con il tema predefinito.

Icona visualizzata nel menu a rotelle con tema predefinito

Screenshot di un'icona visualizzata nel menu a rotelle con tema bianco a contrasto elevato.

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

Guida per lo sviluppatore

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

Come accennato in precedenza, il menu predefinito di Surface Dial è prepopolato con un set di strumenti predefiniti che coprono un'ampia 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 di 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.

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

  2. Quindi, nel code-behind, aggiungiamo uno strumento personalizzato al menu Surface Dial e dichiariamo i gestori degli input del RadialController.

    Viene visualizzato un riferimento all'oggetto RadialController per Surface Dial (myController) chiamando CreateForCurrentView.

    Si crea quindi un'istanza di 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 eseguiamo l'app, usiamo 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.
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 di 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 di 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, Surface Dial supporta tre movimenti (tenere premuto, ruotare, fare 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.

Pressione

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

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 Surface Dial viene posizionato sullo schermo di Surface Studio, il menu viene centrato nella posizione sullo schermo di Surface Dial.

Rotazione

Surface Dial è progettato principalmente per supportare la rotazione per le interazioni che comportano regolazioni uniformi e incrementali dei valori analogici o dei 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 Impostazioni di Windows -> Dispositivi -> Rotellina .

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

Surface Dial non è in grado di rilevare la mano utilizzata, ma l'utente può impostare la 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

Giù

In

Direzione concettuale Mappatura di Surface Dial Rotazione in senso orario Rotazione antiorario
Orizzontale Mappatura sinistra e destra basata sulla parte superiore del Surface Dial Giusto Sinistra
Verticale Mappatura verso l'alto e verso il basso basata sul lato sinistro di Surface Dial Giù 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

Guida per lo sviluppatore

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 un minimo di 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 su 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 su 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 modali non devono essere abilitati o disabilitati facendo clic su 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, ad esempio il righello nella barra degli strumenti di Windows Ink, devono essere attivati o disattivati tramite altre funzionalità dell'interfaccia utente (la barra degli strumenti Ink fornisce un controllo predefinito ToggleButton).

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

Guida per lo sviluppatore

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

Su schermo

Come descritto in precedenza, Surface Dial può essere usato insieme a 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 Surface Dial e Surface Studio includono:

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

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

Le app devono rispondere quando surface Dial viene rilevato sullo schermo

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

Regolare l'interfaccia utente correlata a 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.

Regolare l'interfaccia utente correlata a 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 a Surface Dial deve essere modificata per la mano opposta specificata dall'utente (Windows Settings > Devices > Pen & Windows Ink > Choose which hand you write with setting).

Le interazioni devono rispondere alla posizione di 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 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à.

Guida per lo sviluppatore

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

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

Le informazioni di contatto (RadialControllerScreenContact) includono la coordinata X/Y del centro di 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 di Surface Dial per determinare quale set di dispositivi di scorrimento e interruttori sono controllati da Surface Dial.

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

  2. Ecco il codice associato con i gestori definiti per la posizione sullo schermo di 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 eseguiamo l'app, usiamo Surface Dial per interagire con esso. Prima di tutto, posizionare il dispositivo nella schermata di Surface Studio, che l'app rileva e associa alla sezione in basso a destra (vedi immagine). Premere e tenere premuto Surface Dial per aprire il menu e selezionare lo strumento personalizzato. Una volta attivato lo strumento personalizzato, il controllo cursore può essere regolato ruotando il Surface Dial e l'interruttore si attiva cliccando su di esso.

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

Riassunto

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

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

Esercitazione: Supportare il Surface Dial (e altri dispositivi a rotella) nella tua app Windows

Informazioni di riferimento sulle API

Samples

Esempi di argomenti

Personalizzazione del RadialController

Altri esempi

Esempio di libro a colori

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

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

Esempio di desktop di Windows

  • Last updated on