Entwicklerhandbuch für Touchinteraktionen

Entwerfen Sie Ihre App so, dass Sie davon ausgehen können, dass die Berührung die primäre Eingabemethode Ihrer Benutzer sein wird. Wenn Sie WinUI-Steuerelemente verwenden, erfordert die Unterstützung für Touchpad, Maus und Zeichen-/Eingabestift keine zusätzliche Programmierung, da WinUI-Apps dies kostenlos bereitstellen.

Denken Sie jedoch daran, dass eine für die Berührung optimierte Benutzeroberfläche nicht immer besser ist als eine herkömmliche Benutzeroberfläche. Beide bieten Vor- und Nachteile, die für eine bestimmte Technologie und Anwendung einzigartig sind. Bei der Umstellung auf eine Touch-first Benutzeroberfläche ist es wichtig, die grundlegenden Unterschiede zwischen Touch-, Touchpad-, Stift/-Stylus-, Maus- und Tastatureingabe zu verstehen.

Wichtige APIs: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

Viele Geräte verfügen über Multitouch-Bildschirme, die die Verwendung eines oder mehrerer Finger (oder Fingerkontakte) als Eingabe unterstützen. Die Touch-Kontakte und ihre Bewegung werden als Touch-Gesten und Manipulationen interpretiert, um verschiedene Benutzerinteraktionen zu unterstützen.

Die Windows app enthält eine Reihe verschiedener Mechanismen für die Behandlung von Toucheingaben, sodass Sie eine immersive Erfahrung erstellen können, die Ihre Benutzer mit Vertrauen erkunden können. Hier behandeln wir die Grundlagen der Verwendung von Toucheingaben in einem Windows app.

Touch-Interaktionen erfordern drei Dinge:

• Ein berührungsempfindliches Display.
• Der direkte Kontakt (oder die Annäherung an das Display, wenn das Display über Annäherungssensoren verfügt und die Hover-Erkennung unterstützt) von einem oder mehreren Fingern auf diesem Display.
• Bewegung der Berührungskontakte (oder das Fehlen der Berührungsbewegung, basierend auf einer Zeitgrenze).

Die vom Touch-Sensor bereitgestellten Eingabedaten können wie folgt sein:

• Interpretiert als physische Geste zur direkten Manipulation eines oder mehrerer Benutzeroberflächen-Elemente (z.B. Schwenken, Drehen, Ändern der Größe oder Verschieben). (Im Gegensatz dazu wird die Interaktion mit einem Element über die properties window, das Dialogfeld oder andere UI-Angebote als indirekte Manipulation angesehen.)
• Als alternative Eingabemethode erkannt, z.B. Maus oder Stift.
• Wird verwendet, um Aspekte anderer Eingabemethoden zu ergänzen oder zu verändern, z.B. um einen mit einem Stift gezeichneten Tintenstrich zu verwischen.

Toucheingaben beinhalten in der Regel die direkte Manipulation eines Elements auf dem Bildschirm. Das Element reagiert sofort auf jeden Berührungskontakt innerhalb seines Treffertest-Bereichs und entsprechend auf jede nachfolgende Bewegung der Touch-Kontakte, einschließlich Entfernen.

Benutzerdefinierte Touch-Gesten und Interaktionen sollten sorgfältig entworfen werden. Sie sollten intuitiv, reaktionsfähig und auffindbar sein, und sie sollten es Benutzern ermöglichen, Ihre App mit Vertrauen zu erkunden.

Stellen Sie sicher, dass die App-Funktionalität für jeden unterstützten Eingabegerätetyp konsistent verfügbar gemacht wird. Verwenden Sie bei Bedarf eine Form des indirekten Eingabemodus, wie z.B. Texteingabe für Tastatur-Interaktionen oder Benutzeroberflächen-Angebote für Maus und Stift.

Denken Sie daran, dass herkömmliche Eingabegeräte (z.B. Maus und Tastatur) für viele Benutzer vertraut und ansprechend sind. Sie können Geschwindigkeit, Genauigkeit und taktiles Feedback bieten, das Berührungen nicht bieten können.

