Schnellstart: Toucheingabe (Windows-Runtime-Apps mit C#/VB/C++ und XAML)

Applies to Windows and Windows Phone

Geräte verfügen oft über Multitouchbildschirme, die es Benutzern ermöglichen, gleichzeitig mehrere Finger für verschiedene Eingabeinteraktionen wie Tippen, Ziehen oder Zusammendrücken zu verwenden. Die Windows-Runtime bietet eine Reihe unterschiedlicher Mechanismen zur Behandlung von Toucheingaben, mit deren Hilfe Sie eine immersive, benutzerfreundliche Umgebung schaffen können. In dieser Schnellstartanleitung werden die Grundlagen der Toucheingabe in einer Windows-Runtime-App mit C++, C# oder Visual Basic erläutert. Weitere Codebeispiele finden Sie unter Eingabebeispiel.

Wenn das Entwickeln von Windows-Runtime-Apps mit C++, C# oder Visual Basic für Sie neu ist,:  lesen Sie die Informationen in diesen Themen, um sich mit den hier erläuterten Technologien vertraut zu 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-Runtime-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 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 Windows Store-Apps diese Funktionalität in Aktion an.

Eingabe: Beispiel für XAML-Benutzereingabeereignisse

Eingabe: Beispiel für Gerätefunktionen

Eingabe: Beispiel für Bearbeitungen und Bewegungen (C++)

Eingabe: Beispiel für Fingereingabe-Treffertests

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

Voraussetzungen

Es wird davon ausgegangen, dass Sie eine einfache Windows-Runtime-App mit C++, C# oder Visual Basic erstellen können.

Für dieses Lernprogramm ist Folgendes erforderlich:

Richtlinien für die Benutzeroberfläche (Bewährte Methoden)

Die Plattformsteuerelementbibliotheken (HTML und XAML) bieten umfassende Funktionen für 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.

Einführung in die Fingereingabe

Viele Geräte verwenden die Toucheingabe für den Großteil der Benutzereingaben. Multitouchbildschirme ermöglichen dem Benutzer eine natürliche Interaktion mit dem Gerät. Durch die Unterstützung für Toucheingabe und entsprechende Interaktionen können Sie die Benutzerfreundlichkeit Ihrer Apps erheblich verbessern. Gestalten Sie die Unterstützung für die Fingereingabe jedoch sorgfältig, um eine optimale Benutzererfahrung sicherzustellen. Achten Sie auch darauf, dass die App herkömmliche Maus- und Tastatureingaben auch bei optimierter Fingereingabe zulässt.

Es gibt verschiedene Möglichkeiten, wie Sie die Toucheingabe in Ihre Windows-Runtime-Apps mit C++, C# oder Visual Basic einbinden können. Die integrierte Steuerelementbibliothek bietet eine Standardunterstützung für Finger-, Maus- und Tastatureingabe mit standardmäßigen Interaktionen, animierten physischen Effekten und visuellem Feedback.

Wenn Sie keine angepasste Toucheingabeunterstützung benötigen, können Sie die vom Framework bereitgestellten Steuerelemente verwenden. Sie finden dann in dieser Schnellstartanleitung noch einige Richtlinien zur Optimierung der Toucheingabe.

Sie können auch eine eigene Toucheingabe- und Interaktionsunterstützung implementieren. Denken Sie jedoch daran, dass sich Benutzer eine intuitive Erfahrung wünschen und direkt mit den Elementen der App interagieren möchten. Nehmen Sie die integrierte Unterstützung als Ausgangspunkt für Anpassungen, damit die Steuerelemente einfach bleiben und leicht zu finden sind. Stellen Sie außerdem immer ein direktes visuelles Feedback für alle Interaktionen bereit, um den Benutzer nicht zu verunsichern und weitere Aktionen zu fördern.

Um eine benutzerdefinierte Fingereingabeunterstützung bereitzustellen, können Sie UIElement-Ereignisse behandeln, die in drei verschiedene Abstraktionsschichten gruppiert sind. Mit Ereignissen auf höherer Ebene, z. B. Tapped, können Sie auf einfache Interaktionen reagieren. Zeigerereignisse stellen Details zu unteren Ebenen bereit, z. B. Zeigerbewegung und Unterscheidung zwischen Bewegungen zum Drücken bzw. Loslassen. Bearbeitungsereignisse liefern Details zu Ebenen, die sogar noch weiter darunter liegen, beispielsweise Geschwindigkeit und Trägheit der Bewegungen und Mehrfingereingabe-Daten. Diese Ereignisse unterstützen standardmäßig sowohl die Finger- als auch Mauseingabe. Sie stellen aber auch Infos bereit, anhand derer Sie bei Bedarf das tatsächliche Eingabegerät ermitteln können.

Bewegungen

Bewegungen stellen eine Möglichkeit dar, Fingereingabedaten wie Tippen, Ziehen und Zusammendrücken auf hoher Ebene zu interpretieren. Folgende allgemeine Bewegungen werden in Windows 8 unter anderem verwendet:

InteraktionBeschreibung
TippenDer Bildschirm wird mit einem Finger berührt, und der Finger wird wieder angehoben.
Gedrückt haltenEin Finger berührt den Bildschirm und bleibt auf dem Bildschirm.
ZiehenMindestens ein Finger berührt den Bildschirm und bewegt sich in die gleiche Richtung.
StreifenMindestens ein Finger berührt den Bildschirm und bewegt sich um eine kurze Distanz in die gleiche Richtung.
ZusammendrückenMindestens zwei Finger berühren den Bildschirm und bewegen sich aufeinander zu oder auseinander (Aufziehen).
DrehenMindestens zwei Finger berühren den Bildschirm und führen eine Kreisbewegung im oder gegen den Uhrzeigersinn aus.
Aufziehen Mindestens zwei Finger berühren den Bildschirm und bewegen sich weiter auseinander.

 

Sie können auf einfache Finger- oder Mausbewegungen reagieren, indem Sie Ereignisse auf hoher Ebene behandeln, z. B. Tapped, DoubleTapped, RightTapped und Holding. Sie können diese Gesten für bestimmte Elemente auch deaktivieren, indem Sie IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled und IsHoldingEnabled auf false festlegen.

Mit Zeigerereignissen wie PointerMoved können einfache Interaktionen durch Einfingereingabe (z. B. Ziehen) unterstützt werden.

Verwenden Sie die Bearbeitungsereignisse für Interaktionen durch Mehrfingereingabe (z. B. Zusammenführen der Finger) und Interaktionen, die Trägheits- und Geschwindigkeitsdaten nutzen (z. B. Ziehen). Die von den Bearbeitungsereignissen bereitgestellten Informationen liegen nicht in Form der ausgeführten Interaktion vor. Sie werden als Fingereingabedaten, beispielsweise Position, Übersetzungsdelta und Geschwindigkeit, angegeben. Mit diesen Fingereingabedaten können Sie die Art der ausgeführten Interaktion ermitteln. Sie sind jedoch dafür verantwortlich, diese Informationen in die entsprechende Interaktion umzuwandeln.

Verwenden von Zeigerereignissen

Zeigerereignisse unterstützen automatisch die Finger- und Mauseingabe und ersetzen herkömmlichere Mausereignisse.

Fingereingabebasierte Zeigerereignisse sind auf Einfingereingabe-Interaktionen beschränkt, z. B. das Tippen und Ziehen. Sie unterstützen auch keine Interaktionen, die auf Geschwindigkeit basieren. Einzelne Fingerberührungen auf dem Bildschirm werden in entsprechende Windows-Runtime-Zeigerereignisse konvertiert. Beispiele: PointerPressed, wenn Sie den Finger auf den Bildschirm legen, PointerReleased, wenn Sie den Finger heben, und PointerMoved, wenn Sie den Finger über den Bildschirm ziehen. Andere Zeigerereignisse, die von einer Windows-Runtime-App mit C++, C# oder Visual Basic verwendet werden, sind PointerExited und PointerEntered. PointerRoutedEventArgs sind die Ereignisargumente für Zeigerereignisse.

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

Zuerst wird ein Rectangle mit dem Namen TestRectangle in XAML erstellt, und Ereignishandler werden für die Ereignisse PointerPressed, PointerReleased und PointerExited hinzugefügt.



<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

Anschließend werden Ereignishandler für die Zeigerereignisse erstellt. Der PointerPressed-Ereignishandler erhöht Height und Width von Rectangle. Der PointerReleased-Ereignishandler legt wieder die Ausgangswerte für Height und Width fest. Schließlich legt auch der PointerExited-Ereignishandler wieder die Ausgangswerte für Height und Width fest.



private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event
    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

Verwenden von Bearbeitungsereignissen

Wenn Sie die Mehrfingereingabe-Interaktionen oder Interaktionen, die Geschwindigkeitsdaten verwenden, in Ihrer App unterstützen müssen, benötigen Sie die Bearbeitungsereignisse. Sie können mit Bearbeitungsereignissen Interaktionen wie Ziehen, Zusammendrücken und Halten erkennen. Im Anschluss folgt eine Liste der Bearbeitungsereignisse und zugehörigen Typen für eine Windows-Runtime-App mit C++, C# oder Visual Basic.

Ereignis oder KlasseBeschreibung
ManipulationStarting event Tritt auf, wenn der Bearbeitungsprozessor zuerst erstellt wird.
ManipulationStarted event Tritt auf, wenn ein Eingabegerät mit der Bearbeitung für das UIElement beginnt.
ManipulationDelta event Tritt auf, wenn ein Eingabegerät bei der Bearbeitung die Position ändert.
ManipulationInertiaStarting event Tritt auf, wenn das Eingabegerät während einer Bearbeitung Kontakt mit dem UIElement-Objekt verliert und die Trägheit beginnt.
ManipulationCompleted event Tritt auf, wenn Bearbeitung und Trägheit für das UIElement 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.
ManipulationVelocities Beschreibt die Geschwindigkeit, mit der die Bearbeitung stattfindet.
ManipulationCompletedRoutedEventArgs Stellt Daten für das ManipulationCompleted-Ereignis bereit.

 

Eine Bewegung setzt sich aus einer Reihe von Bearbeitungsereignissen zusammen. Jede Bewegung beginnt mit einem ManipulationStarted-Ereignis (z. B., wenn ein Benutzer den Bildschirm berührt). Anschließend wird mindestens ein ManipulationDelta-Ereignis ausgelöst. Wenn Sie z. B. den Bildschirm berühren und dann den Finger über den Bildschirm ziehen, werden mehrere ManipulationDelta-Ereignisse ausgelöst. Schließlich wird ein ManipulationCompleted-Ereignis ausgelöst, wenn die Interaktion beendet ist.

Hinweis  Wenn Sie keinen Touchscreen besitzen, können Sie Ihren Bearbeitungsereigniscode in der Simulation testen, indem Sie eine Maus- und Mausradschnittstelle verwenden.

Das folgende Beispiel zeigt, wie die ManipulationDelta-Ereignisse verwendet werden, um eine Ziehinteraktion zu behandeln. Das Beispiel erstellt ein Rectangle, das über den Bildschirm gezogen werden kann.

Zuerst wird ein Rectangle in XAML erstellt, mit dem Namen TestRectangle und einer Height und Width von 200.



<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

Anschließend wird ein globales TranslateTransform-Element mit dem Namen dragTranslation erstellt, mit der das Rectangle-Element übersetzt wird. Ein Ereignishandler wird dem Rectangle hinzugefügt, um das ManipulationDelta-Ereignis zu behandeln, und dragTranslation wird zu RenderTransform von Rectangle hinzugefügt. Schließlich wird im ManipulationDelta-Ereignishandler die Position des Rectangle mit der TranslateTransform für die Delta-Eigenschaft aktualisiert.



// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;

// Constructor
public MainPage()
{
    InitializeComponent();

    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

UI-Design und Fingereingaben

Wenn Sie eine eigene Interaktionsunterstützung implementieren, sollten Sie daran denken, dass die Benutzer eine intuitive Umgebung erwarten, die die direkte Interaktion mit den UI-Elementen der App beinhaltet. Es empfiehlt sich, die benutzerdefinierten Interaktionen basierend auf den Plattform-Steuerelementbibliotheken (HTML und XAML) zu modellieren, um auf diese Weise für eine konsistente und intuitive Benutzerumgebung zu sorgen. Die Steuerelemente in diesen Bibliotheken bieten umfassende Funktionen für Benutzerinteraktionen wie Standardinteraktionen, animierte Bewegungseffekte, visuelles Feedback und Barrierefreiheit. Erstellen Sie benutzerdefinierte Interaktionen nur dann, wenn ein eindeutiger, klar umrissener Bedarf besteht und es keine Basisinteraktion gibt, die das gewünschte Szenario unterstützt.

Mit dem Design der Benutzeroberfläche können Sie beeinflussen, wie leicht Ihre App per Fingereingabe zu nutzen ist. Beachten Sie die folgenden Richtlinien, um sicherzustellen, dass Ihre App für die Fingereingabe optimiert ist:

  • Berücksichtigen Sie den Größenunterschied zwischen Mauszeigern und Fingerspitzen. Für die Fingereingabe sind größere UI-Elemente erforderlich, um die Präzision bei der Fingereingabe zu gewährleisten und zu verhindern, das von den Fingern wichtige Informationen verdeckt werden.
  • Stellen Sie immer sofort direktes visuelles Feedback für Fingereingabeinteraktionen bereit. Nutzen Sie beispielsweise Hervorhebungen oder QuickInfo, um das aktuelle Ziel für die Fingereingabe anzugeben und die versehentliche Aktivierung anderer Ziele zu vermeiden.
  • Verwenden Sie physische Effekte wie Beschleunigung und Trägheit, um Interaktionen (z. B. Schwenken) natürlich zu gestalten.
  • Verwenden Sie Andockpunkte und andere Beschränkungen, um dafür zu sorgen, dass die Benutzer einen geeigneten Zustand erreichen.

Weitere Designrichtlinien hinsichtlich der Benutzerführung bei Berührungen finden Sie unter Richtlinien für Benutzerinteraktion.

Routingereignisse

Alle hier erwähnten Zeiger-, Gesten- und Änderungsereignisse werden als Routingereignisse implementiert. Folglich kann das Ereignis potenziell auch von Objekten behandelt werden, bei denen es sich nicht um das Objekt handelt, von dem das Ereignis ursprünglich ausgelöst wurde. Von aufeinander folgenden übergeordneten Elementen in einer Objektstruktur (wie etwa den übergeordneten Containern eines UI-Elements oder dem Page-Stammelement) können diese Ereignisse auch dann behandelt werden, wenn sie vom ursprünglichen Element nicht behandelt werden. Umgekehrt gilt: Ein Objekt, von dem das Ereignis nicht behandelt wird, kann das Ereignis als behandelt markieren, damit es keine übergeordneten Elemente mehr erreicht. Weitere Informationen zum Konzept der Routingereignisse sowie zu den Auswirkungen auf die Erstellung von Handlern für Routingereignisse finden Sie unter Übersicht über Ereignisse und Routingereignisse.

Verwandte Themen

Entwickler
Reaktion auf Benutzerinteraktionen
Entwickeln von Windows-Runtime-Apps (XAML)
Schnellstart: Fingereingabe
Designer
Design für Interaktion per Fingereingabe

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.