Condividi tramite

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

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

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

Ci concentriamo sui seguenti aspetti:

  • Specificare quali strumenti integrati 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à, vedere Surface Dial interazioni nelle app Windows.

Introduzione

Il 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, dial viene in genere usato con la mano non dominante per fornire l'accesso sia ai comandi di sistema che ad altri strumenti e funzionalità più contestuali.

Dial supporta tre movimenti di base:

  • 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 del Surface Dial per aprire il vano della batteria e assicurarsi che ci siano due batterie AAA all'interno.
  4. Se la scheda della batteria è presente sul lato inferiore del quadrante, rimuoverla.
  5. Premere e tenere premuto il piccolo pulsante inset accanto alle batterie fino a quando la luce Bluetooth lampeggia.
  6. Tornare al dispositivo Windows e selezionare Aggiungi Bluetooth o altro dispositivo.
  7. Nella finestra di dialogo Aggiungi un dispositivo selezionare Bluetooth>Surface Dial. Il 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 il Dial premendo e tenendo premuto 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 wheel possono essere configurati tramite le impostazioni wheel :

  1. Scegliere Impostazioni dal menu Start.
  2. Selezionare Dispositivi>Ruota.
    Schermata impostazioni rotella

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.

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

  1. Selezionare il pulsante verde Clona o scarica .
    Clonazione del repository
  2. Se si dispone di un account GitHub, è possibile clonare il repository nel computer locale scegliendo Apri in Visual Studio.
  3. Se non si dispone di un account GitHub o si vuole semplicemente una copia locale del progetto, scegliere Download ZIP (sarà necessario controllare regolarmente per scaricare gli aggiornamenti più recenti).

Importante

La maggior parte del codice nell'esempio è commentato. Man mano che seguirai ogni passaggio in questo argomento, ti verrà chiesto di rimuovere il commento da varie sezioni del codice. In Visual Studio, evidenziare solo le righe di codice e premere CTRL-K e quindi CTRL-U.

Componenti che supportano la funzionalità della ruota

Questi oggetti forniscono la maggior parte dell'esperienza del dispositivo a rotellina per le app Windows.

Componente Descrizione
RadialController classe e correlate Rappresenta un dispositivo o un accessorio di input a rotella, come il Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Questa funzionalità non viene illustrata qui. Per altre informazioni, vedere l'esempio desktop Windows.		 Abilita l'interoperabilità con un'app Windows.

Passaggio 1: Eseguire l'esempio

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

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

Annotazioni

In alternativa, è possibile selezionare Debug>Avvia debug voce di menu, oppure selezionare il pulsante Esegui Local Machine illustrato di seguito: Visual Studio pulsante Compila progetto

Si apre la finestra dell'app e, dopo una schermata iniziale visualizzata per alcuni secondi, viene visualizzata la schermata principale.

App vuota

Ora è disponibile l'app di base Windows che verrà usata in tutto il resto di questa esercitazione. Nei passaggi seguenti si aggiunge la funzionalità RadialController .

Passaggio 2: Funzionalità RadialController di base

Con l'app in esecuzione e in primo piano, tenere premuto 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. Ci sono molti altri, inclusi solo 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 si utilizza l’app Mappe.

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

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

Passaggio 3: Aggiungere controlli per l'input della rotellina

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

  1. Aprire il file MainPage_Basic.xaml.

  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 3: Aggiungere controlli per l'input 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 campione, il dispositivo di scorrimento e l'interruttore Attiva/Disattiva. Gli altri pulsanti vengono utilizzati nei passaggi successivi per aggiungere e rimuovere elementi del menu RadialController che consentono l'accesso al cursore e all'interruttore a levetta.

Interfaccia utente dell'app di esempio di base

