Sdílet prostřednictvím


Návod: Podpora zařízení Surface Dial (a dalších kruhových zařízení) v aplikaci pro Windows

Obrázek zařízení Surface Dial se zařízením Surface Studio
Surface Dial se Surface Studio a Surface Pen (k dispozici k nákupu v Microsoft Store).

Tento návod ukazuje, jak přizpůsobit uživatelské interakce podporované zařízeními s otočným ovladačem, jako je Surface Dial. Fragmenty kódu používáme z ukázkové aplikace, kterou si můžete stáhnout z GitHubu (viz ukázkový kód) k předvedení různých funkcí a přidružených rozhraní API RadialController probíraných v jednotlivých krocích.

Zaměřujeme se na následující:

  • Určení, které předdefinované nástroje se zobrazí v nabídce RadialController
  • Přidání vlastního nástroje do nabídky
  • Řízení haptické zpětné vazby
  • Přizpůsobení interakcí kliknutí
  • Přizpůsobení rotačních interakcí

Další informace o implementaci těchto a dalších funkcí najdete v tématu Interakce zařízení Surface Dial v aplikacích pro Windows.

Úvod

Surface Dial je sekundární vstupní zařízení, které pomáhá uživatelům zvýšit produktivitu při použití společně s primárním vstupním zařízením, jako je pero, dotykové ovládání nebo myš. Jako sekundární vstupní zařízení se otočný ovladač obvykle používá s nedominantní rukou, která poskytuje přístup k systémovým příkazům i k dalším kontextovým nástrojům a funkcím.

Dial podporuje tři základní gesta:

  • Stisknutím a podržením zobrazíte integrovanou nabídku příkazů.
  • Otočením zvýrazníte položku nabídky (pokud je nabídka aktivní) nebo upravíte aktuální akci v aplikaci (pokud nabídka není aktivní).
  • Kliknutím vyberete zvýrazněnou položku nabídky (pokud je nabídka aktivní) nebo vyvoláte příkaz v aplikaci (pokud nabídka není aktivní).

Požadavky

Nastavení zařízení

  1. Ujistěte se, že je vaše zařízení s Windows zapnuté.
  2. Přejděte na Start, vyberte Nastavení>zařízení>Bluetooth a další zařízení a pak zapněte Bluetooth .
  3. Vyjměte spodní část zařízení Surface Dial, abyste otevřeli přihrádku baterie, a ujistěte se, že uvnitř jsou dvě baterie AAA.
  4. Pokud je karta baterie na spodní straně číselníku, odeberte ji.
  5. Stiskněte a podržte malé zapuštěné tlačítko vedle baterií, dokud kontrolka Bluetooth nezačne blikat.
  6. Vraťte se na zařízení s Windows a vyberte Přidat Bluetooth nebo jiné zařízení.
  7. V dialogovém okně Přidat zařízení vyberte Bluetooth>Surface Dial. Surface Dial by se teď měl připojit a přidat do seznamu zařízení v části Myš, klávesnice a pero na stránce nastavení Bluetooth a dalších zařízení .
  8. Otestujte otočný knoflík stisknutím a podržením na několik sekund, aby se zobrazila integrovaná nabídka.
  9. Pokud se nabídka nezobrazuje na obrazovce (vibrovat by měl také Dial), vraťte se k nastavení Bluetooth, zařízení odeberte a zkuste ho znovu připojit.

Poznámka:

Zařízení wheel lze konfigurovat pomocí nastavení Wheel :

  1. V nabídce Start vyberte Nastavení.
  2. Vyberte Zařízení>Kolečko.
    Obrazovka nastavení kolečka

Teď jste připraveni zahájit tento kurz.

Ukázkový kód

V tomto kurzu použijeme ukázkovou aplikaci k předvedení konceptů a funkcí, které jsme probírali.

Stáhněte si tuto ukázku sady Visual Studio a zdrojový kód z GitHubu na windows-appsample-get-started-radialcontroller sample:

  1. Vyberte zelené tlačítko Klonovat nebo stáhnout .
    Klonování úložiště
  2. Pokud máte účet GitHubu, můžete úložiště naklonovat do místního počítače tak, že zvolíte Otevřít v sadě Visual Studio.
  3. Pokud nemáte účet GitHubu nebo chcete jenom místní kopii projektu, zvolte Stáhnout ZIP (budete se muset pravidelně podívat, abyste si stáhli nejnovější aktualizace).

