Auswählen von Text und Bildern

In diesem Artikel werden das Auswählen und Bearbeiten von Text, Bildern und Steuerelementen beschrieben und Richtlinien für die Benutzeroberfläche bereitgestellt, die bei der Verwendung dieser Mechanismen in Ihren Apps berücksichtigt werden sollten.

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

Empfehlungen für die Vorgehensweise

• Verwenden Sie Schriftartglyphen, wenn Sie Ihre eigene Zuggriff-Benutzeroberfläche implementieren. Das Greifelement ist eine Kombination aus zwei Segoe UI-Schriftarten, die systemweit verfügbar sind. Die Verwendung von Schriftartressourcen vereinfacht die Lösung von Darstellungsproblemen bei unterschiedlichen DPI-Einstellungen und eignet sich gut für die verschiedenen Stufen der UI-Skalierung. Bei der Implementierung Ihrer eigenen Greifer sollten diese die folgenden UI-Merkmale aufweisen:

  • Kreisförmige Form
  • Sichtbar vor jedem Hintergrund
  • Einheitliche Größe

• Fügen Sie einen Rand um den auswählbaren Inhalt hinzu, um die Greifer-Benutzeroberfläche zu berücksichtigen. Wenn Ihre App die Textauswahl in einem Bereich aktiviert, der nicht schwenkt/scrollt, lassen Sie einen Ziehelementrand von 1/2 auf der linken und rechten Seite des Textbereichs und 1 Ziehelementhöhe auf der oberen und unteren Seite des Textbereichs zu (wie in den folgenden Abbildungen dargestellt). Dadurch wird sichergestellt, dass die gesamte Greifer-UI für den Benutzer verfügbar gemacht wird und unbeabsichtigte Interaktionen mit anderen randbasierten UI-Elementen minimiert werden.

  

• Blenden Sie die Greifer-Benutzeroberfläche während der Interaktion aus. Beseitigt die Verdeckung durch die Greifer während der Interaktion. Dies ist nützlich, wenn ein Greifer nicht vollständig vom Finger verdeckt wird oder mehrere Textauswahl-Greifer vorhanden sind. Dadurch werden visuelle Artefakte beim Anzeigen untergeordneter Fenster entfernt.

• Lassen Sie die Auswahl von UI-Elementen wie Steuerelementen, Bezeichnungen, Bildern, proprietären Inhalten usw. nicht zu. In der Regel erlauben Windows-Anwendungen die Auswahl nur innerhalb bestimmter Steuerelemente. Steuerelemente wie Schaltflächen, Beschriftungen und Logos sind nicht auswählbar. Bewerten Sie, ob es sich bei der Auswahl um ein Problem für Ihre App handelt, und identifizieren Sie ggf. die Bereiche der Benutzeroberfläche, in denen die Auswahl verboten sein sollte.

Weitere Hinweise zur Verwendung

Die Textauswahl und -manipulation ist besonders anfällig für Herausforderungen der Benutzerfreundlichkeit durch Touchinteraktionen. Maus-, Zeichen-/Eingabestift und Tastatureingabe sind sehr präzise: Ein Mausklick- oder Zeichen-/Eingabestiftkontakt wird in der Regel einem einzelnen Pixel zugeordnet, und eine Taste wird gedrückt oder nicht gedrückt. Die Toucheingabe ist nicht präzise; Es ist schwierig, die gesamte Oberfläche einer Fingerspitze einer bestimmten x-y-Position auf dem Bildschirm zuzuordnen, um ein Text caret präzise zu platzieren.

Überlegungen und Empfehlungen

Verwenden Sie die integrierten Steuerelemente, die über die Sprachframeworks in Windows verfügbar gemacht werden, um Apps zu erstellen, die die vollständige Plattform-Benutzerinteraktion bieten, einschließlich Auswahl- und Manipulationsverhalten. Sie finden die Interaktionsfunktionen der integrierten Steuerelemente für den Großteil der Windows-Apps ausreichend.

Bei Verwendung standardmäßiger Windows-Textsteuerelemente können die in diesem Thema beschriebenen Auswahlverhalten und visuellen Elemente nicht angepasst werden.