Wenn Sie einzigartige und unverwechselbare interaktive Funktionen für alle Eingabegeräte anbieten, unterstützen Sie ein möglichst breites Spektrum an Fähigkeiten und Vorlieben, sprechen ein möglichst breites Publikum an und gewinnen mehr Kunden für Ihre App.

Vergleich der Anforderungen an die Touch-Interaktion

Die folgende Tabelle zeigt einige der Unterschiede zwischen den Eingabegeräten, die Sie bei der Entwicklung von Touch-optimierten Windows-Apps berücksichtigen sollten.

Faktor	Touch-Interaktionen	Maus-, Tastatur-, Zeichen-/Eingabestiftinteraktionen	Touchpad
Präzision	Der Kontaktbereich einer Fingerspitze ist größer als eine einzelne x-y-Koordinate, wodurch die Wahrscheinlichkeit unbeabsichtigter Befehlsaktivierungen erhöht wird.	Die Maus und der Zeichen-/Eingabestift liefern eine präzise x-y-Koordinate.	Identisch mit der Maus.
	Die Form des Kontaktbereichs ändert sich während der Bewegung.	Mausbewegungen und Zeichen-/Eingabestiftstriche liefern präzise x-y-Koordinaten. Der Tastaturfokus ist explizit.	Identisch mit der Maus.
	Es gibt keinen Mauszeiger, der Sie beim Zielen unterstützt.	Der Mauszeiger, der Stift/Tablettstift-Cursor und der Tastaturfokus unterstützen das Zielen.	Identisch mit der Maus.
Menschliche Anatomie	Fingerspitzenbewegungen sind ungenau, da eine gerade Bewegung mit einem oder mehreren Fingern schwierig ist. Dies liegt an der Krümmung der Handgelenke und der Anzahl der Gelenke, die an der Bewegung beteiligt sind.	Es ist einfacher, eine gerade Bewegung mit der Maus oder dem Stift/Tablettstift durchzuführen, da die Hand, die sie steuert, eine kürzere physische Distanz zurücklegt als der Cursor auf dem Bildschirm.	Identisch mit der Maus.
	Einige Bereiche auf der Touch-Oberfläche eines Displaygeräts können aufgrund der Fingerhaltung und des Griffs des Benutzers auf dem Gerät schwer zu erreichen sein.	Die Maus und der Stift/Tablettstift können jeden Teil des Bildschirms erreichen, während jedes Bedienelement über die Tastatur durch die Tab-Reihenfolge zugänglich sein sollte.	Die Fingerhaltung und der Griff können ein Problem sein.
	Objekte werden möglicherweise von einer oder mehreren Fingerspitzen oder der Hand des Benutzers verdeckt. Dies wird als Okklusion bezeichnet.	Indirekte Eingabegeräte verursachen keine Okklusion.	Identisch mit der Maus.
Objektstatus	Die Toucheingabe verwendet ein Modell mit zwei Status: Die Touch-Oberfläche eines Anzeigegeräts wird entweder berührt (ein) oder nicht berührt (aus). Es gibt keinen Hover-Zustand, der zusätzliches visuelles Feedback auslösen kann.	Eine Maus, ein Stift/Stylus und eine Tastatur verfügen über ein Drei-Zustand-Modell: oben (aus), unten (ein) und Schweben (Fokus). Mit Hover können Benutzer durch Tooltips, die mit Benutzeroberflächen-Elementen verknüpft sind, etwas entdecken und lernen. Hover- und Fokuseffekte können anzeigen, welche Objekte interaktiv sind und helfen auch bei der Zielführung.	Identisch mit der Maus.
Umfassende Interaktion	Unterstützt Multi-Touch: mehrere Eingabepunkte (Fingerspitzen) auf einer Touch-Oberfläche.	Unterstützt einen einzelnen Eingabepunkt.	Wie Berührung.
	Unterstützt die direkte Manipulation von Objekten durch Gesten wie Tippen, Ziehen, Wischen, Zusammenziehen und Drehen.	Keine Unterstützung für direkte Manipulationen, da Maus, Stift/Tablettstift und Tastatur indirekte Eingabegeräte sind.	Identisch mit der Maus.

