Anleitung: Unterstützen Sie das Surface Dial (und andere Wheel-Geräte) in Ihrer Windows-App

  • Artikel

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

Dieses Tutorial führt Sie Schritt für Schritt durch die Anpassung der interaktiven Benutzerfunktionen, die von Radgeräten wie Surface Dial unterstützt werden. Wir verwenden Ausschnitte 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:

  • Angabe, 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.

Einführung

Das Surface Dial ist ein sekundäres Eingabegerät, das Benutzern bei Verwendung zusammen mit einem primären Eingabegerät wie Stift, Toucheingabe oder Maus zu mehr Produktivität verhilft. Als sekundäres Eingabegerät wird die Drehsteuerung in der Regel mit der nicht dominanten Hand bedient. Sie ermöglicht den Zugriff sowohl auf Systembefehle als auch auf andere kontextbezogenere Tools und Funktionen.

Die Drehsteuerung unterstützt drei grundlegende Bewegungen:

  • Gedrückthalten zum Anzeigen des integrierten Menüs mit Befehlen.
  • Drehen zum Hervorheben eines Menüelements (wenn das Menü aktiv ist) oder zum Ändern der aktuellen Aktion in der App (wenn das Menü nicht aktiv ist).
  • Klicken zum Auswählen des hervorgehobenen Menüelements (wenn das Menü aktiv ist) oder zum Aufrufen eines Befehls in der App (wenn das Menü nicht aktiv ist).

Voraussetzungen

Einrichten Ihrer Geräte

  1. Stellen Sie sicher, dass Ihr Windows-Gerät eingeschaltet ist.
  2. Gehen Sie zu Start, wählen Sie Einstellungen>Geräte>Bluetooth- und andere Geräte aus und aktivieren Sie dann Bluetooth.
  3. Nehmen Sie zum Öffnen des Batteriefachs das Unterteil des Surface Dial ab und vergewissern Sie sich, dass zwei AAA-Batterien eingelegt sind.
  4. Wenn auf der Unterseite der Drehsteuerung ein Batterie-Schutzstreifen vorhanden ist, entfernen Sie ihn.
  5. Halten Sie die kleine abgesenkte Taste neben den Batterien gedrückt, bis die Bluetooth-Leuchte blinkt.
  6. Gehen Sie zurück zu Ihrem Windows-Gerät und wählen Sie Bluetooth- oder anderes Gerät hinzufügen aus.
  7. Wählen Sie im Dialog Gerät hinzufügen Bluetooth>Surface Dial aus. Ihr Surface Dial sollte jetzt verbunden sein und unter Maus, Tastatur und Stift auf der Einstellungsseite Bluetooth- und andere Geräte zur Geräteliste hinzugefügt sein.
  8. Testen Sie die Drehsteuerung, indem Sie sie einige Sekunden lang gedrückt halten, bis das integrierte Menü angezeigt wird.
  9. Wenn das Menü auf Ihrem Bildschirm nicht angezeigt wird (die Drehsteuerung sollte auch vibrieren), kehren Sie zurück zu den Bluetooth-Einstellungen, entfernen Sie das Gerät und versuchen Sie erneut, das Gerät zu verbinden.

Hinweis

Radgeräte können über die Rad-Einstellungen konfiguriert werden:

  1. Wählen Sie im Startmenü Einstellungen aus.
  2. Wählen Sie Geräte>Rad aus.
    Bildschirm

Jetzt sind Sie bereit zum Starten dieses Tutorials.

Beispielcode

In diesem Tutorial 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 sample herunter:

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

Wichtig

Der Großteil des Codes im Beispiel ist auskommentiert. Beim Durchgehen der einzelnen Schritte in diesem Thema werden Sie aufgefordert, die Auskommentierung verschiedener Abschnitte des Codes aufzuheben. Heben Sie in Visual Studio einfach die Codezeilen hervor und drücken Sie STRG-K und dann STRG-U.

Komponenten, die Radfunktionen unterstützen

Diese Objekte machen einen Großteil der Radgerätefunktionen für Windows-Apps aus.

Komponente Beschreibung
RadialController-Klasse und Zugehöriges Stellt ein Radeingabegerät oder Zubehör wie das Surface Dial dar.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Diese Funktionalität wird hier nicht behandelt. Weitere Informationen finden Sie im Windows-Desktopbeispiel.		 Ermöglicht die Interoperabilität mit einer Windows-App.

