Language: HTML | XAML

Reaktion auf Benutzerinteraktionen (XAML)

Applies to Windows and Windows Phone

Hier erfahren Sie mehr über die Benutzerinteraktionsplattform, Eingabequellen (Toucheingabe, Touchpad, Maus, Zeichen-/Eingabestift und Tastatur), Modi (Bildschirmtastatur, Mausrad, Radiergummi des Zeichenstifts usw.) und über die unterstützten Interaktionen.

Es wird erläutert, wie grundlegende Eingabe- und Interaktionsfunktionen kostenfrei bereitgestellt werden, wie die Benutzerinteraktion angepasst werden kann und wie die Interaktionsmuster in den verschiedenen Sprachframeworks zum Einsatz kommen.

Anhand von Richtlinien, bewährten Methoden und Beispielen wird gezeigt, wie Sie die Interaktionsmöglichkeiten ausschöpfen können, um Apps zu erstellen, die interessant und intuitiv zu bedienen sind und den Benutzer begeistern.

Tipp  Dieses Thema enthält spezifische Informationen zum Entwickeln von Apps mit C++, C# oder Visual Basic.

Informationen zu Apps mit JavaScript finden Sie unter Reaktion auf Benutzerinteraktionen (HTML).

Informationen zu Apps mit DirectX mit C++ finden Sie unter Reaktion auf Benutzerinteraktionen (DirectX und C++).

Voraussetzungen:  Wenn Sie noch keine Erfahrung mit der Entwicklung von Apps haben, sollten Sie sich in den folgenden Themen zunächst mit den hier besprochenen Technologien vertraut machen.

Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic

Erstellen Ihrer ersten Windows Store-App mit C++

Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic

Roadmap für Windows Store-Apps mit C++

Informationen zu Ereignissen finden Sie unter Übersicht über Ereignisse und Routingereignisse

App-Features von A bis Z:  In unserer Reihe App-Features von A bis Z können Sie sich genauer über diese Funktion informieren.

Benutzerinteraktion von A bis Z (XAML)

Anpassung der Benutzerinteraktion von A bis Z (XAML)

Richtlinien für die Benutzeroberfläche:  

Die Plattform-Steuerelementbibliotheken (HTML und XAML) bieten umfassende Funktionalität für Windows-Benutzerinteraktionen, u. a. für Standardinteraktionen, animierte Physikeffekte und visuelles Feedback. Wenn Sie keine Unterstützung für angepasste Interaktionen benötigen, sollten Sie diese integrierten Steuerelemente verwenden.

Falls die Funktionalität der Plattformsteuerelemente nicht ausreicht, können Ihnen die folgenden Richtlinien für Benutzerinteraktionen dabei helfen, eine ansprechende, immersive und für alle Eingabemodi einheitliche Interaktionsumgebung bereitzustellen. Diese Richtlinien betreffen in erster Linie Fingereingaben, sie sind jedoch auch für Touchpad-, Maus-, Tastatur- und Stifteingaben relevant.

Beispiele:  Sehen Sie sich unter Beispiele für Apps diese Funktionalität in Aktion an.

Eingabe: Beispiel für Gerätefunktionen

Eingabebeispiel

Eingabe: Gesten und Manipulationen mit GestureRecognizer

Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen

Eingabe: Freihandbeispiel

Übersicht über die Benutzerinteraktionsplattform

Berücksichtigen Sie beim Entwickeln Ihrer Apps Fingereingabeinteraktionen: Fingereingaben werden von immer mehr und immer unterschiedlicheren Geräten unterstützt. Die Interaktion per Fingereingabe ist ein grundlegender Aspekt der Benutzeroberfläche.

