Udostępnij przez

Tooltips

Etykietka narzędzia to wyskakujące okienko zawierające dodatkowe informacje o innej kontrolce lub obiekcie. Podpowiedzi są wyświetlane automatycznie, gdy użytkownik przenosi fokus na, naciska i trzyma, lub najeżdża wskaźnikiem na skorelowaną kontrolkę. Etykietka narzędzia znika, gdy użytkownik przenosi fokus, zatrzymuje naciśnięcie lub zatrzymuje wskaźnik myszy nad skojarzona kontrolką (chyba że wskaźnik jest przesuwany w kierunku etykietki narzędzia).

Uwaga / Notatka

Począwszy od systemu Windows 11 w wersji 21H2, etykietka narzędzia można również odrzucić, naciskając CTRL.

etykietki narzędzia

Czy jest to właściwa kontrola?

Użyj podpowiedzi, aby wyświetlić więcej informacji o elemencie sterującym przed poproszeniem użytkownika o wykonanie działania. Etykietki narzędzi powinny być używane oszczędnie i tylko wtedy, gdy dodają unikatową wartość dla użytkownika, który próbuje wykonać zadanie. Jedną z reguł jest to, że jeśli informacje są dostępne w innym miejscu w tym samym środowisku, nie potrzebujesz etykietki narzędzia. Cenna wskazówka wyjaśni niejasną czynność.

Kiedy należy użyć etykietki narzędzia? Aby zdecydować, rozważ następujące pytania:

  • Czy informacje powinny stać się widoczne po najechaniu kursorem? Jeśli nie, użyj innej kontrolki. Wyświetlaj porady tylko w wyniku interakcji użytkownika, nigdy nie wyświetlaj ich samodzielnie.

  • Czy kontrolka ma etykietę tekstową? Jeśli nie, użyj dymku podpowiedzi, aby podać etykietę. Dobrym zwyczajem projektowania UX jest etykietowanie większości kontrolek inline, i dla tych elementów nie potrzebujesz podpowiedzi. Kontrolki paska narzędzi i przyciski poleceń pokazujące tylko ikony wymagają podpowiedzi.

  • Czy obiekt korzysta z opisu lub dalszych informacji? Jeśli tak, użyj etykietki narzędzia. Jednak tekst musi być uzupełniający — to nie jest istotne dla podstawowych zadań. Jeśli jest to niezbędne, umieść go bezpośrednio w interfejsie użytkownika, aby użytkownicy nie musieli ich odnajdywać ani szukać.

  • Czy informacje uzupełniające są błędem, ostrzeżeniem lub stanem? Jeśli tak, użyj innego elementu interfejsu użytkownika, takiego jak menu podręczne.

  • Czy użytkownicy muszą wchodzić w interakcję z poradą? Jeśli tak, użyj innej kontrolki. Użytkownicy nie mogą wchodzić w interakcje z poradami, ponieważ przeniesienie myszy sprawia, że znikną.

  • Czy użytkownicy muszą drukować informacje uzupełniające? Jeśli tak, użyj innej kontrolki.

  • Czy użytkownicy znajdą porady irytujące lub rozpraszające uwagę? Jeśli tak, rozważ użycie innego rozwiązania — łącznie z nie robieniem niczego. Jeśli używasz wskazówek, w których mogą one rozpraszać uwagę, zezwól użytkownikom na ich wyłączenie.

