Freigeben über

Auswählen von Text und Bildern

  • Artikel

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 Ziehelement-UI implementieren. Das Ziehelement ist eine Kombination aus zwei Segoe UI-Schriftarten, die systemweit verfügbar sind. Die Verwendung von Schriftartressourcen vereinfacht das Rendern von Problemen bei unterschiedlichen DPI-Werten und eignet sich gut für die verschiedenen UI-Skalierungsebenen. Bei der Implementierung ihrer eigenen Ziehelemente sollten sie die folgenden UI-Merkmale aufweisen:

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

  • Stellen Sie einen Rand um den auswählbaren Inhalt bereit, um die Ziehelement-UI 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 Ziehelement-UI für den Benutzer verfügbar gemacht wird und unbeabsichtigte Interaktionen mit anderen randbasierten Ui-Elemente minimiert werden.

    Ränder des Textauswahlziehelements

  • Blenden Sie die Ziehelement-UI während der Interaktion aus. Beseitigt die Okklusion durch die Ziehelemente während der Interaktion. Dies ist nützlich, wenn ein Ziehelement nicht vollständig vom Finger verdeckt wird oder mehrere Textauswahlzieher 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 Interaktionsfunktionalität der integrierten Steuerelemente, die für den Großteil der Windows-Apps ausreichend sind.

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 Einfügecursor festzulegen oder ein Wort auszuwählen, und eine Folie zum Ändern einer Auswahl. 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 durch Tippen innerhalb der rechten Hälfte der Cursor rechts neben dem Wort platziert wird.

Die folgende Abbildung zeigt, wie Sie einen anfänglichen Einfügecursor mit Ziehelement platzieren, indem Sie nahe am Anfang oder Ende eines Worts tippen.

Tippen (oder halten Sie es gedrückt) auf der linken Seite eines Worts, um ein Caret- und Ziehelement am Anfang dieses Worts zu platzieren. Tippen (oder halten Sie es gedrückt) auf der rechten Seite eines Worts, um ein Caret- und Ziehelement am Ende dieses Worts zu platzieren.

Die folgende Abbildung zeigt, wie Sie eine Auswahl anpassen, indem Sie das Ziehelement ziehen.

Ziehen Sie das Ziehelement in beide Richtungen, um die Auswahl anzupassen (das erste Ziehelement bleibt verankert und ein zweites Ziehelement wird angezeigt). Ziehen Sie eines der Ziehelemente, um nachfolgende Anpassungen vorzunehmen.

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).

Tippen (oder halten Sie ihn gedrückt) in der Auswahl oder auf einem Ziehelement, um das Kontextmenü aufzurufen.

Beachten Sie, dass diese Interaktionen im Fall eines falsch geschriebenen Worts etwas variieren. 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).

Tippen Sie in ein Wort, um es auszuwählen (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 die gleichen (oder ähnlichen) Ziehelementressourcen als Textauswahl, wenn Sie benutzerdefinierte Objektmanipulation 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 größenänderungs- und zuschneiden oder Media Player-Apps unterstützen, die anpassbare Statusanzeigen bereitstellen, wie in den folgenden Abbildungen gezeigt.

Media Player mit Statusziehelement

Media Player mit anpassbarer Statusanzeige.

Bild mit Zuschneideziehern

Bild-Editor mit zuschneidende Ziehelemente.

Für Entwickler

Beispiele

Archivbeispiele