Da die Fingereingabe einen vorrangigen Interaktionsmodus für Benutzer darstellt, wurden Windows 8 und Windows Phone für Fingereingaben optimiert, sodass sie sensibel, präzise und benutzerfreundlich ist. Sie können jedoch sicher sein, dass auch bewährte Eingabemethoden (wie etwa Maus, Zeichenstift und Tastatur) in vollem Umfang unterstützt werden und dass die funktionelle Konsistenz zur Fingereingabe gegeben ist (siehe Gesten, Manipulationen und Interaktionen). Viele Benutzer schätzen die vertraute Geschwindigkeit, Präzision und das klare Feedback traditioneller Eingabemethoden. Die Funktionalität dieser einzigartigen und charakteristischen Eingabemethoden wurde nicht beeinträchtigt.

Wenn Sie Interaktionen per Fingereingabe in das Design Ihrer App aufnehmen, können Sie die Benutzerfreundlichkeit erheblich verbessern. Lassen Sie Ihrer Phantasie beim Design dieser Erfahrung freien Lauf, unterstützen Sie eine breite Palette an Funktionen und Einstellungen, und wenden Sie sich an eine möglichst breite Zielgruppe. Auf diese Weise gewinnen Sie mehr Kunden für Ihre App.

Die Benutzerinteraktionsplattform basiert auf Funktionsebenen, die progressive Flexibilität und Leistungsfähigkeit bieten:

Integrierte Steuerelemente

Nutzen Sie die JavaScript-Projektvorlagen und die integrierten Steuerelemente, die über die Sprachframeworks verfügbar gemacht werden, um Benutzern eine umfangreiche Interaktionsplattform zu bieten. Diese Funktionalität kann in der Mehrzahl der Apps problemlos implementiert werden.

Die integrierten Steuerelemente wurden von Grund auf für eine optimale Nutzung per Fingereingabe gestaltet und es wurde sichergestellt, dass alle Eingabemodi einheitliche und interessante Interaktionsmöglichkeiten bieten. Sie unterstützen eine umfassende Reihe von Gesten (Gedrückthalten, Tippen, Ziehen, Streifen, Zusammendrücken, Aufziehen, Drehen usw.) in Verbindung mit direkten Manipulationen (Schwenken, Zoomen, Drehen und Ziehen) und realistischem Trägheitsverhalten, was eine faszinierende und immersive Interaktion ermöglicht, die auf bewährten Methoden basiert und über die gesamte Windows-Plattform hinweg einheitlich ist.