Rekomendacje

  • Używaj etykietek narzędzi oszczędnie (lub w ogóle nie). Etykietki narzędzi są przerwą. Etykietka narzędzia może być tak rozpraszana jak wyskakujące okienko, więc nie używaj ich, chyba że dodają znaczącą wartość.
  • Zachowaj zwięzłość tekstu etykietki narzędzia. Podpowiedzi doskonale nadają się do krótkich zdań i fragmentów zdań. Duże bloki tekstu mogą być przytłaczające, a dymek pomocy może zniknąć, zanim użytkownik zakończy czytanie.
  • Utwórz przydatny tekst podpowiedzi. Tekst etykietki narzędzia musi być informacyjny. Nie sprawiaj, że jest oczywiste lub po prostu powtarzaj to, co jest już na ekranie. Ponieważ tekst etykietki narzędzia nie zawsze jest widoczny, powinno to być dodatkowe informacje, których użytkownicy nie muszą odczytywać. Przekazuj ważne informacje, korzystając z samowyjaśniających etykiet kontrolek lub tekstu uzupełniającego bezpośrednio na miejscu.
  • Używaj obrazów, jeśli jest to konieczne. Czasami lepiej użyć obrazu w etykietce narzędzia. Na przykład, gdy użytkownik najedzie na odnośnik, możesz użyć podpowiedzi, aby wyświetlić podgląd połączonej strony.
  • akceleratory klawiatury są domyślnie wyświetlane w etykietkach narzędzi. Jeśli dodasz własną podpowiedź, upewnij się, że zawiera ona informacje o tym, które akceleratory klawiatury są dostępne.
  • Nie używaj etykietki narzędzia do wyświetlania tekstu widocznego już w interfejsie użytkownika. Na przykład nie umieszczaj etykietki narzędzia na przycisku, który pokazuje ten sam tekst przycisku.
  • Nie umieszczaj interakcyjnych kontrolek wewnątrz etykietki narzędzia.
  • Nie umieszczaj obrazów, które wyglądają tak, jakby były interaktywne w etykietce narzędzia.

Tworzenie etykietki narzędzia

Otwórz aplikację Galerii WinUI 3 i zobacz, jak działa etykietka narzędzia

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Etykietka narzędzia musi być przypisana do innego elementu interfejsu użytkownika, który jest jego właścicielem. Klasa ToolTipService udostępnia metody statyczne do wyświetlania etykietki narzędzia.

W języku XAML użyj właściwości ToolTipService.Tooltip dołączonej, aby przypisać etykietkę narzędzia do właściciela.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

W kodzie użyj metody ToolTipService.SetToolTip, aby przypisać etykietkę narzędzia do właściciela.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

Content

Można użyć dowolnego obiektu jako Zawartość etykietki narzędzia. Oto przykład użycia obrazu w etykietce narzędzia.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Umieszczenie

Domyślnie etykietka narzędzia jest wyświetlana wyśrodkowana powyżej wskaźnika. Umieszczanie nie jest ograniczone przez okno aplikacji, więc narzędzie może być wyświetlane częściowo lub całkowicie poza obszarem okna aplikacji.

W przypadku szerokich korekt użyj właściwości Placement lub ToolTipService.Placement dołączonej właściwości, aby określić, czy etykietka narzędzia powinna być rysowane powyżej, poniżej, po lewej lub prawej stronie wskaźnika. Można ustawić właściwości VerticalOffset lub HorizontalOffset, aby zmienić odległość między wskaźnikiem a etykietką narzędzia. Tylko jedna z dwóch wartości przesunięcia będzie mieć wpływ na ostateczną pozycję — VerticalOffset, gdy położenie to Góra lub Dół; HorizontalOffset, gdy położenie to Lewa lub Prawa.

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

Jeśli etykietka narzędzia zasłania zawartość, do której się odwołuje, możesz dostosować jej położenie dokładnie przy użyciu właściwości PlacementRect. PlacementRect zakotwiczy położenie podpowiedzi i także służy jako obszar, którego podpowiedź nie będzie zasłaniać, o ile na ekranie jest wystarczająco miejsca, aby wyświetlić podpowiedź poza tym obszarem. Możesz określić początek prostokąta względem właściciela etykietki narzędzia oraz wysokość i szerokość obszaru wykluczenia. Właściwość Placement określi, czy etykietka narzędzia powinna pojawiać się nad, pod, po lewej lub po prawej stronie obiektu PlacementRect.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

  • Last updated on