Hinweis

Indirekte Eingaben haben den Vorteil von mehr als 25 Jahren Verfeinerung. Funktionen wie durch Hover ausgelöste QuickInfos wurden entwickelt, um die Erkundung der Benutzeroberfläche speziell für Eingaben mit Touchpad, Maus, Stift/Stylus und Tastatur zu erleichtern. Diese Funktionen der Benutzeroberfläche wurden für die reichhaltige Erfahrung, die die Toucheingabe bietet, umgestaltet, ohne die Benutzererfahrung für andere Geräte zu beeinträchtigen.

Verwenden von Touchfeedback

Angemessenes visuelles Feedback während der Interaktionen mit Ihrer App hilft Benutzern zu erkennen, zu lernen und sich darauf einzustellen, wie ihre Interaktionen sowohl von der App als auch von der Windows-Plattform interpretiert werden. Visuelles Feedback kann erfolgreiche Interaktionen anzeigen, den Systemstatus übermitteln, das Gefühl der Kontrolle verbessern, Fehler reduzieren, dem Benutzer helfen, das System und das Eingabegerät zu verstehen, und die Interaktion fördern.

Visuelles Feedback ist von entscheidender Bedeutung, wenn sich der Benutzer bei Aktivitäten, die Genauigkeit und Präzision in Bezug auf den Standort erfordern, auf Berührungseingaben verlässt. Zeigen Sie ein Feedback an, wann und wo auch immer eine Berührungseingabe erkannt wird, um dem Benutzer zu helfen, die von Ihrer App und ihren Steuerelementen definierten Regeln für die Zielgruppenadressierung zu verstehen.

Zielbestimmung

Die Zielgruppenadressierung wird durch Folgendes optimiert:

• Berührbare Zielgrößen

  Klare Größen-Richtlinien sorgen dafür, dass Anwendungen eine komfortable Benutzeroberfläche bieten, in der Objekte und Steuerelemente enthalten sind, die einfach und sicher anvisiert werden können.

• Kontaktgeometrie

  Der gesamte Kontaktbereich des Fingers bestimmt das höchstwahrscheinliche Zielobjekt.

• Scrubbing (Bereinigung)

  Elemente innerhalb einer Gruppe lassen sich leicht umgruppieren, indem Sie den Finger zwischen ihnen hin und her bewegen (z.B. Optionsfelder). Das aktuelle Element wird aktiviert, wenn die Toucheingabe losgelassen wird.

• Schaukelnd

  Dicht gepackte Elemente (z. B. Hyperlinks) lassen sich leicht neu anvisieren, indem Sie den Finger nach unten ziehen und, ohne zu schieben, über die Elemente hin- und herbewegen. Aufgrund der Okklusion, wird das aktuelle Element über ein Tooltip oder die Statusleiste identifiziert und aktiviert, wenn die Toucheingabe losgelassen wird.

Genauigkeit

Design für lockere Interaktionen mithilfe von:

• Schnapp-Punkte, die das Anhalten an den gewünschten Speicherorten erleichtern können, wenn Benutzer mit Inhalten interagieren.
• Direktionale „Schienen“, die bei der vertikalen oder horizontalen Verschiebung helfen können, auch wenn die Hand in einem leichten Bogen bewegt wird. Weitere Informationen finden Sie in den Richtlinien für die Verschiebung.

Verdeckung

Finger- und Hand-Okklusion wird durch Folgendes vermieden:

• Größe und Positionierung der Benutzeroberfläche

  Sorgen Sie dafür, dass Benutzeroberflächen-Elemente groß genug sind, damit sie nicht vollständig von einem Fingerspitzen-Kontaktbereich abgedeckt werden können.

  Positionieren Sie Menüs und Popups nach Möglichkeit über dem Kontaktbereich.

