Wybieranie tekstu i obrazów

W tym artykule opisano wybieranie i manipulowanie tekstem, obrazami i kontrolkami oraz zawiera wskazówki dotyczące środowiska użytkownika, które należy wziąć pod uwagę podczas korzystania z tych mechanizmów w aplikacjach.

Ważne interfejsy API: Windows.UI.Xaml.Input, Windows.UI.Input

Zalecenia i zakazy

• Użyj glifów czcionek podczas implementowania własnego interfejsu użytkownika uchwytu. Uchwyt jest kombinacją dwóch czcionek interfejsu użytkownika Segoe, które są dostępne dla całego systemu. Korzystanie z zasobów czcionek upraszcza problemy z renderowaniem w różnych dpi i działa dobrze z różnymi progami skalowania UI. Podczas implementacji własnych chwytaków, powinny one mieć następujące cechy interfejsu użytkownika:

  • Kształt okrągły
  • Widoczne na dowolnym tle
  • Spójny rozmiar

• Podaj margines wokół wybranej zawartości, aby pomieścić interfejs użytkownika uchwytu. Jeśli aplikacja umożliwia zaznaczanie tekstu w regionie, który się nie przesuwa/nie przewija, zezwól na margines uchwytu równy 1/2 po lewej i prawej stronie obszaru tekstu oraz na wysokość uchwytu równą 1 w górnej i dolnej części obszaru tekstu (jak pokazano na poniższych obrazach). Dzięki temu cały interfejs użytkownika uchwytu jest widoczny dla użytkownika i minimalizuje niezamierzone interakcje z innym interfejsem użytkownika opartym na krawędziach.

  

• Ukryj interfejs użytkownika chwytaków podczas interakcji. Eliminuje okluzji przez uchwyty podczas interakcji. Jest to przydatne, gdy uchwyt nie jest całkowicie zasłonięty palcem lub istnieje wiele uchwytów wyboru tekstu. Eliminuje to artefakty wizualne podczas wyświetlania okien podrzędnych.

• Nie zezwalaj na wybór elementów interfejsu użytkownika, takich jak kontrolki, etykiety, obrazy, zastrzeżona zawartość itd. Zazwyczaj aplikacje systemu Windows zezwalają na wybór tylko w ramach określonych kontrolek. Kontrolki, takie jak przyciski, etykiety i logo, nie są wybierane. Oceń, czy wybór jest problemem dla aplikacji, a jeśli tak, zidentyfikuj obszary interfejsu użytkownika, w których wybór powinien być zabroniony.

Dodatkowe wskazówki dotyczące użycia

Wybór tekstu i manipulowanie nimi są szczególnie podatne na wyzwania użytkownika wprowadzone przez interakcje dotykowe. Mysz, pióro/rysik i klawiatura oferują bardzo precyzyjne wejście: kliknięcie myszą lub kontakt pióra/rysika jest zwykle mapowane na pojedynczy piksel, a klawisz jest wciśnięty lub nie. Interfejs dotykowy nie jest szczegółowy; Trudno jest przyporządkować całą powierzchnię palca do konkretnej pozycji x-y na ekranie, aby dokładnie umieścić kursor tekstowy.

Zagadnienia i zalecenia

Użyj wbudowanych kontrolek uwidocznionych za pośrednictwem struktur językowych w systemie Windows, aby tworzyć aplikacje, które zapewniają pełne środowisko interakcji użytkownika platformy, w tym zachowania wyboru i manipulowania. Funkcje interakcji wbudowanych kontrolek są wystarczające dla większości aplikacji systemu Windows.

W przypadku używania standardowych kontrolek tekstu systemu Windows nie można dostosować zachowań zaznaczenia i wizualizacji opisanych w tym temacie.

Zaznaczenie tekstu

Jeśli aplikacja wymaga niestandardowego interfejsu użytkownika obsługującego wybór tekstu, zalecamy stosowanie zachowań wyboru systemu Windows opisanych tutaj.

Edytowalna i nieedytowalna zawartość

W przypadku dotyku interakcje wyboru są wykonywane głównie za pomocą gestów, takich jak naciśnięcie, aby ustawić kursor wstawiania lub wybrać wyraz, oraz slajd w celu zmodyfikowania zaznaczenia. Podobnie jak w przypadku innych interakcji dotykowych systemu Windows, interakcje czasowe są ograniczone do gestu naciśnij i przytrzymaj w celu wyświetlenia interfejsu użytkownika informacyjnego. Aby uzyskać więcej informacji, zobacz Wytyczne dotyczące opinii wizualnej.

System Windows rozpoznaje dwa możliwe stany interakcji wyboru, edytowalne i nieedytowalne oraz odpowiednio dostosowuje interfejs użytkownika wyboru, opinie i funkcje.

Edytowalna zawartość

Naciśnięcie w lewej połowie wyrazu powoduje umieszczenie kursora w bezpośredniej lewej części wyrazu, a naciśnięcie w prawej połowie powoduje umieszczenie kursora bezpośrednio po prawej stronie słowa.

Na poniższej ilustracji pokazano, jak umieścić początkowy kursor wstawiania z uchwytem, naciskając w pobliżu początku lub końca słowa.

Na poniższej ilustracji pokazano, jak dostosować zaznaczenie, przeciągając uchwyt.

Na poniższych ilustracjach pokazano, jak wywołać menu kontekstowe, naciskając na zaznaczenie lub uchwyt (można również użyć naciśnięcia i przytrzymania).

Uwaga Te interakcje różnią się nieco w przypadku błędnie napisanego słowa. Naciśnięcie słowa oznaczonego jako błędnie napisane spowoduje zarówno jego podświetlenie, jak i wyświetlenie sugerowanego menu kontekstowego pisowni.

 

Zawartość nieedytowalna

Na poniższej ilustracji przedstawiono sposób wybierania wyrazu przez naciśnięcie wyrazu (w początkowym zaznaczeniu nie znajdują się spacje).

Postępuj zgodnie z tymi samymi procedurami, co w przypadku tekstu edytowalnego, aby dostosować zaznaczenie i wyświetlić menu kontekstowe.

Manipulowanie obiektami

Gdzie to możliwe, użyj tych samych (lub podobnych) zasobów uchwytu, co przy zaznaczaniu tekstu, podczas implementowania niestandardowej manipulacji obiektami w aplikacji w systemie Windows. Pomaga to zapewnić spójne środowisko interakcji na całej platformie.

Na przykład uchwyty mogą być również używane w aplikacjach do przetwarzania obrazów, które obsługują zmianę rozmiaru i przycinanie lub aplikacje odtwarzacza multimedialnego, które zapewniają regulowane paski postępu, jak pokazano na poniższych obrazach.

Odtwarzacz multimedialny z regulowanym paskiem postępu.

Edytor obrazów z uchwytami do przycinania.

Powiązane artykuły

Dla deweloperów

• Niestandardowe interakcje użytkowników

Samples

• Podstawowy przykład danych wejściowych
• Przykład danych wejściowych o małym opóźnieniu
• Przykład trybu interakcji użytkownika
• Przykładowe wizualizacje stanu fokusu

Próbki archiwalne

• Dane wejściowe: przykładowe zdarzenia wejściowe użytkownika XAML

• Dane wejściowe: przykład możliwości urządzenia

• Dane wejściowe: przykład testu trafień dotykowych

• Przykład XAML na przewijanie, przesuwanie i powiększanie

• Dane wejściowe: uproszczona próbka tuszu

• Dane wejściowe: próbka manipulacji i gestów

• Przykład danych wejściowych touch DirectX