Schritt 1: Ausführen des Beispiels

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

  1. Öffnen Sie das Beispielprojekt in Visual Studio.
  2. Legen Sie die Dropdownliste Lösungsplattformen auf eine Nicht-Arm-Auswahl fest.
  3. Drücken Sie F5 zum Kompilieren, Bereitstellen und Ausführen.

Hinweis

Alternativ können Sie das Menüelement Debuggen>Debugging starten oder die hier gezeigte Ausführungsschaltfläche Lokaler Computer auswählen: Visual Studio-Schaltfläche

Das App-Fenster wird geöffnet, und nachdem ein Begrüßungsbildschirm für einige Sekunden angezeigt wird, ist dieser Anfangsbildschirm zu sehen.

Leere App

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

Schritt 2: Grundlegende RadialController-Funktionalität

Halten Sie bei im Vordergrund laufender App das Surface Dial gedrückt, bis das RadialController-Menü angezeigt wird.

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 noch viele andere, wie grundlegende 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 Maps-App verwenden.

RadialController-Menü (Standard) RadialController-Menü (Standard mit Medienwiedergabe)
Standardmäßiges RadialController-Menü Standardmenü

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 mit dem Titel dieses Schritts gekennzeichneten Code („<-- Schritt 3: Hinzufügen von Steuerelementen für die Radeingabe -->“).

  3. Heben Sie die Auskommentierung der folgenden Zeilen auf.

    <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 zum Hinzufügen und Entfernen von RadialController-Menüelementen verwendet, die den Zugriff auf Schieberegler und Umschalter ermöglichen.

Einfache Beispiel-App-UI

Schritt 4: Anpassen des grundlegenden RadialController-Menüs