• QuickInfos

  Tooltips anzeigen, wenn ein Benutzer Fingerkontakt auf einem Objekt beibehält. Dies ist nützlich, um die Objektfunktionalität zu beschreiben. Der Benutzer kann die Fingerspitze vom Objekt wegziehen, um das Aufrufen der QuickInfo zu vermeiden.

  Bei kleinen Objekten sollten QuickInfos so positioniert werden, dass sie nicht von der Kontaktfläche der Fingerspitze abgedeckt werden. Dies ist hilfreich für die Zielbestimmung.

• Griffe für Präzision

  Wenn Präzision erforderlich ist (z.B. bei der Textauswahl), sollten Auswahlgriffe bereitgestellt werden, die versetzt sind, um die Präzision zu verbessern. Weitere Informationen finden Sie unter Guidelines zum Auswählen von Text und Bildern (Windows Runtime Apps).

Zeitsteuerung

Vermeiden Sie zeitgesteuerte Modusänderungen zugunsten der direkten Manipulation. Die direkte Manipulation simuliert die direkte physische Behandlung eines Objekts in Echtzeit. Das Objekt reagiert, wenn die Finger verschoben werden.

Eine zeitgesteuerte Interaktion tritt dagegen nach einer Touchinteraktion auf. Zeitgesteuerte Interaktionen hängen in der Regel von unsichtbaren Schwellenwerten wie Zeit, Entfernung oder Geschwindigkeit ab, um zu bestimmen, welcher Befehl ausgeführt werden soll. Zeitgesteuerte Interaktionen haben kein visuelles Feedback, bis das System die Aktion ausführt.

Die direkte Manipulation bietet eine Reihe von Vorteilen gegenüber zeitgesteuerten Interaktionen:

• Durch sofortiges visuelles Feedback während der Interaktion fühlen sich die Benutzer engagierter, selbstbewusster und kontrollierter.
• Direkte Manipulationen machen es sicherer, ein System zu erforschen, weil sie umkehrbar sind - die Benutzer können ihre Aktionen auf logische und intuitive Weise leicht rückgängig machen.
• Interaktionen, die sich direkt auf Objekte auswirken und die Interaktionen der realen Welt nachahmen, sind intuitiver, leichter zu entdecken und einprägsamer. Sie verlassen sich nicht auf verdeckte oder abstrakte Interaktionen.
• Zeitgesteuerte Interaktionen können schwierig ausgeführt werden, da Benutzer beliebige und unsichtbare Schwellenwerte erreichen müssen.

Darüber hinaus werden die folgenden Punkte dringend empfohlen:

• Manipulationen sollten nicht durch die Anzahl der verwendeten Finger unterschieden werden.
• Interaktionen sollten zusammengesetzte Manipulationen unterstützen. Zum Beispiel können Sie durch Auf- und Zuziehen zoomen und durch Ziehen der Finger schwenken.
• Interaktionen sollten nicht nach Zeit unterschieden werden. Dieselbe Interaktion sollte unabhängig von der Zeit, die für ihre Durchführung benötigt wird, dasselbe Ergebnis haben. Zeitbasierte Aktivierungen führen obligatorische Verzögerungen für Benutzer ein und beeinträchtigen sowohl die immersive Natur der direkten Manipulation als auch die Wahrnehmung der Systemreaktionsfähigkeit.

  Hinweis

  Eine Ausnahme besteht darin, dass Sie bestimmte zeitgesteuerte Interaktionen verwenden, um das Lernen und Erkunden (z.B. Drücken und Halten) zu unterstützen.

• Angemessene Beschreibungen und visuelle Hinweise haben einen großen Einfluss auf die Nutzung von fortgeschrittenen Interaktionen.

App-Ansichten

Optimieren Sie die Benutzerinteraktion über die Schwenk-/Scroll- und Zoom-Einstellungen Ihrer App-Anzeigen. Eine App-Anzeige gibt vor, wie ein Benutzer auf Ihre App und deren Inhalt zugreift und sie bearbeitet. Anzeigen bieten auch Verhaltensweisen wie z.B. Trägheit, Inhaltsbegrenzungssprung und Andockpunkte.

