Delen via

Zelfstudie: Surface Dial (en andere wielapparaten) ondersteunen in uw Windows-app

Afbeelding van Surface Dial met Surface Studio
Surface Dial met Surface Studio en Surface-pen (verkrijgbaar in de Microsoft Store).

In deze zelfstudie leert u hoe u de gebruikersinteractie-ervaringen kunt aanpassen die worden ondersteund door wielapparaten, zoals de Surface Dial. We gebruiken codefragmenten uit een voorbeeld-app, die u kunt downloaden van GitHub (zie voorbeeldcode), om de verschillende functies en bijbehorende RadialController-API's te demonstreren die in elke stap worden besproken.

We richten ons op het volgende:

  • Opgeven welke ingebouwde hulpprogramma's worden weergegeven in het menu RadialController
  • Een aangepast hulpmiddel toevoegen aan het menu
  • Haptische feedback beheren
  • Aanpassen van klikinteracties
  • Rotatieinteracties aanpassen

Zie Surface Dial-interacties in Windows-apps voor meer informatie over het implementeren van deze en andere functies.

Introductie

De Surface Dial is een secundair invoerapparaat waarmee gebruikers productiever kunnen zijn wanneer ze samen met een primair invoerapparaat, zoals pen, aanraken of muis, worden gebruikt. Als secundair invoerapparaat wordt de dial doorgaans gebruikt met de niet-dominante hand om toegang te bieden tot systeemopdrachten en andere, contextuelere, hulpprogramma's en functionaliteit.

The Dial ondersteunt drie basisbewegingen:

  • Houd de muisknop ingedrukt om het ingebouwde menu met opdrachten weer te geven.
  • Draaien om een menu-item te markeren (als het menu actief is) of om de huidige actie in de app te wijzigen (als het menu niet actief is).
  • Klik om het gemarkeerde menu-item te selecteren (als het menu actief is) of om een opdracht in de app aan te roepen (als het menu niet actief is).

Vereiste voorwaarden

Uw apparaten instellen

  1. Zorg ervoor dat uw Windows-apparaat is ingeschakeld.
  2. Ga naar Start, selecteer Instellingen>Apparaten>Bluetooth en andere apparaten en schakel Vervolgens Bluetooth in.
  3. Verwijder de onderkant van de Surface Dial om het batterijcompartiment te openen en zorg ervoor dat er twee AAA-batterijen binnen zijn.
  4. Als het batterijtabblad aan de onderkant van de wijzerplaat aanwezig is, verwijdert u het.
  5. Houd de kleine, insetknop naast de batterijen ingedrukt totdat het Bluetooth-licht knippert.
  6. Ga terug naar uw Windows-apparaat en selecteer Bluetooth of ander apparaat toevoegen.
  7. Selecteer Bluetooth> in het dialoogvenster Een apparaat toevoegen. Uw Surface Dial moet nu verbinding maken en worden toegevoegd aan de lijst met apparaten onder Muis, toetsenbord en pen op de pagina instellingen voor Bluetooth en andere apparaten .
  8. Test de wijzerplaat door een paar seconden ingedrukt te houden om het ingebouwde menu weer te geven.
  9. Als het menu niet op het scherm wordt weergegeven (de kiezer moet ook trillen), gaat u terug naar de Bluetooth-instellingen, verwijdert u het apparaat en probeert u het apparaat opnieuw te verbinden.

Opmerking

Wielapparaten kunnen worden geconfigureerd via de wielinstellingen :

  1. Selecteer Instellingen in het menu Start.
  2. Selecteer Het apparaatwiel>.
    Scherm Met wielinstellingen

Nu bent u klaar om deze zelfstudie te starten.

Voorbeeldcode

In deze zelfstudie gebruiken we een voorbeeld-app om de concepten en functionaliteit te demonstreren die worden besproken.

Download dit Visual Studio-voorbeeld en de broncode van GitHub bij het voorbeeld windows-appsample-get-started-radialcontroller:

  1. Klik op de groene knop Klonen of downloaden.
    De opslagplaats klonen
  2. Als u een GitHub-account hebt, kunt u de opslagplaats klonen naar uw lokale computer door Openen te kiezen in Visual Studio.
  3. Als u geen GitHub-account hebt of als u alleen een lokale kopie van het project wilt, kiest u ZIP downloaden (u moet regelmatig terugkeren om de meest recente updates te downloaden).

