Windows Dev Center

Language: HTML | XAML

Reaktion auf Mausinteraktionen (XAML)

Reagieren Sie in Ihren Apps auf Mauseingaben, indem Sie die gleichen einfachen Zeigerereignisse behandeln, die Sie für Finger- und Stifteingaben verwenden.

Mithilfe dieser üblichen UIElement-Ereignisse können Sie grundlegende Eingabefunktionen implementieren, ohne separaten Code für jedes Eingabegerät schreiben zu müssen. Bei Bedarf können Sie jedoch trotzdem die besonderen Funktionen der einzelnen Geräte nutzen (beispielsweise Mausradereignisse). Diese Ereignisse lassen sich nach drei verschiedenen Typen unterscheiden: Zeiger-, Gestik- und Manipulationsereignisse.

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 Mausinteraktionen (HTML).

Informationen zu Apps mit DirectX mit C++ finden Sie unter Entwickeln von Maussteuerelementen (DirectX und C++).

Voraussetzungen:  Falls die Entwicklung vonApps mit C++, C# oder Visual Basic für Sie neu ist, sollten Sie sich die folgenden Themen ansehen und sich mit der erwähnten Technologie 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 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

Empfehlungen zur Unterstützung von Mausinteraktionen

Hier finden Sie einige Richtlinien für die Unterstützung von Mausinteraktionen.

Maussprache

Die konsequente Anwendung der folgenden Maussprache hilft Ihnen bei der Entwicklung von Apps, in denen sich die Benutzer leicht zurechtfinden. Hierdurch erleichtern Sie den Benutzern den Einstieg, da diese sich schneller in Ihrer App zurechtfinden.

BenennungBeschreibung

Lernen durch Zeigen

Zeigen Sie auf ein Element, um weitere Informationen oder visuelle Hinweise (wie etwa QuickInfos) anzuzeigen, ohne eine Aktion auszuführen. Weitere Informationen zu QuickInfos finden Sie unter Hinzufügen von QuickInfos.

Linksklick, um primäre Aktion auszuführen

Klicken Sie mit der linken Maustaste auf ein Element, um dessen primäre Aktion aufzurufen (z. B. das Starten einer App oder das Ausführen eines Befehls).

Bildlauf, um Ansicht zu ändern

Zeigen Sie Bildlaufleisten an, damit Benutzer in einem Inhaltsbereich nach oben, unten, links und rechts navigieren können. Benutzer können durch Klicken auf Bildlaufleisten oder Drehen des Mausrads einen Bildlauf durchführen. Auf Bildlaufleisten kann die Position der aktuellen Ansicht innerhalb des Inhaltsbereichs angezeigt werden (durch das Schwenken bei der Fingereingabe wird eine ähnliche Benutzeroberfläche angezeigt).

Rechtsklick, um Auswahl zu treffen und Befehl auszuwählen

Klicken Sie mit der rechten Maustaste, um die App-Leisten mit globalen Befehlen anzuzeigen. Klicken Sie mit der rechten Maustaste auf ein Element, um es auszuwählen und die App-Leiste mit Kontextbefehlen für das ausgewählte Element anzuzeigen.

Hinweis  Klicken Sie mit der rechten Maustaste, um ein Kontextmenü anzuzeigen, wenn die in der Auswahl oder der App-Leiste verfügbaren Befehl nicht das gewünschte Benutzeroberflächenverhalten ermöglichen. Wir empfehlen jedoch ausdrücklich, die App-Leiste für alle Befehlsverhalten zu verwenden.

Benutzeroberflächenbefehle zum Zoomen

Zeigen Sie Benutzeroberflächenbefehle auf der App-Leiste an (z. B. "+" und "-"), oder drücken Sie STRG und drehen Sie das Mausrad, um Zusammendrück- und Aufziehbewegungen zum Zoomen zu emulieren.

Benutzeroberflächenbefehle zum Drehen

Zeigen Sie Benutzeroberflächenbefehle auf der App-Leiste an, oder drücken Sie STRG+UMSCHALTTASTE, und drehen Sie das Mausrad, um die Drehbewegung zum Drehen zu emulieren. Drehen Sie das Gerät selbst, um den ganzen Bildschirm zu drehen.

Linksklick und ziehen, um neu anzuordnen

Klicken Sie mit der linken Maustaste auf ein Element, und ziehen Sie, um es zu bewegen.

Linksklick und ziehen, um Text auszuwählen

Klicken Sie mit der linken Maustaste auf auswählbaren Text, und ziehen Sie, um Text auszuwählen. Doppelklicken Sie, um ein Wort auszuwählen.

Maus in Ecken und an Rändern für Systembefehle

Bewegen Sie in Links-nach-rechts-Layouts die Maus in die obere oder untere rechte Ecke auf dem Bildschirm (bzw. an den linken Bildschirmrand in Rechts-nach-links-Layouts), um die Charms mit den Systembefehlen anzuzeigen.

Bewegen Sie die Maus in Links-nach-rechts-Layouts in die obere linke Ecke (bzw. in die obere rechte Ecke in Rechts-nach-links-Layouts), um eine Miniaturansicht der zuletzt verwendeten App anzuzeigen. Klicken Sie mit der linken Maustaste, oder klicken und ziehen Sie, um zwischen aktiven Apps umzuschalten, oder ziehen Sie, um die App anzudocken (wenn die Bildschirmauflösung dies unterstützt).

Bewegen Sie die Maus in Links-nach-rechts-Layouts in die untere linke Ecke (bzw. in die untere rechte Ecke in Rechts-nach-links-Layouts), um eine Miniaturansicht der Startseite anzuzeigen.