Schwenk- und Scroll-Einstellungen des ScrollViewer-Steuerelements diktieren, wie Benutzer innerhalb einer einzelnen Anzeige navigieren, wenn der Inhalt der Anzeige nicht in den Anzeigebereich passt. Eine einzelne Ansicht kann z. B. eine Seite einer Zeitschrift oder eines Buches, die Ordnerstruktur eines Computers, eine Bibliothek mit Dokumenten oder ein Fotoalbum sein.

Die Zoomeinstellungen gelten sowohl für den optischen Zoom (der vom ScrollViewer-Steuerelement unterstützt wird) als auch für das semantische Zoom-Steuerelement. Der semantische Zoom ist eine für die Berührung optimierte Technik zur Darstellung und Navigation großer Mengen zusammenhängender Daten oder Inhalte in einer einzigen Anzeige. Er funktioniert mithilfe von zwei unterschiedlichen Klassifizierungsmodi oder Zoomstufen. Dies entspricht dem Verschieben und Scrollen innerhalb einer einzelnen Anzeige. Schwenken und Scrollen können in Verbindung mit dem semantischen Zoom verwendet werden.

Verwenden Sie App-Anzeigen und -Ereignisse, um das Schwenk-/Scroll- und Zoomverhalten zu ändern. Dies kann eine reibungslosere Interaktion ermöglichen, als dies durch die Verarbeitung von Zeiger- und Gestenereignissen möglich ist.

Weitere Informationen zu den Ansichten der App finden Sie unter Steuerelemente, Layouts und Text.

Angepasste Touch-Interaktionen

Wenn Sie Ihre eigene Interaktionsunterstützung implementieren, denken Sie daran, dass die Benutzer eine intuitive Erfahrung erwarten, die eine direkte Interaktion mit den Benutzeroberflächen-Elementen in Ihrer App beinhaltet. Es wird empfohlen, Ihre benutzerdefinierten Interaktionen in den Plattform-Kontroll-Bibliotheken so zu modellieren, dass Alles konsistent und auffindbar bleibt. Die Steuerelemente in diesen Bibliotheken bieten dem Benutzer ein umfassendes Interaktionserlebnis, einschließlich Standardinteraktionen, animierte Physikeffekte, visuelles Feedback und Bedienungshilfen. Erstellen Sie nur dann benutzerdefinierte Interaktionen, wenn es eine klare, genau definierte Anforderung gibt und die grundlegenden Interaktionen Ihr Szenario nicht unterstützen.

Von Bedeutung

Windows 11 und neuer

Einige Interaktionen mit drei und vier Fingern funktionieren in Windows-Apps standardmäßig nicht mehr.

Standardmäßig werden nun Drei- und Vier-Finger-Touch-Interaktionen vom System für Vorgänge wie das Umschalten oder Minimieren von Fenstern und das Wechseln von virtuellen Desktops verwendet. Da diese Interaktionen jetzt auf Systemebene behandelt werden, kann die Funktionalität Ihrer App von dieser Änderung betroffen sein.

Um Interaktionen mit drei oder vier Fingern innerhalb einer Anwendung zu unterstützen, wurde eine neue Benutzereinstellung eingeführt, die angibt, ob das System diese Interaktionen verarbeitet oder nicht:

Bluetooth & Geräte > Touch > „Drei- und Vierfinger-Touchgesten“

Bei Festlegung auf „Ein“ (Standardeinstellung) behandelt das System alle Interaktionen mit drei und vier Fingern (Apps können sie nicht unterstützen).

Bei Festlegung auf „Aus“ können Interaktionen mit drei und vier Fingern von Apps unterstützt werden (sie werden nicht vom System behandelt).

Wenn Ihre Anwendung diese Interaktionen unterstützen muss, wird empfohlen, Die Benutzer über diese Einstellung zu informieren und einen Link bereitzustellen, über den Windows-Einstellungen auf der relevanten Seite gestartet werden (ms-settings:devices-touch). Weitere Informationen finden Sie unter "Windows-Einstellungen starten".

Um individuelle Touch-Unterstützung zu bieten, können Sie verschiedene UIElement-Ereignisse verarbeiten. Diese Ereignisse werden in drei Abstraktionsebenen gruppiert.