Nun fügen wir den Code hinzu, der zum Aktivieren des RadialController-Zugriffs auf unsere Steuerelemente erforderlich ist.

  1. Öffnen Sie die Datei MainPage_Basic.xaml.cs.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („// Schritt 4: Anpassen des grundlegenden RadialController-Menüs“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf:

    • Die Verweise vom Typ Windows.UI.Input und Windows.Storage.Streams dienen der Funktionalität in den nachfolgenden Schritten:

      // 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 erstellen mit CreateForCurrentView einen Verweis auf unser RadialController-Objekt, wir legen die Drehungsempfindlichkeit über die Eigenschaft RotationResolutionInDegrees auf „1“ fest, wir erstellen dann unser RadialControllerMenuItem über CreateFromFontGlyph, wir fügen das Menüelement zur RadialController-Menüelementsammlung hinzu und verwenden zum Schluss 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 die App nun erneut aus.
  5. Wählen Sie die Schaltfläche RadialController initialisieren aus.
  6. Halten Sie mit der App im Vordergrund das Surface Dial gedrückt, bis das Menü angezeigt wird. Beachten Sie, dass alle Standardtools entfernt wurden (mit der Methode RadialControllerConfiguration.SetDefaultMenuItems), sodass nur das benutzerdefinierte Tool übrig bleibt. Hier ist das Menü mit unserem benutzerdefinierten Tool.
RadialController-Menü (benutzerdefiniert)
Benutzerdefiniertes RadialController-Menü
  1. 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 den Umschalter um.

OK, verknüpfen wir jetzt diese Schaltflächen.

Schritt 5: Konfigurieren des Menüs zur Laufzeit

In diesem Schritt verknüpfen wir die Schaltflächen Element hinzufügen/entfernen und RadialController-Menü zurücksetzen, um zu zeigen, wie sich das Menü dynamisch anpassen lässt.

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

  2. Suchen Sie den dem Titel dieses Schritts gekennzeichneten Code („// Schritt 5: Konfigurieren des Menüs zur Laufzeit“).

  3. Heben Sie die Auskommentierung des Codes in den folgenden Methoden auf und führen Sie die App erneut aus, wählen Sie jedoch keine Schaltflächen aus (speichern Sie das für 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 Drehsteuerung gedrückt, bis das Menü erneut angezeigt wird.

    Beachten Sie, dass das Menü jetzt die Standardsammlung von Tools enthält. Bedenken Sie, dass wir in Schritt 3 beim Einrichten unseres benutzerdefinierten Menüs alle Standardtools entfernt und nur unser benutzerdefiniertes Tool hinzugefügt haben. Wir haben außerdem festgestellt, dass beim Festlegen des Menüs auf eine leere Sammlung die Standardelemente für den aktuellen Kontext reaktiviert werden. (Wir haben unser benutzerdefiniertes Tool hinzugefügt, bevor wir die Standardtools entfernt haben.)

  5. Wählen Sie die Schaltfläche Element hinzufügen aus und halten Sie dann die Drehsteuerung 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-Menü zurücksetzen aus und halten Sie dann die Drehsteuerung 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 dem Benutzer entsprechend der aktuellen Interaktion ein haptisches Feedback liefern (basierend auf Klick oder Drehung).

In diesem Schritt zeigen wir, wie Sie das haptische Feedback durch Zuordnen und dynamisches Verwenden unserer Schieberegler- und Umschalter-Steuerelemente anpassen und das haptische Feedbackverhalten auf diese Weise dynamisch bestimmen können. In diesem Beispiel muss der Umschalter zum Aktivieren des Feedbacks auf Ein gesetzt werden, während der Schiebereglerwert angibt, wie oft das Klickfeedback wiederholt wird.

Hinweis

Haptisches Feedback kann vom Benutzer auf der Seite Einstellungen>Geräte>Rad deaktiviert werden.

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

  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („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 („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 mit dem Titel dieses Schritts gekennzeichneten Code („<!-- Schritt 6: Anpassen der Haptik des Geräts -->“).

  6. Heben Sie die Auskommentierung der folgenden Zeilen auf. (Dieser Benutzeroberflächencode 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 Sie die Datei MainPage_Haptics.xaml.cs.

  8. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („Schritt 6: Anpassen der Haptik“).

  9. Heben Sie die Auskommentierung der folgenden Zeilen auf:

    • Der Verweis vom Typ Windows.Devices.Haptics wird in nachfolgenden Schritten für die Funktionalität verwendet.

      using Windows.Devices.Haptics;

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

      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-Benutzeroberfläche 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 Ereignishandlern RotationChanged und ButtonClicked verbinden wir die entsprechenden Schieberegler- und Umschalter-Schaltflä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 gewünschte 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 Status des Umschalters ä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 standardmäßigen Menübedienung durch Gedrückthalten kann das Surface Dial auch direkt auf dem Bildschirm von Surface Studio angezeigt werden. Dadurch wird ein spezielles „On-Screen“-Menü aktiviert.

Das System erkennt sowohl die Position des Kontakts als auch die Grenzen des Surface Dials und behandelt die Abdeckung durch das Gerät und zeigt eine größere Version des außen um die Drehsteuerung verlaufenden Menüs an. Diese Information kann auch von Ihrer App verwendet werden, um die Benutzeroberfläche an das Vorhandensein des Geräts und seine voraussichtliche Verwendung anzupassen, z. B. an die Position der Hand und des Arms des Benutzers.

Das Beispiel für dieses Tutorial ist etwas komplexer und veranschaulicht einige dieser Funktionen.

Gehen Sie folgendermaßen vor, um es in Aktion zu erleben (Sie benötigen ein Surface Studio):

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

  2. Öffnen Sie das Beispiel in Visual Studio

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

  4. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („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 heben Sie die Auskommentierung der dritten („MainPage“) auf.

    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 bringen Sie das Surface Dial in jeden der beiden Steuerbereiche, und wechseln Sie zwischen diesen.
    RadialController auf dem Bildschirm

Zusammenfassung

Herzlichen Glückwunsch, Sie haben Erste Schritte Anleitung: Unterstützen Sie das Surface Dial (und andere Wheel-Geräte) in Ihrer Windows-App abgeschlossen! Wir haben Ihnen gezeigt, welcher grundlegende Code zur Unterstützung eines Radgeräts in Ihren Windows-Apps erforderlich ist und wie Sie einige der umfangreicheren Benutzererlebnisse bereitstellen können, die von den RadialController-APIs unterstützt werden.

Surface Dial-Interaktionen

API-Referenz

Beispiele

Themenbeispiele

RadialController-Anpassung

Weitere Beispiele

Beispiel für ein Malbuch

Universelle Windows-Plattform – Beispiele (C# und C++)

Windows Desktop Beispiel