Důležité

Většina kódu v ukázce je okomentována. Při procházení jednotlivých kroků v tomto tématu budete požádáni o zrušení komentáře různých částí kódu. V sadě Visual Studio stačí zvýraznit řádky kódu a stisknout CTRL-K a pak CTRL-U.

Komponenty, které podporují funkce kol

Tyto objekty poskytují většinu prostředí zařízení s koly pro aplikace pro Windows.

Součást Description
třída RadialController a související Představuje vstupní zařízení nebo příslušenství pro kolečko, jako je Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Tuto funkci zde nepokrýváme, další informace najdete v ukázce plochy Windows.
Umožňuje interoperabilitu s aplikací pro Windows.

Krok 1: Spuštění ukázky

Po stažení ukázkové aplikace RadialController ověřte, že běží:

  1. Otevřete ukázkový projekt v sadě Visual Studio .
  2. Nastavte rozevírací seznam Platformy řešení na jiný výběr než Arm.
  3. Stisknutím klávesy F5 zkompilujte, nasaďte a spusťte.

Poznámka:

Alternativně můžete vybrat položku nabídky Ladění>Spustit ladění nebo vybrat tlačítko místní Počítač Spustit zde: Tlačítko sestavení projektu ve Visual Studio

Otevře se okno aplikace a po několika sekundách se zobrazí úvodní obrazovka.

Prázdná aplikace

Dobře, teď máme základní aplikaci pro Windows, kterou budeme používat ve zbytku tohoto kurzu. V následujících krocích přidáme naši funkcionalitu RadialController.

Krok 2: Základní funkce RadialController

Je-li aplikace spuštěná a v popředí, stiskněte a podržte Surface Dial, abyste zobrazili nabídku RadialController.

Zatím jsme pro naši aplikaci neprovedli žádné přizpůsobení, takže nabídka obsahuje výchozí sadu kontextových nástrojů.

Tyto obrázky zobrazují dvě varianty výchozí nabídky. (Existuje mnoho dalších, včetně jenom základních systémových nástrojů, když je plocha Windows aktivní a v popředí nejsou žádné aplikace, další nástroje rukopisu, když je k dispozici InkToolbar, a nástroje pro mapování při používání aplikace Mapy.

Nabídka RadialController (výchozí) Nabídka RadialController (výchozí nastavení při přehrávání médií)
Výchozí nabídka RadialController Výchozí nabídka RadialController s hudbou

Teď začneme s některými základními přizpůsobeními.

Krok 3: Přidání ovládacích prvků pro vstup kol

Nejprve přidáme uživatelské rozhraní pro naši aplikaci:

  1. Otevřete soubor MainPage_Basic.xaml.

  2. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 3: Přidání ovládacích prvků pro vstup kolečka -->").

  3. Odkomentujte následující řádky.

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

V tomto okamžiku je povolené pouze tlačítko Inicializovat ukázku , posuvník a přepínač. Další tlačítka se používají v pozdějších krocích k přidání a odebrání položek nabídky RadialController , které poskytují přístup k posuvníku a přepínači.

Základní uživatelské rozhraní ukázkové aplikace

Krok 4: Přizpůsobení základní nabídky RadialController

Teď přidáme kód potřebný k povolení přístupu RadialController k našim ovládacím prvkům.

  1. Otevřete soubor MainPage_Basic.xaml.cs.
  2. Vyhledejte kód označený názvem tohoto kroku ("// Krok 4: Základní přizpůsobení nabídky RadialController").
  3. Odkomentujte následující řádky:
    • Odkazy na typ Windows.UI.Input a Windows.Storage.Streams se používají pro funkce v následujících krocích:

      // Using directives for RadialController functionality.
      using Windows.UI.Input;
      
    • Tyto globální objekty (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) se používají v rámci naší aplikace.

      private RadialController radialController;
      private RadialControllerConfiguration radialControllerConfig;
      private RadialControllerMenuItem radialControllerMenuItem;
      
    • Zde určíme obslužnou rutinu Click pro tlačítko, které povolí naše ovládací prvky a inicializuje vlastní položku nabídky RadialController .

      InitializeSampleButton.Click += (sender, args) =>
      { InitializeSample(sender, args); };
      
    • Dále inicializujeme objekt RadialController a nastavíme obslužné rutiny pro události RotationChanged a 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);
      }
      
    • Zde inicializujeme vlastní položku nabídky RadialController. K získání odkazu na objekt RadialController používáme CreateForCurrentView, nastavíme citlivost otáčení na hodnotu 1 pomocí RotationResolutionInDegrees vlastnost, pak vytvoříme RadialControllerMenuItem pomocí CreateFromFontGlyph, přidáme položku nabídky do kolekce položek nabídky RadialController a nakonec použijeme SetDefaultMenuItems pro vymazání výchozích položek nabídky a ponecháme pouze náš vlastní nástroj.

      // 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. Teď aplikaci spusťte znovu.
  5. Vyberte tlačítko Inicializovat paprskový ovladač .
  6. Když je aplikace v popředí, stisknutím a podržením zařízení Surface Dial zobrazte nabídku. Všimněte si, že všechny výchozí nástroje byly odebrány pomocí metody RadialControllerConfiguration.SetDefaultMenuItems, takže zůstává pouze vlastní nástroj. Tady je nabídka s naším vlastním nástrojem.