• Statische Gestenereignisse werden nach Abschluss einer Interaktion ausgeführt. Gestenereignisse umfassen Tapped, DoubleTapped, RightTapped und Holding.

  Sie können Gestenereignisse für bestimmte Elemente deaktivieren, indem Sie IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled und IsHoldingEnabled auf false festlegen.

• Zeigerereignisse wie PointerPressed und PointerMoved bieten Details auf niedriger Ebene für jeden Touchkontakt, einschließlich Zeigerbewegung und die Fähigkeit, zwischen Presse- und Veröffentlichungsereignissen zu unterscheiden.

  Ein Zeiger ist ein generischer Eingabetyp mit einem einheitlichen Ereignismechanismus. Er stellt grundlegende Informationen zur Verfügung, wie z.B. die Bildschirmposition auf der aktiven Eingabequelle, welche Toucheingabe, Touchpad, Maus oder Stift sein kann.

• Manipulationsgesten-Ereignisse, wie z.B. ManipulationStarted, zeigen eine laufende Interaktion an. Sie werden ausgelöst, wenn der Benutzer ein Element berührt, und bleiben so lange aktiv, bis der Benutzer den Finger hebt oder die Manipulation abgebrochen wird.

  Manipulationsereignisse umfassen Multitouch-Interaktionen wie Zoomen, Schwenken oder Drehen sowie Interaktionen, die Trägheits- und Geschwindigkeitsdaten wie Ziehen verwenden. Die von den Manipulationsereignissen bereitgestellten Informationen identifizieren nicht die Form der ausgeführten Interaktion, sondern umfassen Daten wie Position, Übersetzungsdelta und Geschwindigkeit. Sie können diese Touchdaten verwenden, um den Typ der Interaktion zu bestimmen, die ausgeführt werden soll.

Hier ist der grundlegende Satz von Fingereingabegesten, die von WinUI unterstützt werden.

Name	Typ	Description
Tippen	Statische Geste	Ein Finger berührt den Bildschirm und geht nach oben.
Drücken und halten	Statische Geste	Ein Finger berührt den Bildschirm und bleibt an der Stelle.
Gleiten	Manipulationsgeste	Einer oder mehrere Finger berühren den Bildschirm und bewegen sich in dieselbe Richtung.
Swipe	Manipulationsgeste	Einer oder mehrere Finger berühren den Bildschirm und bewegen sich in kurzer Distanz in dieselbe Richtung.
Drehung	Manipulationsgeste	Zwei oder mehr Finger berühren den Bildschirm und bewegen sich im Uhrzeigersinn oder gegen den Uhrzeigersinn.
Pinch	Manipulationsgeste	Zwei oder mehr Finger berühren den Bildschirm und bewegen sich näher zusammen.
Dehnen	Manipulationsgeste	Zwei oder mehr Finger berühren den Bildschirm und bewegen sich weiter auseinander.

Gestikereignisse

Ausführliche Informationen zu einzelnen Steuerelementen finden Sie in der Steuerelementliste.

Zeigerereignisse

Zeigerereignisse werden von einer Vielzahl aktiver Eingabequellen ausgelöst, einschließlich Toucheingabe, Touchpad, Stift und Maus (sie ersetzen herkömmliche Mausereignisse.)

Zeigerereignisse basieren auf einem einzelnen Eingabepunkt (Finger, Stiftspitze, Mauszeiger) und unterstützen keine geschwindigkeitsbasierten Interaktionen.

Hier ist eine Liste der Zeigerereignisse und deren zugehöriges Ereignisargument.

Ereignis oder Klasse	Description
PointerPressed	Tritt auf, wenn ein Finger den Bildschirm berührt.
ZeigerFreigegeben	Tritt auf, wenn derselbe Berührungskontakt aufgehoben wird.
ZeigerBewegt	Tritt auf, wenn der Zeiger über den Bildschirm gezogen wird.
Zeigereingabe	Tritt auf, wenn ein Zeiger in den Treffertestbereich eines Elements wechselt.
PointerExited	Tritt auf, wenn ein Zeiger den Treffertestbereich eines Elements verlässt.
EingabeAbgebrochen	Tritt auf, wenn ein Berührungskontakt auf abnormale Weise verloren geht.
ZeigererfassungVerloren	Tritt auf, wenn eine Zeigererfassung von einem anderen Element übernommen wird.
PointerWheelChanged	Tritt auf, wenn sich der Delta-Wert eines Mausrads ändert und wenn die Finger auf dem Touchpad zusammengeführt werden.
PointerRoutedEventArgs	Stellt Daten für alle Zeigerereignisse bereit.

