Tutorial: Unterstützen Sie das Surface Dial (und andere Rad-Eingabegeräte) in Ihrer Windows-App

Surface Dial mit Surface Studio und Surface Pen (erhältlich im Microsoft Store).

In diesem Tutorial wird beschrieben, wie Sie die Interaktionserlebnisse anpassen, die von Radgeräten wie dem Surface Dial unterstützt werden. Wir verwenden Codeausschnitte aus einer Beispiel-App, die Sie von GitHub herunterladen können (siehe Beispielcode), um die verschiedenen Features und zugehörigen RadialController-APIs zu veranschaulichen, die in den einzelnen Schritten erläutert werden.

Wir konzentrieren uns auf Folgendes:

• Angeben, welche integrierten Tools im RadialController-Menü angezeigt werden
• Hinzufügen eines benutzerdefinierten Tools zum Menü
• Steuern des haptischen Feedbacks
• Anpassen von Klickinteraktionen
• Anpassen von Drehungsinteraktionen

Weitere Informationen zur Implementierung dieser und anderer Features finden Sie unter Surface Dial-Interaktionen in Windows-Apps.

Einleitung

Das Surface Dial ist ein sekundäres Eingabegerät, das Benutzern hilft, produktiver zu sein, wenn sie zusammen mit einem primären Eingabegerät wie Stift, Toucheingabe oder Maus verwendet werden. Als sekundäres Eingabegerät wird das Dial in der Regel mit der nicht dominanten Hand verwendet, um zugriff sowohl auf Systembefehle als auch auf andere kontextbezogenere Tools und Funktionen zu ermöglichen.

Das Dial unterstützt drei grundlegende Gesten:

• Halten Sie gedrückt, um das integrierte Menü mit Befehlen anzuzeigen.
• Drehen Sie, um ein Menüelement hervorzuheben (wenn das Menü aktiv ist) oder die aktuelle Aktion in der App zu ändern (wenn das Menü nicht aktiv ist).
• Klicken Sie, um das hervorgehobene Menüelement (wenn das Menü aktiv ist) auszuwählen oder einen Befehl in der App aufzurufen (wenn das Menü nicht aktiv ist).

Voraussetzungen

• Ein Computer (oder ein virtueller Computer), auf dem Windows 10 Creators Update oder höher ausgeführt wird
• Visual Studio 2019
• Windows 10 SDK (10.0.15063.0)
• Ein Radgerät (derzeit nur das Surface Dial)
• Wenn Sie mit Der Entwicklung von Windows-Apps mit Visual Studio noch nicht vertraut sind, lesen Sie die folgenden Themen, bevor Sie mit diesem Lernprogramm beginnen:
  • Installieren von Tools für das Windows App SDK
  • Erstellen einer App "Hello, world" (XAML)

Einrichten Ihrer Geräte

1. Stellen Sie sicher, dass Ihr Windows-Gerät eingeschaltet ist.
2. Wechseln Sie zu Start, wählen Sie EinstellungenGeräteBluetooth & andere Geräte aus, und aktivieren Sie dann Bluetooth.
3. Entfernen Sie den unteren Rand des Surface Dial, um das Akkufach zu öffnen, und stellen Sie sicher, dass zwei AAA-Batterien enthalten sind.
4. Wenn der Batteriestreifen auf der Unterseite der Wählscheibe vorhanden ist, entfernen Sie ihn.
5. Halten Sie die kleine Einsettaste neben den Batterien gedrückt, bis das Bluetooth-Licht blinkt.
6. Wechseln Sie zurück zu Ihrem Windows-Gerät, und wählen Sie "Bluetooth oder ein anderes Gerät hinzufügen" aus.
7. Wählen Sie im Dialogfeld "Gerät hinzufügen " die Option "Bluetooth>Surface Dial" aus. Ihr Surface Dial sollte jetzt eine Verbindung herstellen und der Liste der Geräte unter Maus, Tastatur und Stift auf der Seite " Bluetooth & andere Geräteeinstellungen " hinzugefügt werden.
8. Testen Sie das Dial, indem Sie es einige Sekunden lang gedrückt halten, um das integrierte Menü anzuzeigen.
9. Wenn das Menü nicht auf dem Bildschirm angezeigt wird (das Dial sollte auch vibrieren), kehren Sie zu den Bluetooth-Einstellungen zurück, entfernen Sie das Gerät, und versuchen Sie erneut, das Gerät zu verbinden.

Jetzt können Sie dieses Lernprogramm starten.

Beispielcode

In diesem Lernprogramm verwenden wir eine Beispiel-App, um die erläuterten Konzepte und Funktionen zu veranschaulichen.