Belangrijk

De meeste code in het voorbeeld wordt uitgecommentarieerd. Terwijl we elke stap in dit onderwerp doorlopen, wordt u gevraagd om opmerkingen bij verschillende secties van de code ongedaan te maken. Markeer in Visual Studio alleen de regels code en druk op CTRL-K en vervolgens op Ctrl-U.

Onderdelen die wielfunctionaliteit ondersteunen

Deze objecten bieden het grootste deel van de apparaatervaring voor Windows-apps.

Onderdeel Description
RadialController-klasse en gerelateerde Vertegenwoordigt een wielinvoerapparaat of accessoire zoals de Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
We behandelen deze functionaliteit hier niet voor meer informatie, zie het Voorbeeld van het Windows-bureaublad.		 Maakt interoperabiliteit mogelijk met een Windows-app.

Stap 1: Het voorbeeld uitvoeren

Nadat u de voorbeeld-app RadialController hebt gedownload, controleert u of deze wordt uitgevoerd:

  1. Open het voorbeeldproject in Visual Studio.
  2. Stel de vervolgkeuzelijst Oplossingsplatforms in op een niet-Arm-selectie.
  3. Druk op F5 om te compileren, implementeren en uitvoeren.

Opmerking

U kunt ook het menu-item Foutopsporing>Starten met foutopsporing selecteren, of de knop Lokale machine uitvoeren selecteren die hier wordt weergegeven: Visual Studio Project bouwen knop

Het app-venster wordt geopend en nadat een welkomstscherm een paar seconden wordt weergegeven, ziet u dit eerste scherm.

Lege app

Oké, we hebben nu de basis-Windows-app die we in de rest van deze zelfstudie gaan gebruiken. In de volgende stappen voegen we onze RadialController-functionaliteit toe.

Stap 2: Basic RadialController-functionaliteit

Wanneer de app wordt uitgevoerd en op de voorgrond staat, houdt u de Surface Dial ingedrukt om het menu RadialController weer te geven.

We hebben nog geen aanpassingen gedaan voor onze app, dus het menu bevat een standaardset contextuele hulpprogramma's.

Deze afbeeldingen tonen twee variaties van het standaardmenu. (Er zijn veel andere, waaronder gewoon eenvoudige systeemhulpprogramma's wanneer het Windows-bureaublad actief is en er geen apps op de voorgrond staan, extra inkthulpprogramma's wanneer er een InkToolbar aanwezig is en toewijzingshulpprogramma's wanneer u de App Kaarten gebruikt.

Menu RadialController (standaard) RadialController-menu (met standaard media afspeelopties)
Standaardmenu RadialController Menu Standaard RadialController met muziek

Nu beginnen we met een aantal basisaanpassingen.

Stap 3: Besturingselementen voor wielinvoer toevoegen

Eerst gaan we de gebruikersinterface voor onze app toevoegen:

  1. Open het bestand MainPage_Basic.xaml.

  2. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- stap 3: Besturingselementen voor wielinvoer toevoegen --'>).

  3. Verwijder opmerkingen bij de volgende regels.

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

Op dit moment zijn alleen de Initialize sample knop, schuifregelaar en wisselschakelaar ingeschakeld. De andere knoppen worden in latere stappen gebruikt om menu-items van RadialController toe te voegen en te verwijderen die toegang bieden tot de schuifregelaar en wisselknop.

Eenvoudige voorbeeld-app-gebruikersinterface

Stap 4: Het menu van de basis RadialController aanpassen

Nu gaan we de code toevoegen die vereist is om RadialController-toegang tot onze besturingselementen in te schakelen.

  1. Open het bestand MainPage_Basic.xaml.cs.
  2. Zoek de code die is gemarkeerd met de titel van deze stap ('// Stap 4: menu Aanpassing van het menu Basic RadialController').
  3. Verwijder opmerkingen bij de volgende regels:

    • De verwijzingen van het type Windows.UI.Input en Windows.Storage.Streams worden gebruikt voor functionaliteit in de volgende stappen:

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

    • Deze globale objecten (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) worden in onze app gebruikt.

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

    • Hier geven we de klikhandler op voor de knop waarmee onze besturingselementen worden ingeschakeld en de aangepaste menuopdracht RadialController wordt geïnitialiseerd.

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

    • Vervolgens initialiseren we ons RadialController-object en stellen we handlers in voor de gebeurtenissen RotationChanged en 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);
}

    • Hier initialiseren we ons aangepaste RadialController-menu-item. We gebruiken CreateForCurrentView om een verwijzing naar ons RadialController-object op te halen, we stellen de rotatiegevoeligheid in op 1 met behulp van de eigenschap RotationResolutionInDegrees . Vervolgens maken we onze RadialControllerMenuItem met CreateFromFontGlyph, voegen we het menu-item toe aan de verzameling radialController-menuitems . Ten slotte gebruiken we SetDefaultMenuItems om de standaardmenu-items te wissen en alleen ons aangepaste hulpprogramma te verlaten.

      // 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. Voer nu de app opnieuw uit.
  5. Selecteer de Radiale controller initialiseren-knop.
  6. Houd met de app op de voorgrond de Surface Dial ingedrukt om het menu weer te geven. U ziet dat alle standaardhulpprogramma's zijn verwijderd (met behulp van de methode RadialControllerConfiguration.SetDefaultMenuItems ), waardoor alleen het aangepaste hulpprogramma wordt verlaten. Hier is het menu met onze aangepaste tool.
