Anleitung: So unterstützen Sie Surface Dial (und andere Radgeräte) in Ihrer Windows-App

2025-06-10

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

In diesem Tutorial erfahren Sie, wie Sie die Benutzererlebnisse 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
Anpassung von Klick-Interaktionen
Anpassen von Rotationsinteraktionen

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 es zusammen mit einem primären Eingabegerät wie einem Stift, einer Berührung oder einer Maus verwendet wird. 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 "Hello, world"-App (XAML)

Richten Sie Ihre Geräte ein

Stellen Sie sicher, dass Ihr Windows-Gerät eingeschaltet ist.
Wechseln Sie zu Start, wählen Sie Einstellungen>Geräte>Bluetooth und andere Geräte aus, und aktivieren Sie anschließend Bluetooth.
Entfernen Sie den unteren Rand des Surface Dial, um das Akkufach zu öffnen, und stellen Sie sicher, dass zwei AAA-Batterien enthalten sind.
Wenn die Batterieregisterkarte auf der Unterseite des Dial vorhanden ist, entfernen Sie sie.
Halten Sie die kleine, vertiefte Taste neben den Batterien gedrückt, bis das Bluetooth-Licht blinkt.
Wechseln Sie zurück zu Ihrem Windows-Gerät, und wählen Sie Bluetooth oder ein anderes Gerät hinzufügenaus.
Wählen Sie im Dialogfeld Gerät hinzufügen die Option Bluetooth>Surface Dialaus. 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.
Testen Sie das Dial, indem Sie es einige Sekunden lang gedrückt halten, um das integrierte Menü anzuzeigen.
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.

Hinweis

Radvorrichtungen können über die Einstellungen Wheel konfiguriert werden:

Wählen Sie im Menü StartEinstellungenaus.
Wählen Sie Geräte>Radaus.

Jetzt sind Sie bereit, dieses Tutorial zu 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-Beispielherunter:

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

Von Bedeutung

Der großteil des Codes im Beispiel ist auskommentiert. Während wir jeden Schritt in diesem Thema durchgehen, werden Sie aufgefordert, die Kommentare verschiedener Abschnitte des Codes aufzuheben. Markieren Sie in Visual Studio einfach die Codezeilen, und drücken Sie CTRL-K und dann STRG-U.

Komponenten, die Radfunktionen unterstützen

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

Komponente	BESCHREIBUNG
RadialController Klasse und verwandter	Stellt ein Radeingabegerät oder Zubehör wie das Surface Dial dar.
IRadialControllerConfigurationInterop / IRadialControllerInterop Wir behandeln diese Funktionalität hier nicht, weitere Informationen finden Sie im Windows-Desktopbeispiel.	Ermöglicht die Interoperabilität mit einer Windows-App.

Schritt 1: Das Beispiel ausführen

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

Öffnen Sie das Beispielprojekt in Visual Studio.
Stellen Sie das Dropdownmenü Lösungsplattformen auf eine Auswahl ohne ARM-Prozessorarchitektur ein.
Drücken Sie F5, um kompilieren, bereitstellen und ausführen zu können.

Hinweis

Alternativ können Sie Debug>Menüpunkt "Debuggen starten" auswählen oder die hier gezeigte Ausführen-Schaltfläche Lokaler Computer auswählen: Visual Studio Build-Projekt-Schaltfläche

Das App-Fenster öffnet sich, und nachdem ein Splashscreen für einige Sekunden angezeigt wurde, siehst du diesen Startbildschirm.

Leere App

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

Schritt 2: Grundlegende RadialController-Funktionalität

Wenn die App läuft und im Vordergrund ist, 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, darunter einfache Systemwerkzeuge, wenn der Windows-Desktop aktiv ist und keine Apps im Vordergrund sind, zusätzliche Freihandwerkzeuge, wenn die InkToolbar vorhanden ist, und Karten-Tools, 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:

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

Entkommentieren Sie die 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 Initialisieren Schaltfläche, 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.

Basic-Beispiel-App-UI