Laden Sie dieses Visual Studio-Beispiel und den Quellcode von GitHub unter windows-appsample-get-started-radialcontroller-Beispiel herunter:

1. Wählen Sie die grüne Schaltfläche Klonen oder Herunterladen aus.
   
2. Wenn Sie über ein GitHub-Konto verfügen, können Sie das Repository auf Ihrem lokalen Computer klonen, indem Sie "In Visual Studio öffnen" auswählen.
3. Wenn Sie nicht über ein GitHub-Konto verfügen oder nur eine lokale Kopie des Projekts benötigen, wählen Sie "ZIP herunterladen " aus (Sie müssen regelmäßig zurückkehren, um die neuesten Updates herunterzuladen).

Komponenten, die Radfunktionen unterstützen

Diese Objekte stellen den Großteil der Radgeräteumgebung für Windows-Apps bereit.

Schritt 1: Ausführen des Beispiels

Nachdem Sie die RadialController-Beispiel-App heruntergeladen haben, überprüfen Sie, ob sie ausgeführt wird:

1. Öffnen Sie das Beispielprojekt in Visual Studio.
2. Stellen Sie das Dropdown-Menü "Lösungsplattformen" auf eine Auswahl ein, die keine Arm-Option ist.
3. Drücken Sie F5, um kompilieren, bereitstellen und ausführen zu können.

Das Anwendungsfenster öffnet sich, und nachdem ein Begrüßungsbildschirm für einige Sekunden erscheint, sehen Sie diesen Anfangsbildschirm.

Okay, wir haben jetzt die grundlegende Windows-App, die wir während des restlichen Lernprogramms verwenden werden. In den folgenden Schritten fügen wir unsere RadialController-Funktionalität hinzu.

Schritt 2: Grundlegende RadialController-Funktionalität

Wenn die App ausgeführt wird und sich im Vordergrund befindet, halten Sie das Surface Dial gedrückt, um das RadialController-Menü anzuzeigen.

Wir haben noch keine Anpassungen für unsere App vorgenommen, sodass das Menü einen Standardsatz von Kontexttools enthält.