Menu RadialController (aangepast)
Aangepast RadialController-menu
  1. Selecteer het aangepaste hulpprogramma en probeer de interacties die nu worden ondersteund via de Surface Dial:
    • Met een draaiactie wordt de schuifregelaar verplaatst.
    • Met een klik stelt u de wisselknop in of uit.

Oké, laten we die knoppen aansluiten.

Stap 5: Menu tijdens runtime configureren

In deze stap koppelen we de menuknoppen Toevoegen/verwijderen enRadialController opnieuw instellen om te laten zien hoe u het menu dynamisch kunt aanpassen.

  1. Open het bestand MainPage_Basic.xaml.cs.

  2. Zoek de code die is gemarkeerd met de titel van deze stap ('// Stap 5: Menu tijdens runtime configureren').

  3. Verwijder opmerkingen bij de code in de volgende methoden en voer de app opnieuw uit, maar selecteer geen knoppen (sla deze op voor de volgende stap).

    // 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. Selecteer de knop Item verwijderen en houd de draaischijf ingedrukt om het menu opnieuw te tonen.

    U ziet dat het menu nu de standaardverzameling hulpprogramma's bevat. Zoals u weet, hebben we tijdens het instellen van ons aangepaste menu alle standaardhulpprogramma's verwijderd en alleen ons aangepaste hulpprogramma toegevoegd. We hebben ook opgemerkt dat wanneer het menu is ingesteld op een lege verzameling, de standaarditems voor de huidige context opnieuw worden ingesteld. (We hebben ons aangepaste hulpprogramma toegevoegd voordat we de standaardhulpprogramma's verwijderen.)

  5. Selecteer Item toevoegen en houd de draaiknop ingedrukt.

    U ziet dat het menu nu zowel de standaardverzameling hulpprogramma's als ons aangepaste hulpprogramma bevat.

  6. Selecteer de menuknop RadialController opnieuw instellen en houd de toetsen ingedrukt.

    U ziet dat het menu terug is in de oorspronkelijke staat.

Stap 6: De haptiek van het apparaat aanpassen

De Surface Dial en andere wielapparaten kunnen gebruikers haptische feedback geven die overeenkomt met de huidige interactie (op basis van klikken of draaien).

In deze stap laten we zien hoe u haptische feedback kunt aanpassen door onze schuifregelaar en schakelaar te associëren en deze te gebruiken om het haptische feedbackgedrag dynamisch te specificeren. In dit voorbeeld moet de wisselknop zijn ingesteld op Aan om feedback in te schakelen terwijl de schuifregelaar aangeeft hoe vaak de feedback op klikken wordt herhaald.

Opmerking

Haptische feedback kan door de gebruiker worden uitgeschakeld op de Instellingen>Apparaten>Wiel pagina.

  1. Open het App.xaml.cs bestand.

  2. Zoek de code die is gemarkeerd met de titel van deze stap ('Stap 6: De haptiek van het apparaat aanpassen').

  3. Markeer de eerste en derde regel ('MainPage_Basic' en 'MainPage') en verwijder de opmerkingen bij de tweede ('MainPage_Haptics').

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

  4. Open het bestand MainPage_Haptics.xaml.

  5. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- stap 6: De haptiek van het apparaat aanpassen --'>).

  6. Verwijder opmerkingen bij de volgende regels. (Deze UI-code geeft gewoon aan welke haptische functies worden ondersteund door het huidige apparaat.)

    <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. Het MainPage_Haptics.xaml.cs-bestand openen

  8. Zoek de code die is gemarkeerd met de titel van deze stap ('Stap 6: Haptics-aanpassing')

  9. Verwijder opmerkingen bij de volgende regels:

    • De Windows.Devices.Haptics typereferentie wordt gebruikt voor functionaliteiten in de volgende stappen.

      using Windows.Devices.Haptics;

    • Hier geven we de handler op voor de ControlAcquired-gebeurtenis die wordt geactiveerd wanneer onze aangepaste RadialController-menuopdracht is geselecteerd.

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

    • Vervolgens definiëren we de ControlAcquired-handler , waarbij we standaard haptische feedback uitschakelen en onze haptische gebruikersinterface initialiseren.

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

    • In de eventhandlers RotationChanged en ButtonClicked verbinden we de bijbehorende schuifregelaar en wisselknoppen met onze aangepaste haptiek.

      // 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"));
        }
    }
}

    • Ten slotte krijgen we de aangevraagde Waveform (indien ondersteund) voor de haptische feedback.

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