Textauswahl

Wenn Ihre App eine benutzerdefinierte Benutzeroberfläche erfordert, die die Textauswahl unterstützt, empfehlen wir, dass Sie den hier beschriebenen Windows-Auswahlverhalten folgen.

Bearbeitbarer und nicht bearbeitbarer Inhalt

Bei der Toucheingabe werden Auswahlinteraktionen hauptsächlich durch Gesten ausgeführt, z. B. durch Tippen, um einen Cursor zu setzen oder ein Wort auszuwählen, und durch Wischen, um eine Auswahl zu ändern. Wie bei anderen Windows-Touchinteraktionen sind zeitlich festgelegte Interaktionen auf die Gedrückthalten-Geste beschränkt, um die Informations-UI anzuzeigen. Weitere Informationen finden Sie in den Richtlinien für visuelles Feedback.

Windows erkennt zwei mögliche Zustände für Auswahlinteraktionen, bearbeitbar und nicht bearbeitbar, und passt die Auswahlbenutzeroberfläche, das Feedback und die Funktionalität entsprechend an.

Bearbeitbarer Inhalt

Wenn Sie innerhalb der linken Hälfte eines Worts tippen, wird der Cursor links neben dem Wort platziert, während das Tippen innerhalb der rechten Hälfte den Cursor rechts neben dem Wort platziert.

Die folgende Abbildung zeigt, wie Sie eine anfängliche Einfügemarke mit Griff platzieren, indem Sie nahe am Anfang oder Ende eines Wortes tippen.

Die folgende Abbildung zeigt, wie Sie eine Auswahl anpassen, indem Sie den Griff ziehen.

Die folgenden Bilder zeigen, wie Sie das Kontextmenü aufrufen, indem Sie innerhalb der Auswahl oder auf ein Ziehelement tippen (Drücken und Halten können auch verwendet werden).

Anmerkung Diese Interaktionen variieren im Falle eines falsch geschriebenen Worts etwas. Wenn Sie auf ein Wort tippen, das als falsch geschrieben markiert ist, wird das gesamte Wort hervorgehoben und das vorgeschlagene Kontextmenü für die Rechtschreibung aufgerufen.

Nicht bearbeitbarer Inhalt

In der folgenden Abbildung wird veranschaulicht, wie Sie ein Wort auswählen, indem Sie auf das Wort tippen (in der anfänglichen Auswahl sind keine Leerzeichen enthalten).

Befolgen Sie die gleichen Verfahren wie für bearbeitbaren Text, um die Auswahl anzupassen und das Kontextmenü anzuzeigen.

Objektmanipulation

Verwenden Sie nach Möglichkeit dieselben (oder ähnliche) Greiferressourcen wie bei der Textauswahl, wenn Sie benutzerdefinierte Objekteingaben in einer Windows-App implementieren. Dies trägt dazu bei, eine konsistente Interaktionserfahrung auf der gesamten Plattform bereitzustellen.

Beispielsweise können Ziehelemente auch in Bildverarbeitungs-Apps verwendet werden, die das Ändern der Größe und den Zuschnitt unterstützen, oder in Media Player-Apps, die anpassbare Fortschrittsleisten bereitstellen, wie in den folgenden Abbildungen gezeigt.

Media Player mit anpassbarer Statusanzeige.

Bildeditor mit Zuschneidegriffen.

Verwandte Artikel

Für Entwickler

• Benutzerdefinierte Benutzerinteraktionen

Beispiele

• Einfaches Eingabebeispiel
• Beispiel für eine Eingabe mit geringer Latenz
• Beispiel für den Benutzerinteraktionsmodus
• Beispiel für Fokussierungsvisualisierung

Archivbeispiele

• Eingabe: Beispiel für XAML-Benutzereingabeereignisse

• Eingabe: Beispiel für Gerätefunktionen

• Eingabe: Beispiel für Touchtreffertests

• Beispiel für XAML-Bildlauf, -Verschiebung und -Zoom

• Eingabe: Vereinfachtes Freihandmuster

• Eingabe: Beispiel für Manipulationen und Gesten

• Beispiel für die DirectX-Toucheingabe