Nabídka RadialController (vlastní)
Vlastní nabídka RadialController
  1. Vyberte vlastní nástroj a vyzkoušejte interakce podporované prostřednictvím zařízení Surface Dial:
    • Akce otáčení přesune posuvník.
    • Po kliknutí se přepínač zapne nebo vypne.

Tak, pojďme propojit ta tlačítka.

Krok 5: Konfigurace nabídky za běhu

V tomto kroku propojíme tlačítka Add/Remove item a Reset RadialController menu, abychom ukázali, jak můžete nabídku dynamicky přizpůsobit.

  1. Otevřete soubor MainPage_Basic.xaml.cs.

  2. Vyhledejte kód označený názvem tohoto kroku (// Krok 5: Konfigurace nabídky za běhu).

  3. Odkomentujte kód v následujících metodách a spusťte aplikaci znovu, ale nevybírejte žádná tlačítka (uložte ho pro další krok).

    // 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. Vyberte tlačítko Odebrat položku a stisknutím a podržením tlačítka Dial znovu zobrazte nabídku.

    Všimněte si, že nabídka teď obsahuje výchozí kolekci nástrojů. Vzpomeňte si, že v kroku 3 jsme při nastavování vlastní nabídky odebrali všechny výchozí nástroje a přidali jsme jenom vlastní nástroj. Také jsme si poznamenali, že když je nabídka nastavená na prázdnou kolekci, obnoví se výchozí položky aktuálního kontextu. (Před odebráním výchozích nástrojů jsme přidali vlastní nástroj.)

  5. Vyberte tlačítko Přidat položku a stiskněte a podržte číselník.

    Všimněte si, že nabídka teď obsahuje výchozí kolekci nástrojů i náš vlastní nástroj.

  6. Vyberte tlačítko nabídky Reset RadialController a stiskněte a podržte klávesu Dial.

    Všimněte si, že nabídka se vrátí do původního stavu.

Krok 6: Přizpůsobení haptiky zařízení

Zařízení Surface Dial a jiná zařízení s kolečkem mohou uživatelům poskytnout haptickou zpětnou vazbu, která odpovídá aktuální interakci (založené na kliknutí nebo otočení).

V tomto kroku si ukážeme, jak můžete přizpůsobit hmatovou zpětnou vazbu tím, že přidružíte ovládací prvky posuvníku a přepínače a použijete je k dynamickému určení chování haptické zpětné vazby. V tomto příkladu musí být přepínač nastavený na zapnutý, aby byla povolena zpětná vazba, zatímco hodnota posuvníku určuje, jak často se zpětná vazba kliknutí opakuje.

Poznámka:

Haptickou zpětnou vazbu může uživatel zakázat na stránce Nastavení>Zařízení>Kolo.

  1. Otevřete soubor App.xaml.cs.

  2. Vyhledejte kód označený názvem tohoto kroku (Krok 6: Přizpůsobení haptiky zařízení).

  3. Okomentujte první a třetí řádky ("MainPage_Basic" a "MainPage") a zrušte komentář druhé ("MainPage_Haptics").

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
    rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
    
  4. Otevřete soubor MainPage_Haptics.xaml.

  5. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 6: Přizpůsobení haptiky zařízení -->").

  6. Odkomentujte následující řádky. (Tento kód uživatelského rozhraní jednoduše označuje, jaké funkce haptiky aktuální zařízení podporuje.)

    <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. Otevření souboru MainPage_Haptics.xaml.cs

  8. Vyhledejte kód označený názvem tohoto kroku ("Krok 6: Přizpůsobení haptiky")

  9. Odkomentujte následující řádky:

    • Odkaz na typ Windows.Devices.Haptics se používá pro funkce v dalších krocích.

      using Windows.Devices.Haptics;
      
    • Zde určíme obslužnou rutinu pro událost ControlAcquired , která se aktivuje při výběru vlastní položky nabídky RadialController .

      radialController.ControlAcquired += (rc_sender, args) =>
      { RadialController_ControlAcquired(rc_sender, args); };
      
    • Dále definujeme obslužnou rutinu ControlAcquired , kde zakážeme výchozí haptickou zpětnou vazbu a inicializujeme naše haptické uživatelské rozhraní.

      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;
          }
      }
      
    • V našich obslužných rutinách událostí RotationChanged a ButtonClicked připojujeme odpovídající ovladače posuvníku a přepínacího tlačítka k našim vlastním haptikám.

      // 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"));
              }
          }
      }
      
    • Nakonec získáme požadovaný vlnový průběh (pokud je podporován) pro haptickou zpětnou vazbu.

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