Voer de app nu opnieuw uit om de aangepaste haptiek uit te proberen door de schuifregelaarwaarde te wijzigen en de schakeloptiestatus te wijzigen.

Stap 7: Interacties op het scherm definiëren voor Surface Studio en vergelijkbare apparaten

In combinatie met de Surface Studio kan de Surface Dial een nog onderscheidende gebruikerservaring bieden.

Naast de standaardmenu-ervaring voor drukken en vasthouden die wordt beschreven, kan de Surface Dial ook rechtstreeks op het scherm van de Surface Studio worden geplaatst. Hiermee kunt u een speciaal menu op het scherm inschakelen.

Door zowel de contactlocatie als de grenzen van de Surface Dial te detecteren, verwerkt het systeem occlusie die door het apparaat veroorzaakt wordt, terwijl een grotere versie van het menu wordt weergegeven die zich rondom de omgeving van de Dial bevindt. Dezelfde informatie kan ook door uw app worden gebruikt om de gebruikersinterface aan te passen voor zowel de aanwezigheid van het apparaat als het verwachte gebruik, zoals de plaatsing van de hand van de gebruiker en arm.

Het voorbeeld dat bij deze zelfstudie hoort, bevat een iets complexer voorbeeld dat enkele van deze mogelijkheden demonstreert.

U kunt dit in actie zien (u hebt een Surface Studio nodig):

  1. Download het voorbeeld op een Surface Studio-apparaat (waarop Visual Studio is geïnstalleerd)

  2. Het voorbeeld openen in Visual Studio

  3. Het App.xaml.cs-bestand openen

  4. Zoek de code die is gemarkeerd met de titel van deze stap ('Stap 7: Interacties op het scherm definiëren voor Surface Studio en vergelijkbare apparaten')

  5. Markeer de eerste en tweede regel ('MainPage_Basic' en 'MainPage_Haptics') en verwijder de opmerking bij de derde ('MainPage')

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

  6. Voer de app uit en plaats de Surface Dial in elk van de twee besturingsgebieden, waarbij u ertussen wisselt.
    Radiaalcontroller op het scherm

Samenvatting

Gefeliciteerd, u hebt de zelfstudie Aan de slag voltooid: ondersteuning voor Surface Dial (en andere wielapparaten) in uw Windows-app. We hebben u de basiscode laten zien die is vereist voor het ondersteunen van een wielapparaat in uw Windows-apps en hoe u een aantal uitgebreidere gebruikerservaringen kunt bieden die worden ondersteund door de RadialController-API's .

Surface Dial-interacties

API-referentie

Samples

Onderwerpvoorbeelden

RadialController aanpassen

Andere voorbeelden

Voorbeeld van kleurboek

Voorbeelden van universeel Windows-platform (C# en C++)

Voorbeeld van Windows-bureaublad

  • Last updated on