Weitere Informationen zu den Steuerelementbibliotheken finden Sie unter Hinzufügen von Steuerelementen und Inhalten (Windows Store-Apps mit C#/VB/C++ und XAML).

Ansichten

Mithilfe der Einstellungen für Bewegungen/Bildläufe und Zoomstufen können Sie die Interaktionsmöglichkeiten für Benutzer Ihrer App-Ansichten optimieren. Die App-Ansicht bestimmt, wie ein Benutzer auf Ihre App und deren Inhalte zugreift und diese manipuliert. Ansichten stellen außerdem bestimmte Verhaltensweisen bereit, beispielsweise das Trägheitsverhalten, das „Springen“ an Inhaltsgrenzen und die Andockpunkte.

Die Einstellungen für Bewegungen/Bildläufe legen fest, wie Benutzer in einer Ansicht navigieren können, wenn der Inhalt der Ansicht über den Viewport hinausgeht. Dies kann beispielsweise eine Seite in einem Magazin oder Buch, die Ordnerstruktur eines Computers, eine Dokumentbibliothek oder ein Fotoalbum sein.

  • Applies to Windows

Zoomeinstellungen gelten sowohl für den optischen Zoom als auch für das SemanticZoom-Steuerelement. Der semantische Zoom ist eine für Fingereingaben optimierte Technik, um große Bestände verwandter Daten oder Inhalte in einer einzelnen Ansicht mit zwei unterschiedlichen Klassifizierungsmodi (oder Zoomstufen) darzustellen und in diesen zu navigieren. Diese Funktionalität ist mit dem Verschieben und dem Durchführen von Bildläufen (die in Verbindung mit dem semantischen Zoom verwendet werden können) innerhalb einer einzigen Ansicht vergleichbar.

Das Verwenden von App-Ansichten zum Ändern der Verhaltensmuster für Schwenken, Bildlauf und Zoom kann für eine flüssigere Interaktion sorgen, als dies mit der später beschriebenen Behandlung von Zeiger- und Gestikereignissen möglich ist.

Weitere Informationen zu App-Ansichten finden Sie unter Definieren von Layouts und Ansichten.

Weitere Informationen zum Zoomen finden Sie unter Richtlinien für optischen Zoom und Änderung der Fenstergröße oder Richtlinien für semantischen Zoom.

Weitere Informationen zum Schwenken/Bildlauf finden Sie unter Richtlinien für Schwenkung.

Zeiger-, Gestik- und Manipulationsereignisse

Bei einem Zeiger handelt es sich um eine generische Eingabeart mit einem vereinheitlichten Ereignismechanismus, der grundlegende Informationen (wie die Bildschirmposition) für die aktive Eingabequelle (Fingereingabe, Touchpad, Maus oder Stift) zur Verfügung stellt. Gesten können von einfachen statischen Interaktionen wie Tippen bis hin zu komplexeren Manipulationen wie Zoomen, Schwenken und Drehen reichen. Weitere Informationen finden Sie unter Gesten, Manipulationen und Interaktionen.

Hinweis  

Statische Gestikereignisse werden werden ausgelöst, wenn eine Interaktion abgeschlossen ist. Manipulationsgestenereignisse weisen auf eine fortlaufende Interaktion hin. Manipulationsgestenereignisse werden ausgelöst, wenn der Benutzer das Element berührt, und bleiben so lange ausgelöst, bis der Benutzer den Finger vom Element hebt oder die Manipulation abgebrochen wird.

Der Zugriff auf die Zeiger- und Gestikereignisse ermöglicht es Ihnen, die Sprache für Interaktionen per Fingereingabe für Spiele, benutzerdefinierte Steuerelemente und visuelles Feedback zu nutzen und auf diese Weise die Gesten, die Verarbeitung von Roheingabedaten und andere benutzerdefinierte Interaktionen zu erweitern.

Zeigerereignisse

Die folgenden Ereignisse entsprechen Gesten auf niedriger Ebene. Ereignisse auf dieser Ebene ähneln herkömmlichen Mauseingabeereignissen. Im Unterschied zu diesen stellen sie jedoch weitergehende Informationen zur Eingabegeste des Benutzers sowie zum verwendeten Gerät bereit.

EreignisBeschreibung
PointerCaptureLost Dieses Ereignis tritt auf, wenn ein Element den Kontakt zum Zeiger verliert.
PointerEntered Dieses Ereignis tritt auf, wenn der Zeiger in den Bereich eines Elements eintritt.
PointerExited Dieses Ereignis tritt auf, wenn der Zeiger den Bereich eines Elements verlässt.
PointerMoved Dieses Ereignis tritt auf, wenn sich der Zeiger im Bereich eines Elements bewegt.
PointerPressed Dieses Ereignis tritt auf, wenn eine Drückengeste im Bereich eines Elements auftritt.
PointerReleased Dieses Ereignis tritt auf, wenn eine Loslassengeste im Bereich eines Elements auftritt.
PointerWheelChanged Dieses Ereignis tritt auf, wenn das Mausrad vom Benutzer bewegt wird.

 

Verwenden von PointerRoutedEventArgs

Alle Zeigerereignisse verwenden PointerRoutedEventArgs für Ereignisdaten. Neben der bekannten Handled-Eigenschaft und der bekannten OriginalSource-Eigenschaft werden die folgenden Member von dieser Klasse bereitgestellt:

MitgliedBeschreibung
Pointer property Ruft ein Pointer-Objekt ab, das das Eingabegerät sowie den Gerätetyp identifiziert.
GetCurrentPoint method Ruft ein PointerPoint-Objekt ab, das umfassende Informationen über die Zeigerposition und den Gerätezustand beim Auftreten des Ereignisses bereitstellt.
GetIntermediatePoints method Ruft eine Liste von PointerPoint-Objekten ab, die die Positionen und Gerätezustände des Zeigers zwischen dem vorherigen und dem aktuellen Eingabeereignis darstellen. Dies ist hilfreich, um herauszufinden, ob eine Reihe von Zeigerereignissen eine komplexere Geste darstellt.
KeyModifiers property Gibt an, ob eine Zusatztaste wie STRG oder UMSCHALT gleichzeitig mit dem Zeigerereignis gedrückt wird.

 

Zeigererfassung

In einigen Fällen kann es wünschenswert sein, dass PointerMoved-Ereignisse auch dann noch von einem Element empfangen werden können, wenn sich der Zeiger nicht mehr über dem Element befindet. Dies bezeichnet man als Zeigererfassung. Ein solcher Fall ist ein Ziehvorgang, der nicht unterbrochen werden soll, nur weil der Mauszeiger vom Benutzer vorübergehend außerhalb der Elementgrenzen verschoben wird. Wenn ein Element über die Zeigererfassung verfügt, tritt das PointerMoved-Ereignis nicht bei anderen Elementen auf, über die der Mauszeiger bewegt wird.

Die Zeigererfassung kann mit folgenden Methoden aktiviert oder deaktiviert werden: CapturePointer, ReleasePointerCapture und ReleasePointerCaptures. Dies gilt gleichermaßen bei mehreren Eingabegeräten oder Berührungspunkten. Während die Zeigererfassung aktiv ist, können Sie mit der PointerCaptures-Eigenschaft Pointer-Objekte abrufen, die die einzelnen erfassten Zeiger darstellen.

Die Zeigererfassung macht das Drücken der linken Maustaste, der Stifttaste oder mit dem Finger über den gesamten Ziehvorgang hinweg erforderlich. Sobald die Taste losgelassen oder der Finger angehoben wird, geht die Zeigererfassung verloren, und das PointerCaptureLost-Ereignis tritt auf.

Gestikereignisse

Die folgenden Ereignisse entsprechen Gesten auf hoher Ebene. Sie treten bei einigen Benutzeraktionen zusätzlich zu den Ereignissen auf niedriger Ebene auf. Beispielsweise tritt das Tapped-Ereignis nach dem PointerPressed-Ereignis und dem PointerReleased-Ereignis auf. Grundsätzlich sollten Sie ein Ereignis auf hoher Ebene verwenden, es sei denn, Sie müssen auf einen bestimmten Teil einer Geste reagieren. So kann es erforderlich sein, verschiedene Aktionen zum Drücken und Loslassen durchzuführen.

EreignisBeschreibung
Tapped Dieses Ereignis tritt auf, wenn Benutzer auf ein Element klicken oder tippen, falls die zugehörige IsTapEnabled-Eigenschaft nicht auf false festgelegt ist.
RightTapped Dieses Ereignis tritt auf, wenn Benutzer mit der rechten Maustaste auf ein Element klicken oder tippen. Es tritt auch nach einem Holding-Ereignis auf, falls die zugehörige IsRightTapEnabled-Eigenschaft nicht auf false festgelegt ist.
DoubleTapped Dieses Ereignis tritt auf, wenn Benutzer zweimal auf ein Element klicken oder tippen, falls die zugehörige IsDoubleTapEnabled-Eigenschaft nicht auf false festgelegt ist.
Holding Dieses Ereignis tritt auf, wenn der Zeiger über einem Element gedrückt und gehalten wird, falls die zugehörige IsHoldingEnabled-Eigenschaft nicht auf false festgelegt ist. Dieses Ereignis tritt bei Mauseingaben nicht auf. Verwenden Sie bei entsprechenden Mauseingaben stattdessen RightTapped.

 

Obwohl die einzelnen Ereignisse jeweils über einen eigenen Ereignisargumenttyp verfügen, teilen sie eine Reihe von Membern. Sie können in einem Handler für eines dieser Ereignisse ermitteln, ob die Eingabe von einer Maus-, Finger- oder Stifteingabe stammt, indem Sie die PointerDeviceType-Eigenschaft des Ereignisarguments überprüfen. Darüber hinaus können Sie die Koordinaten des Ereignisses relativ zum Bildschirm oder zu einem angegebenen Element ermitteln, indem Sie die GetPosition-Methode des Ereignisarguments aufrufen.

Manipulationsereignisse

Die folgenden Ereignisse entsprechen Gesten auf noch niedriger Ebene. Ereignisse auf dieser Ebene stellen die meisten Informationen über die Eingabegesten von Benutzern bereit.

EreignisBeschreibung
ManipulationStarting Tritt auf, wenn der Bearbeitungsprozessor zuerst erstellt wird.
ManipulationStarted Tritt auf, wenn ein Eingabegerät mit der Bearbeitung für das UIElement beginnt.
ManipulationDelta Tritt auf, wenn ein Eingabegerät bei der Bearbeitung die Position ändert.
ManipulationInertiaStarting Tritt auf, wenn das Eingabegerät während einer Bearbeitung Kontakt mit dem UIElement-Objekt verliert und die Trägheit beginnt.
ManipulationCompleted Tritt auf, wenn Bearbeitung und Trägheit für das UIElement abgeschlossen sind.

 

Diese Ereignisse sind, wie es ihr Name nahe legt, zur Bearbeitung von Elementen auf Ihrer Benutzeroberfläche mithilfe von Maus-, Finger- und Stifteingabeereignissen geeignet. Beispielsweise können Sie diese Ereignisse verwenden, damit Benutzer Elemente über den Bildschirm ziehen können oder um realistische Trägheitseffekte zu ermöglichen. Die verschiedenen Ereignisargumentklassen stellen neben gängigen Eigenschaften wie PointerDeviceType, Handled und OriginalSource detaillierte Informationen zu Position, Änderungen und Geschwindigkeit des Zeigers bereit.

Ein einfaches Beispiel für die Manipulationsereignisse finden Sie unter Schnellstart: Fingereingabe.

Treffertest

Wenn eine Benutzereingabegeste über einem UIElement ausgeführt wird, treten die entsprechenden Ereignisse für dieses Element nur auf, wenn es für die Eingabe sichtbar ist. Andernfalls durchläuft die Geste das Element bis zu einen zugrunde liegenden oder übergeordneten Element in der visuellen Struktur.

Bei einem Treffertest wird ermittelt, ob ein Element für eine Maus-, Touch- oder Stifteingabe sichtbar ist. Treffertests werden von mehreren Faktoren beeinflusst. Sie können jedoch feststellen, ob ein bestimmtes Element Eingabeereignisse auslösen kann, indem Sie die zugehörige IsHitTestVisible-Eigenschaft überprüfen. Diese Eigenschaft gibt true nur dann zurück, wenn das Element die folgenden Anforderungen erfüllt:

  • Der Visibility-Eigenschaftenwert ist Visible.
  • Der Background- oder der Fill-Eigenschaftenwert ist nicht null (Nothing in Visual Basic). Andernfalls liegt Transparenz vor, und das Element ist bei Treffertests nicht sichtbar. Damit ein Element transparent und für Treffertests geeignet ist, muss die entsprechende Eigenschaft auf Transparent und nicht auf null festgelegt sein.
  • Wenn das Element ein Steuerelement ist, muss sein IsEnabled-Eigenschaftenwert auf true sein.

Bei einigen Steuerelementen sind besondere Regeln bezüglich Treffertests zu beachten. So fehlt bei TextBlock und verwandten Steuerelementen die Background-Eigenschaft. Dennoch können im gesamten Bereich des Layoutschlitzes Treffertests durchgeführt werden. Bei dem Image-Steuerelement und dem MediaElement-Steuerelement können Treffertests unabhängig von transparenten Inhalten im definierten Rechteck durchgeführt werden. Ferner gilt, dass, auch wenn die meisten Panel-Klassen für Treffertests nicht infrage kommen, sie dennoch Ereignisse von Benutzereingaben darin enthaltener Elemente behandeln können.

Elemente, die sich an der gleichen Position wie das Ereignis einer Benutzereingabe befinden, können unabhängig davon ermittelt werden, ob sie für Treffertests infrage kommen. Rufen Sie dazu die FindElementsInHostCoordinates-Methode auf. Diese Methode findet die Elemente, wie der Name nahe legt, an einer Position relativ zu einem angegebenen Hostelement. Sie sollten jedoch nicht vergessen, dass sich Transformationen und Layoutänderungen auf das Koordinatensystem eines Elements auswirken und somit die an einer bestimmten Position gefundenen Elemente beeinflussen.

Anpassen der Nutzung Ihrer App

Mithilfe der APIs für die Windows-Runtime-Plattform können Sie die Interaktionsmöglichkeiten Ihrer App noch weiter anpassen und steuern. Beispielsweise möchten Sie vielleicht zusätzliche Konfigurationsoptionen implementieren, wie etwa Mausgeräte mit einer rechten Taste, Radtaste, 4-Wege-Radtaste oder X-Tasten und Zeichenstiftgeräte mit Drucktasten und Radiergummispitzen.

Die meisten Interaktions-APIs befinden sich in den Namespaces Windows.UI.Xaml und Windows.UI.Xaml.Input. Freihandfunktionen werden mithilfe des Windows.UI.Input.Inking-Namespaces und Daten von Eingabegeräten mithilfe des Windows.Devices.Input-Namespaces verfügbar gemacht.

Bedenken Sie Folgendes, bevor Sie mithilfe neuer oder geänderter Gesten und Manipulationen angepasste Interaktionsfunktionen bereitstellen:

  • Bietet eine vorhandene Geste die für Ihre App erforderliche Funktion? Verwenden Sie keine benutzerdefinierte Geste zum Zoomen oder Verschieben, wenn Sie Ihre App einfach zur Unterstützung bzw. Interpretation einer vorhandenen Geste anpassen können.
  • Rechtfertigt die benutzerdefinierte Geste die mögliche Inkonsistenz mit anderen Apps?
  • Erfordert die Geste spezifische Hardwareunterstützung (z. B. eine Anzahl von Kontakten)?
  • Gibt es ein Steuerelement (z. B. ScrollViewer), das die benötigte Interaktionsfunktion bereitstellt? Ist überhaupt eine Geste oder Manipulation nötig, wenn Benutzereingaben eigentlich von einem Steuerelement behandelt werden können?
  • Führt die benutzerdefinierte Geste oder Manipulation zu einer flüssigen und natürlichen Interaktion?
  • Macht die Interaktionsfunktion Sinn? Wenn die Interaktion von Dingen wie der Anzahl von Kontakten, Geschwindigkeit, Zeit (nicht empfohlen) und Trägheit abhängig ist, müssen Sie sicherstellen, dass diese Einschränkungen und Abhängigkeiten konsistent und erkennbar sind. Wie Benutzer "schnell" und "langsam" interpretieren, kann sich z. B. direkt auf die Funktionalität Ihrer App und die Zufriedenheit der Benutzer auswirken.
  • Ist die Geste oder Manipulation von den körperlichen Fähigkeiten des Benutzers abhängig? Ist sie barrierefrei?
  • Genügt ein App-Leistenbefehl oder ein anderer UI-Befehl?

Kurz gesagt: Erstellen Sie benutzerdefinierte Gesten und Manipulationen nur dann, wenn eine eindeutige, klar definierte Notwendigkeit besteht und es keine einfache Geste gibt, die Ihr Szenario unterstützt.

Verwandte Themen

Konzept
Entwickeln von Windows Store-Apps (VB/C#/C++ und XAML)
Design für Interaktion per Fingereingabe

 

 

Anzeigen:
© 2014 Microsoft