Passaggio 4: Personalizzare il menu RadialController di base

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

  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:

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

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

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

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

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

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

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

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

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

    InitializeController(sender, e);
}

    • Qui, inizializziamo la voce di menu personalizzata di RadialController. Usiamo CreateForCurrentView per ottenere un riferimento all'oggetto RadialController , impostiamo la sensibilità di rotazione su "1" usando la proprietà RotationResolutionInDegrees , quindi creiamo il nostro RadialControllerMenuItem usando CreateFromFontGlyph, aggiungiamo la voce di menu all'insieme 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. Seleziona il pulsante Inizializza controller radiale.
  6. Con l'app in primo piano, tenere 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 lo strumento personalizzato.
Menu RadialController (personalizzato)
Menu RadialController personalizzato
  1. Selezionare lo strumento personalizzato e provare le interazioni ora supportate tramite il Surface Dial:
    • Un'azione di rotazione sposta il dispositivo di scorrimento.
    • Un clic imposta l'interruttore su attivato o disattivato.

Ok, colleghiamo questi pulsanti.

Passaggio 5: Configurare il menu in fase di esecuzione

In questo passaggio, si associano i pulsanti Aggiungi/Rimuovi elemento e del menu Reset RadialController per mostrare come è possibile 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 Dial per visualizzare di nuovo il menu.

    Si noti che il menu contiene ora la raccolta predefinita di strumenti. Tenere presente che, nel passaggio 3, durante la configurazione del menu personalizzato, sono stati rimossi tutti gli strumenti predefiniti 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. È stato aggiunto lo strumento personalizzato prima di rimuovere gli strumenti predefiniti.

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

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

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

    Si noti che il menu torna allo stato originale.

Passaggio 6: Personalizzare gli aptici del dispositivo

Il 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 controlli dispositivo di scorrimento e interruttore e attivandoli per specificare dinamicamente il comportamento di feedback aptico. Per questo esempio, l'interruttore attiva/disattiva deve essere impostato su per consentire l'abilitazione del feedback mentre il valore del dispositivo di scorrimento specifica la frequenza con cui viene ripetuto il feedback del clic.

Annotazioni

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

  1. Aprire il file App.xaml.cs.

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

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

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

  4. Aprire il file MainPage_Haptics.xaml.

  5. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 6: Personalizzare 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. Trovare il codice contrassegnato con il titolo di questo passaggio ("Passaggio 6: personalizzazione aptici")

  9. Rimuovere il commento dalle righe seguenti:

    • Il Windows.Devices.Haptics riferimento di tipo viene usato per la funzionalità nelle fasi successive.

      using Windows.Devices.Haptics;

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

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

    • Successivamente, 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 eventi RotationChanged e ButtonClicked colleghiamo i controlli slider e pulsante toggle 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 ottiene la forma d'onda richiesta (se supportata) per il feedback aptico.

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

Esegui nuovamente l'app per provare il feedback aptico personalizzato modificando il valore del dispositivo di scorrimento e attivando/disattivando lo stato dell'interruttore a levetta.

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

Abbinato al Surface Studio, il Surface Dial può 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 del Surface Dial, il sistema gestisce l'occlusione causata dal dispositivo e visualizza una versione più grande del menu che circonda l'esterno del 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 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 le interazioni sullo schermo per Surface Studio e dispositivi simili")

  5. Commentare la prima e la seconda riga ("MainPage_Basic" e "MainPage_Haptics") e de-commentare la terza riga ("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 il Surface Dial in ognuna delle due aree di controllo, alternandole tra di esse.
    RadialController su schermo

Sommario

Congratulazioni, hai completato l'esercitazione Inizia: Supportare il Surface Dial (e altri dispositivi con rotellina) nella tua app Windows! È stato illustrato il codice di base necessario per supportare un dispositivo wheel nelle app Windows e come offrire alcune delle esperienze utente più avanzate supportate dalle API RadialController.

interazioni Surface Dial

Informazioni di riferimento sulle API

Esempi

Esempi di argomenti

Personalizzazione del RadialController

Altri esempi

Esempio di Coloring Book

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

Esempio desktop Windows

  • Last updated on