Das folgende Beispiel zeigt, wie Sie die PointerPressed-, PointerReleased- und PointerExited-Ereignisse verwenden, um eine Tippinteraktion für ein Rectangle-Objekt zu behandeln.

Zunächst wird ein Rechteck namens touchRectangle in der Extensible Application Markup Language (XAML) erstellt.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Als Nächstes werden Listener für die Ereignisse PointerPressed, PointerReleased und PointerExited angegeben.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Schließlich erhöht der PointerPressed-Ereignishandler die Höhe und Breite des Rechtecks, während die PointerReleased- und PointerExited-Ereignishandler die Höhe und Breite wieder auf ihre Anfangswerte festlegen.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Manipulationsereignisse

Verwenden Sie Manipulationsereignisse in Ihrer App, wenn Sie Interaktionen mit mehreren Fingern oder Interaktionen, die Geschwindigkeitsdaten erfordern, unterstützen müssen.

Sie können Manipulationsereignisse verwenden, um Interaktionen wie Ziehen, Zoomen und Halten zu erkennen.

Hinweis

Das Touchpad löst keine Manipulationsereignisse aus. Stattdessen werden Zeiger-Ereignisse für Touchpad-Eingaben ausgelöst.

Hier ist eine Liste der Manipulationsereignisse und deren zugehöriges Ereignisargument.

Ereignis oder Klasse	Description
ManipulationStarting-Ereignis	Tritt auf, wenn der Bearbeitungsprozessor zum ersten Mal erstellt wird.
ManipulationStarted-Ereignis	Tritt auf, wenn ein Eingabegerät eine Manipulation des UI-Elements beginnt.
ManipulationDelta-Ereignis	Tritt auf, wenn das Eingabegerät die Position während einer Manipulation ändert.
ManipulationInertiaStarting-Ereignis	Tritt auf, wenn das Eingabegerät den Kontakt mit dem Benutzeroberflächen-Element während einer Manipulation verliert und die Trägheitsbewegung beginnt.
ManipulationCompleted-Ereignis	Tritt auf, wenn eine Manipulation und der Trägheitseffekt auf das UI-Element abgeschlossen sind.
ManipulationStartingRoutedEventArgs	Stellt Daten für das ManipulationStarting-Ereignis bereit.
ManipulationStartedRoutedEventArgs	Stellt Daten für das ManipulationStarted-Ereignis bereit.
ManipulationDeltaRoutedEventArgs	Stellt Daten für das ManipulationDelta-Ereignis bereit.
ManipulationInertiaStartingRoutedEventArgs	Stellt Daten für das ManipulationInertiaStarting-Ereignis bereit.
Manipulationsgeschwindigkeiten	Beschreibt die Geschwindigkeit, mit der Manipulationen auftreten.
ManipulationCompletedRoutedEventArgs	Stellt Daten für das ManipulationCompleted-Ereignis bereit.

Eine Geste besteht aus einer Reihe von Manipulationsereignissen. Jede Geste beginnt mit einem ManipulationStarted-Ereignis, z.B. wenn ein Benutzer den Bildschirm berührt.

Als Nächstes wird mindestens ein ManipulationDelta-Ereignis ausgelöst. Wenn Sie beispielsweise den Bildschirm berühren und dann den Finger über den Bildschirm ziehen. Schließlich wird ein ManipulationCompleted-Ereignis ausgelöst, wenn die Interaktion abgeschlossen ist.

Hinweis

Wenn Sie keinen Touchscreen-Monitor haben, können Sie den Manipulations-Event-Code im Simulator mit einer Maus- und Mausradschnittstelle testen.