Diese Bilder zeigen zwei Varianten des Standardmenüs. (Es gibt viele andere, einschließlich einfacher Systemtools, wenn der Windows-Desktop aktiv ist und keine Apps im Vordergrund sind, zusätzliche Freihandtools, wenn eine InkToolbar vorhanden ist, und Zuordnungstools, wenn Sie die Karten-App verwenden.

RadialController-Menü (Standard)	RadialController-Menü (Standard mit Medienwiedergabe)

Jetzt beginnen wir mit einigen grundlegenden Anpassungen.

Schritt 3: Hinzufügen von Steuerelementen für die Radeingabe

Als Erstes fügen wir die Benutzeroberfläche für unsere App hinzu:

1. Öffnen Sie die Datei MainPage_Basic.xaml.

2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("<-- Schritt 3: Hinzufügen von Steuerelementen für die Radeingabe -->").

3. Entfernen Sie die Auskommentierung der folgenden Zeilen.

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

An diesem Punkt sind nur die Schaltfläche "Beispiel initialisieren ", "Schieberegler" und "Umschalter" aktiviert. Die anderen Schaltflächen werden in späteren Schritten verwendet, um RadialController-Menüelemente hinzuzufügen und zu entfernen, die Zugriff auf den Schieberegler und den Umschalter bieten.

Schritt 4: Anpassen des einfachen RadialController-Menüs

Nun fügen wir den Code hinzu, der erforderlich ist, um den RadialController-Zugriff auf unsere Steuerelemente zu ermöglichen.

1. Öffnen Sie die datei MainPage_Basic.xaml.cs.
2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 4: Grundlegende Anpassung des RadialController-Menüs").
3. Entfernen Sie die Kommentierung der folgenden Zeilen:

   • Die Windows.UI.Input- und Windows.Storage.Streams-Typverweise werden in den folgenden Schritten für die Funktionalität verwendet:

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

   • Diese globalen Objekte (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) werden in unserer gesamten App verwendet.

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

   • Hier geben wir den Click-Handler für die Schaltfläche an, die unsere Steuerelemente aktiviert und unser benutzerdefiniertes RadialController-Menüelement initialisiert.

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

   • Als Nächstes initialisieren wir unser RadialController-Objekt und richten Handler für die Ereignisse RotationChanged und ButtonClicked ein.

     // 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 initialisieren wir unser benutzerdefiniertes RadialController-Menüelement. Wir verwenden CreateForCurrentView , um einen Verweis auf unser RadialController-Objekt abzurufen, wir legen die Drehungsempfindlichkeit auf "1" fest, indem wir die RotationResolutionInDegrees-Eigenschaft verwenden, dann erstellen wir unser RadialControllerMenuItem mithilfe von CreateFromFontGlyph, wir fügen das Menüelement zur Sammlung des RadialController-Menüelements hinzu, und schließlich verwenden wir SetDefaultMenuItems , um die Standardmenüelemente zu löschen und nur unser benutzerdefiniertes Tool zu belassen.

     // 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. Führen Sie nun die App erneut aus.
5. Wählen Sie die Schaltfläche Radialcontroller initialisieren.
6. Halten Sie mit der App im Vordergrund das Surface Dial gedrückt, um das Menü anzuzeigen. Beachten Sie, dass alle Standardtools entfernt wurden (mithilfe der RadialControllerConfiguration.SetDefaultMenuItems-Methode ), wobei nur das benutzerdefinierte Tool übrig bleibt. Hier ist das Menü mit unserem benutzerdefinierten Tool.

RadialController-Menü (benutzerdefiniert)

7. Wählen Sie das benutzerdefinierte Tool aus, und probieren Sie die Interaktionen aus, die jetzt über surface Dial unterstützt werden:
   • Eine Drehaktion verschiebt den Schieberegler.
   • Ein Klick legt die Umschaltfläche auf ein oder aus.

Ok, lassen Sie uns diese Schaltflächen verbinden.

Schritt 5: Konfigurieren des Menüs zur Laufzeit

In diesem Schritt verbinden wir die Menüschaltflächen "Element hinzufügen/entfernen " und "RadialController zurücksetzen ", um zu zeigen, wie Sie das Menü dynamisch anpassen können.

1. Öffnen Sie die datei MainPage_Basic.xaml.cs.

2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 5: Menü zur Laufzeit konfigurieren").

3. Heben Sie die Kommentare in den folgenden Methoden auf; führen Sie die App erneut aus und wählen Sie dabei keine Schaltflächen aus, sondern verschieben Sie das auf den nächsten Schritt.

   // 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. Wählen Sie die Schaltfläche " Element entfernen " aus, und halten Sie dann die Wähltastatur gedrückt, um das Menü erneut anzuzeigen.

   Beachten Sie, dass das Menü jetzt die Standardauflistung von Tools enthält. Erinnern Sie sich daran, dass wir in Schritt 3 beim Einrichten unseres benutzerdefinierten Menüs alle Standardtools entfernt und nur unser benutzerdefiniertes Tool hinzugefügt haben. Außerdem wurde festgestellt, dass beim Festlegen des Menüs auf eine leere Auflistung die Standardelemente für den aktuellen Kontext wieder aufgenommen werden. (Wir haben unser benutzerdefiniertes Tool hinzugefügt, bevor die Standardtools entfernt werden.)

5. Wählen Sie die Schaltfläche " Element hinzufügen " aus, und halten Sie dann die Wähltastatur gedrückt.

   Beachten Sie, dass das Menü jetzt sowohl die Standardsammlung von Tools als auch unser benutzerdefiniertes Tool enthält.

6. Wählen Sie die Schaltfläche "RadialController zurücksetzen " aus, und halten Sie dann die Wähltastatur gedrückt.

   Beachten Sie, dass das Menü wieder in den ursprünglichen Zustand zurückkehrt.

Schritt 6: Anpassen der Haptik des Geräts

Das Surface Dial und andere Radgeräte können Benutzern haptisches Feedback liefern, das der aktuellen Interaktion entspricht (basierend auf Klick oder Drehung).

In diesem Schritt zeigen wir, wie Sie haptisches Feedback anpassen können, indem Sie unsere Schieberegler- und Umschaltsteuerungen zuordnen und diese verwenden, um haptisches Feedbackverhalten dynamisch anzugeben. In diesem Beispiel muss der Umschalter aktiviert werden, damit feedback aktiviert wird, während der Schiebereglerwert angibt, wie oft das Klickfeedback wiederholt wird.

1. Öffnen Sie die App.xaml.cs Datei.

2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("Schritt 6: Anpassen der Haptik des Geräts").

3. Kommentieren Sie die erste und dritte Zeile ("MainPage_Basic" und "MainPage") und heben Sie die Auskommentierung der zweiten Zeile ("MainPage_Haptics") auf.

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

4. Öffnen Sie die Datei MainPage_Haptics.xaml.

5. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("<-- Schritt 6: Anpassen der Haptik des Geräts -->").

6. Entfernen Sie die Auskommentierung der folgenden Zeilen. (Dieser UI-Code gibt einfach an, welche Haptikfeatures vom aktuellen Gerät unterstützt werden.)

   <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. Öffnen der MainPage_Haptics.xaml.cs Datei

8. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("Schritt 6: Haptik-Anpassung")

9. Entkommentieren Sie die folgenden Zeilen:

   • Der Windows.Devices.Haptics-Typverweis wird in nachfolgenden Schritten für die Funktionalität verwendet.

     using Windows.Devices.Haptics;
     

   • Hier geben wir den Handler für das ControlAcquired-Ereignis an, das ausgelöst wird, wenn unser benutzerdefiniertes RadialController-Menüelement ausgewählt ist.

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

   • Als Nächstes definieren wir den ControlAcquired-Handler , in dem wir das standardmäßige haptische Feedback deaktivieren und unsere Haptik-UI initialisieren.

     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 unseren RotationChanged- und ButtonClicked-Ereignishandlern verbinden wir den entsprechenden Schieberegler und die Umschaltschaltflächen-Steuerelemente mit unserer benutzerdefinierten Haptik.

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

   • Schließlich erhalten wir die angeforderte Waveform (sofern unterstützt) für das 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;
     }
     