Teď spusťte aplikaci znovu a vyzkoušejte si vlastní haptika změnou hodnoty posuvníku a stavu přepínače.

Krok 7: Definování interakcí na obrazovce pro Surface Studio a podobná zařízení

Zařízení Surface Dial spárované se sadou Surface Studio poskytuje ještě výraznější uživatelské prostředí.

Kromě výchozího prostředí pro stisknutí a podržení v nabídce lze Surface Dial umístit také přímo na obrazovce zařízení Surface Studio. Tím se povolí speciální nabídka na obrazovce.

Detekováním polohy kontaktu a hranic zařízení Surface Dial systém zvládá překrytí zařízení a zobrazí větší verzi nabídky, která se zabalí kolem vnější části Surface Dial. Vaše aplikace může stejnou informaci také použít k přizpůsobení uživatelského rozhraní pro přítomnost zařízení a jeho předpokládané využití, jako je umístění ruky a paže uživatele.

Ukázka, která doprovází tento kurz, obsahuje o něco složitější příklad, který ukazuje některé z těchto funkcí.

Pokud to chcete vidět v akci (budete potřebovat Surface Studio):

  1. Stažení ukázky na zařízení Surface Studio (s nainstalovanou sadou Visual Studio)

  2. Otevřete ukázku v Visual Studio

  3. Otevření souboru App.xaml.cs

  4. Vyhledejte kód označený názvem tohoto kroku (Krok 7: Definování interakcí na obrazovce pro Surface Studio a podobná zařízení).

  5. Okomentujte první a druhý řádek ("MainPage_Basic" a "MainPage_Haptics") a zrušte komentář třetí ("MainPage")

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
    rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
    
  6. Spusťte aplikaci a umístěte Zařízení Surface Dial do každé ze dvou řídicích oblastí, které se mezi nimi střídají.
    RadialController na obrazovce

Shrnutí

Blahopřejeme, dokončili jste Úvodní kurz: Podpora zařízení Surface Dial a dalších zařízení s kolečkem ve vaší aplikaci pro Windows! Ukázali jsme vám základní kód potřebný pro podporu zařízení kol ve vašich aplikacích pro Windows a jak poskytnout některé z bohatších uživatelských prostředí podporovaných rozhraními API RadialController .

Interakce zařízení Surface Dial

Referenční informace k rozhraní API

Samples

Ukázky témat

Přizpůsobení radialControlleru

Další ukázky

Ukázka omalovánky

Ukázky univerzální platformy Windows (C# a C++)

Ukázka desktopové verze Windows