Fügen wir nun den Code hinzu, der erforderlich ist, um dem RadialController Zugriff auf unsere Steuerelemente zu gewähren.

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

Heben Sie die Auskommentierung der folgenden Zeilen auf:

Die Typverweise Windows.UI.Input und Windows.Storage.Streams werden in den folgenden Schritten zur Erreichung der 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, der unsere Steuerungen 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 die 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, fügen das Menüelement zur RadialControllerMenüelementauflistung- 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;
}

Führen Sie nun die App erneut aus.
Wählen Sie die Schaltfläche "Radialcontroller initialisieren".
Mit der App im Vordergrund drücken und halten Sie das Surface Dial, 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)

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 setzt den Schalter auf ein oder aus.

Ok, lassen Sie uns diese Schaltflächen verbinden.

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

Öffnen Sie die datei MainPage_Basic.xaml.cs.
Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 5: Menü zur Laufzeit konfigurieren").

Heben Sie die Kommentare in den folgenden Methoden auf und führen Sie die App erneut aus, aber wählen Sie keine Schaltflächen aus – das machen Sie im 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[] { });
}

Drücken Sie die Schaltfläche Element entfernen und halten Sie dann die Wähltaste 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, wenn das Menü auf eine leere Sammlung gesetzt wird, die Standardelemente für den aktuellen Kontext wiederhergestellt werden. (Wir haben unser benutzerdefiniertes Tool hinzugefügt, bevor die Standardtools entfernt werden.)
Wählen Sie die Schaltfläche Element hinzufügen aus und halten Sie dann den Drehknopf gedrückt.

Beachten Sie, dass das Menü jetzt sowohl die Standardsammlung von Tools als auch unser benutzerdefiniertes Tool enthält.
Wählen Sie die Schaltfläche Reset im RadialController-Menü aus, und halten Sie dann die Drehscheibe 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 das Verhalten des haptischen Feedbacks dynamisch anzugeben. In diesem Beispiel muss der Umschalter auf 'Ein' gesetzt werden, damit das Feedback aktiviert wird, während der Wert des Schiebereglers angibt, wie oft das Klickfeedback wiederholt wird.

Hinweis

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

Öffnen Sie die App.xaml.cs Datei.
Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("Schritt 6: Anpassen der Haptik des Geräts").

Kommentieren Sie die erste und dritte Zeile („MainPage_Basic“ und „MainPage“) und entkommentieren Sie die zweite („MainPage_Haptics“).

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

Öffnen Sie die Datei MainPage_Haptics.xaml.
Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("<!-- Schritt 6: Anpassen der Haptik des Geräts ->").

Entkommentieren Sie die 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>

Öffnen der MainPage_Haptics.xaml.cs Datei
Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("Schritt 6: Haptik-Anpassung")

Heben Sie die Kommentare der folgenden Zeilen auf:

Der Typverweis 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 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); };
```

Nun definieren wir den ControlAcquired Handler, in dem wir das voreingestellte haptische Feedback deaktivieren und unsere haptische 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 RotationChanged und ButtonClicked Ereignishandlern verbinden wir die entsprechenden Schieberegler und Schaltflächen zur Umschaltung 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 Wellenform (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 Wert des Schiebereglers und den Zustand 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 zu der 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 verarbeitet das System die Verdeckung durch das Gerät und zeigt eine größere Version des Menüs an, die den Drehregler außen umschließt. Diese Informationen können auch von Ihrer App verwendet werden, um die Benutzeroberfläche sowohl für die Anwesenheit des Geräts als auch für die vorgesehene Nutzung 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):

Laden Sie das Beispiel auf einem Surface Studio-Gerät herunter (mit Visual Studio installiert)
Öffnen des Beispiels in Visual Studio
Öffnen der App.xaml.cs Datei
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")

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

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

Führen Sie die App aus und platzieren Sie das Surface Dial abwechselnd zwischen den beiden Steuerbereichen.

Zusammenfassung

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

Surface Dial-Interaktionen