Das folgende Beispiel zeigt, wie Sie die ManipulationDelta-Ereignisse verwenden, um eine Slide-Interaktion auf einem Rechteck auszuführen und es über den Bildschirm zu bewegen.

Zunächst wird in XAML ein Rechteck mit dem Namen touchRectangle mit einer Höhe und Breite von 200 erstellt.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Als Nächstes wird ein globaler TranslateTransform mit dem Namen dragTranslation zum Übersetzen des Rechtecks erstellt. Ein ManipulationDelta-Ereignislistener wird für das Rechteck angegeben, und dragTranslation wird dem RenderTransform des Rechtecks hinzugefügt.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Zum Schluss wird im ManipulationDelta-Ereignishandler die Position des Rechtecks aktualisiert, indem mittels TranslateTransform die Eigenschaft Delta genutzt wird.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Geroutete Ereignisse

Alle hier aufgeführten Zeigerereignisse, Gestikereignisse und Manipulationsereignisse werden als Routingereignisse implementiert. Das bedeutet, dass das Ereignis möglicherweise von anderen Objekten als dem, das ursprünglich das Ereignis ausgelöst hat, bearbeitet werden kann. Aufeinanderfolgende übergeordnete Elemente in einem Objektbaum, wie z.B. die übergeordneten Container eines Benutzeroberflächen-Elements oder die Root-Seite Ihrer App, können sich dafür entscheiden, diese Ereignisse zu behandeln, auch wenn das ursprüngliche Element dies nicht tut. Umgekehrt kann jedes Objekt, welches das Ereignis behandelt, das Ereignis als behandelt markieren, so dass es kein übergeordnetes Element mehr erreicht. Weitere Informationen zum Routingereignis-Konzept und zur Auswirkung darauf, wie Sie Handler für Routingereignisse schreiben, finden Sie unter Übersicht über Ereignisse und Routingereignisse.

Von Bedeutung

Müssen Zeigerereignisse für ein UIElement in einer scrollbaren Ansicht (z. B. einem ScrollViewer- oder ListView-Objekt) verarbeitet werden, müssen Sie die Unterstützung für Manipulationsereignisse für das Element in der Ansicht explizit deaktivieren, indem Sie UIElement.CancelDirectmanipulation() aufrufen. Um Manipulationsereignisse in der Ansicht wieder zu aktivieren, rufen Sie UIElement.TryStartDirectManipulation() auf.

Gebote und Verbote

• Entwerfen Sie Anwendungen mit Touchinteraktion als primäre erwartete Eingabemethode.
• Stellen Sie visuelles Feedback für alle Arten von Interaktionen bereit (Touch, Stift, Tablettstift, Maus usw.)
• Optimieren Sie die Zielanpassung, indem Sie die Größe des Berührungsziels, die Kontaktgeometrie, das Scrubbing und das Wippen anpassen.
• Optimieren Sie die Genauigkeit durch die Verwendung von Andockpunkten und richtungsgerichteten „Schienen“.
• Stellen Sie QuickInfos und Handles bereit, um die Fingereingabegenauigkeit für eng verpackte Benutzeroberflächen-Elemente zu verbessern.
• Verwenden Sie nach Möglichkeit keine zeitgesteuerten Interaktionen (Beispiel für geeignete Verwendung: Berühren und Halten).
• Verwenden Sie nach Möglichkeit nicht die Anzahl der verwendeten Finger, um die Manipulation zu unterscheiden.

Verwandte Artikel

• Behandeln von Zeigereingaben
• Identifizieren von Eingabegeräten

Beispiele

• Grundlegendes Eingabebeispiel
• Beispiel für niedriglatenz-Eingabebeispiel
• Benutzerinteraktionsmodusbeispiel
• Beispiel für visuelle Fokusdarstellungen

Archivbeispiele

• Input: Beispiel für Gerätefunktionen
• Input: Beispiel für XAML-Benutzereingabeereignisse
• beispielXAML scrollen, verschieben und zoomen
• Input: Gesten und Manipulationen mit GestureRecognizer