Klicken mit der linken Maustaste auf den oberen Bildschirmrand, und führen Sie eine Ziehbewegung zum unteren Bildschirmrand aus, um die aktuelle App zu schließen.

Klicken Sie mit der linken Maustaste auf den oberen Bildschirmrand, und führen Sie eine Ziehbewegung nach unten zum linken oder rechten Rand aus, um die aktuelle App auf der jeweiligen Seite des Bildschirms anzudocken.

 

Hardware

Überprüfen Sie die Funktionen des Mausgeräts (MouseCapabilities), um festzustellen, auf welche Elemente der Benutzeroberfläche Ihrer App die Maushardware direkt zugreifen kann. Weitere Informationen zum Überprüfen von Gerätefunktionen finden Sie unter Schnellstart: Erkennen von Zeigergeräten.

Einige Mausgeräte verfügen über fünf Tasten. Die vierte und fünfte Taste, gewöhnlich als X-Tasten bezeichnet, dienen gewöhnlich dazu, in Webbrowsern wie beispielsweise Windows Internet Explorer zurück und vorwärts zu navigieren. Weisen Sie diesen Schaltflächen in der Benutzeroberfläche Ihrer App entsprechende Funktionen zu (Zurück- und Vorwärts-Schaltflächen).

Verfügt die Maus über eine Radtaste, weisen Sie dem Drehen nach vorne und nach hinten den vertikalen Bildlauf (nach oben und nach unten) im Inhaltsbereich zu. Aktivieren Sie horizontalen Bildlauf (nach links und nach rechts), wenn im Inhaltsbereich kein vertikaler Bildlauf möglich ist. Handelt es sich bei der Radtaste um eine 4-Wege-Radtaste, sollte nur der horizontale Bildlauf aktiviert werden.

Durch Drehen des Mausrads sollte bei gedrückter STRG-Taste die Zoomfunktion aktiviert werden (falls verfügbar gemacht).

Fenster: Richtlinien für visuelles Feedback:  

  • Wenn eine Maus erkannt wird (durch Bewegungs- oder Daraufzeigen-Ereignisse), zeigen Sie eine für Mausinteraktionen spezifische Benutzeroberfläche an, um auf vom Element verfügbar gemachte Funktionen hinzuweisen. Wenn die Maus für eine bestimmte Zeit nicht bewegt wird oder der Benutzer eine Fingereingabeinteraktion auslöst, blenden Sie die für Mausinteraktionen spezifische Benutzeroberfläche schrittweise aus. Somit bleibt die Benutzeroberfläche sauber und aufgeräumt.
  • Verwenden Sie nicht den Cursor für Zeigefeedback, das Feedback des Elements reicht aus (siehe Cursor unten).
  • Lassen Sie kein visuelles Feedback anzeigen, wenn ein Element keine Interaktionen unterstützt (z. B. statischer Text).
  • Verwenden Sie keine Fokusrechtecke für Mausinteraktionen. Diese sind ausschließlich für Tastaturinteraktionen vorgesehen.
  • Zeigen Sie für alle Elemente, die das gleiche Eingabeziel darstellen, das gleiche visuelle Feedback an.
  • Stellen Sie Schaltflächen (z. B. "+" und "-") zur Verfügung, um fingereingabebasierte Manipulationen wie etwa Schwenken, Drehen, Zoomen usw. zu emulieren.

Allgemeine Informationen zum visuellen Feedback finden Sie unter Richtlinien für visuelles Feedback.

Fenster: Cursor:  

Für einen Mauszeiger ist eine Reihe von Standardcursorn verfügbar. Diese geben die primäre Aktion eines Elements an.

Jedem Standardcursor ist ein entsprechendes Standardbild zugewiesen. Benutzer einer App können das Standardbild, das einem Standardcursor zugewiesen ist, jederzeit ändern. In Windows Store-Apps werden Cursorbilder durch die PointerCursor-Funktion angegeben.

Wenn Sie den Mauszeiger anpassen müssen:

  • Verwenden Sie immer den Pfeilcursor (Pfeilcursor) für klickbare Elemente. Verwenden Sie den Zeigefingercursor (Zeigefingercursor) nicht für Links oder andere interaktive Elemente. Verwenden Sie stattdessen Zeigeeffekte (wie bereits beschrieben).
  • Verwenden Sie den Textcursor (Textcursor) für auswählbaren Text.
  • Verwenden Sie den Bewegungscursor (Bewegungscursor), wenn die primäre Aktion eine Bewegung ist (wie etwa beim Ziehen oder Zuschneiden). Verwenden Sie den Bewegungscursor nicht, wenn die primäre Aktion eine Navigation ist (wie etwa bei Start-Kacheln).
  • Verwenden Sie die Cursor für horizontale, vertikale und diagonale Größenänderung (Cursor für vertikale Größenänderung, Cursor für horizontale Größenänderung, Cursor für diagonale Größenänderung (unten links, oben rechts), Cursor für diagonale Größenänderung (oben links, unten rechts)), wenn die Größe eines Objekts geändert werden kann.
  • Verwenden Sie das Hand-Werkzeug (Hand-Werkzeug (offen), Hand-Werkzeug (geschlossen)) beim Schwenken von Inhalt innerhalb einer Canvas (wie etwa einer Karte).

Fenster: Steuerung:  

Durch einen Rechtsklick sollte die App-Leiste der App aktiviert werden. Vermeiden Sie inaktive Bereiche auf der Benutzeroberfläche Ihrer App, in denen keine Rechtsklicks akzeptiert werden. Weitere Informationen zu App-Leisten finden Sie unter Hinzufügen von App-Leisten.

Verwandte Themen

Reaktion auf Benutzerinteraktionen

 

 

Anzeigen:
© 2015 Microsoft