Führen Sie nun die App erneut aus, um die benutzerdefinierte Haptik auszuprobieren, indem Sie den Schiebereglerwert und den Umschaltmodus ändern.

Schritt 7: Definieren von Bildschirminteraktionen für Surface Studio und ähnliche Geräte

Gekoppelt mit Surface Studio kann das Surface Dial eine noch unverwechselbarere Benutzererfahrung bieten.

Zusätzlich zur beschriebenen Standardeinstellung für das Gedrückthalten des Menüs kann das Surface Dial auch direkt auf dem Bildschirm des Surface Studio platziert werden. Dadurch wird ein spezielles "On-Screen"-Menü aktiviert.

Durch die Erkennung der Kontaktposition und der Grenzen des Surface Dial bewältigt das System die Verdeckung durch das Gerät und zeigt eine größere Version des Menüs an, die um die Außenseite des Dial erscheint. Diese Informationen können auch von Ihrer App verwendet werden, um die Benutzeroberfläche sowohl für das Vorhandensein des Geräts als auch für die erwartete Verwendung anzupassen, z. B. die Platzierung der Hand und des Arms des Benutzers.

Das Beispiel, das dieses Lernprogramm begleitet, enthält ein etwas komplexeres Beispiel, das einige dieser Funktionen veranschaulicht.

Um dies in Aktion anzuzeigen (Sie benötigen ein Surface Studio):

1. Laden Sie das Beispiel auf einem Surface Studio-Gerät herunter (mit Visual Studio installiert)

2. Öffnen des Beispiels in Visual Studio

3. Öffnen der App.xaml.cs Datei

4. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("Schritt 7: Definieren von Bildschirminteraktionen für Surface Studio und ähnliche Geräte")

5. Kommentieren Sie die erste und zweite Zeile ("MainPage_Basic" und "MainPage_Haptics") und entfernen Sie den Kommentar bei der dritten Zeile ("MainPage").

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

6. Führen Sie die App aus, und platzieren Sie das Surface Dial in jedem der beiden Steuerbereiche, und wechseln Sie zwischen ihnen.
   

Zusammenfassung

Herzlichen Glückwunsch, Sie haben das Lernprogramm "Erste Schritte" abgeschlossen: Unterstützen Sie das Surface Dial (und andere Radgeräte) in Ihrer Windows-App! Wir haben Ihnen den grundlegenden Code gezeigt, der für die Unterstützung eines Radgeräts in Ihren Windows-Apps erforderlich ist und wie Sie einige der umfangreicheren Benutzeroberflächen bereitstellen, die von den RadialController-APIs unterstützt werden.

Verwandte Artikel

Surface Dial-Interaktionen

API-Referenz

• RadialController-Klasse
• RadialControllerButtonClickedEventArgs-Klasse
• RadialControllerConfiguration-Klasse
• RadialControllerControlAcquiredEventArgs-Klasse
• RadialControllerMenu-Klasse
• RadialControllerMenuItem-Klasse
• RadialControllerRotationChangedEventArgs-Klasse
• RadialControllerScreenContact-Klasse
• RadialControllerScreenContactContinuedEventArgs-Klasse
• RadialControllerScreenContactStartedEventArgs-Klasse
• RadialControllerMenuKnownIcon enum
• RadialControllerSystemMenuItemKind-Enum

Beispiele

Themenbeispiele

RadialController-Anpassung

Weitere Beispiele

Coloring Book-Beispiel

Beispiele für die universelle Windows-Plattform (C# und C++)

Windows-Desktopbeispiel