Tooltips

A "tooltip" egy olyan felugró ablak, amely további információkat tartalmaz egy másik vezérlőről vagy objektumról. Az elemleírások automatikusan megjelennek, amikor a felhasználó áthelyezi a fókuszt, lenyomja és megtartja, vagy a mutatót a társított vezérlő fölé viszi. Az elemleírás eltűnik, amikor a felhasználó áthelyezi a fókuszt, leállítja a lenyomást, vagy nem tartja az egérmutatót a társított vezérlő fölé (kivéve, ha az egérmutató az elemleírás felé közelít).

Megjegyzés:

Windows 11 21H2-es verziótól kezdve a CTRL billentyű lenyomásával egy elemleírást is el lehet utasítani.

Ez a megfelelő vezérlő?

Az eszköztipp használatával fedje fel egy vezérlőelem további információit, mielőtt megkéri a felhasználót egy művelet végrehajtására. Az elemleírásokat takarékosan kell használni, és csak akkor, ha külön értéket adnak hozzá a feladatot végrehajtani próbáló felhasználónak. Az egyik hüvelykujjszabály az, hogy ha az információk máshol is elérhetők ugyanazon a felületen, nincs szükség tooltipre. Egy értékes elemleírás tisztáz egy nem egyértelmű műveletet.

Mikor érdemes tooltippet használni? A döntéshez fontolja meg az alábbi kérdéseket:

• Láthatóvá kell válnia az adatoknak a mutató rámutatás alapján? Ha nem, használjon másik vezérlőt. Tippek megjelenítése csak a felhasználói interakciók eredményeként, soha ne jelenjenek meg önállóan.

• Van szövegfelirata egy vezérlőelemnek? Ha nem, használjon elemleírást a címke megadásához. Ez egy jó UX tervezési gyakorlat a legtöbb vezérlő beágyazott címkézéséhez, és ezekhez nincs szükség elemleírásokra. Az eszköztár vezérlőinek és a csak ikonokat megjelenítő parancsgomboknak elemleírásokra van szükségük.

• Hasznos egy objektum leírása vagy további információja? Ha igen, használjon eszköztippet. A szövegnek azonban kiegészítőnek kell lennie , vagyis nem feltétlenül szükséges az elsődleges feladatokhoz. Ha ez elengedhetetlen, helyezze közvetlenül a felhasználói felületre, hogy a felhasználóknak ne kelljen felderítenie vagy megkeresnie.

• A kiegészítő információ hiba, figyelmeztetés vagy állapot? Ha igen, használjon egy másik felhasználói felületi elemet, például egy úszó panelt.

• Kell a felhasználóknak interakcióba lépniük a tippel? Ha igen, használjon másik vezérlőt. A felhasználók nem kezelhetik a tippeket, mert az egér mozgatásával eltűnnek.

• A felhasználóknak ki kell nyomtatni a kiegészítő információkat? Ha igen, használjon másik vezérlőt.

• A felhasználók bosszantónak vagy zavarónak találják a tippeket? Ha igen, fontolja meg egy másik megoldás használatát – beleértve a semmit sem. Ha olyan tippeket használ, amelyek zavaróak lehetnek, engedélyezze a felhasználóknak, hogy kikapcsolják őket.

Recommendations

• Használja az elemleírásokat takarékosan (vagy egyáltalán nem). A súgóüzenetek megszakítást jelentenek. A tooltip ugyanolyan zavaró lehet, mint egy előugró ablak, ezért ne használja őket, hacsak nem adnak jelentős értéket.
• Tartsa tömören az elemleírás szövegét. Az eszköztippek ideálisak rövid mondatokhoz és mondattöredékekhez. A nagy méretű szövegblokkok túlterheltek lehetnek, és az elemleírás időtúllépést okozhat, mielőtt a felhasználó befejezte az olvasást.
• Hasznos, kiegészítő elemleírás-szöveg létrehozása. Az elemleírás szövegének informatívnak kell lennie. Ne tegye nyilvánvalóvá, vagy csak ismételje meg azt, ami már látható a képernyőn. Mivel az elemleírás szövege nem mindig látható, kiegészítő információnak kell lennie, amelyet a felhasználóknak nem kell olvasniuk. Fontos információk közlése saját magyarázó vezérlőcímkék vagy helyben kiegészített szöveg használatával.
• Szükség esetén használjon képeket. Néha jobb, ha eszköztippként használ egy képet. Ha például a felhasználó egy hivatkozásra mutat, elemleírással megjelenítheti a csatolt oldal előnézetét.
• A billentyűzetgyorsítók alapértelmezés szerint elemleírásokban jelennek meg. Ha saját elemleírást ad hozzá, győződjön meg arról, hogy tartalmazza az elérhető gyorsbillentyűkről szóló információkat.
• Ne használjon segítséget olyan szöveg megjelenítésére, amely már látható a felhasználói felületen. Például ne helyezzen feliratot olyan gombra, amely ugyanazt a szöveget mutatja, mint ami a gombon van.
• Ne helyezzen interaktív vezérlőket az elemleírásba.
• Ne helyezzen interaktívnak tűnő képeket az elemleírásba.

Elemleírás létrehozása

• Fontos API-k:Elemleírás-osztály, ToolTipService osztály

Nyissa meg a WinUI 3 Galéria alkalmazást, és tekintse meg az elemleírást működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Egy elemleírást hozzá kell rendelni egy másik felhasználói felületi elemhez, amely a tulajdonosa. A ToolTipService osztály statikus metódusokat biztosít az eszköztippek megjelenítéséhez.

Az XAML-ben az ToolTipService.Tooltip csatolt tulajdonsággal rendelje hozzá az elemleírást egy tulajdonoshoz.

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

A kódban az ToolTipService.SetToolTip metódus használatával rendelje hozzá az elemleírást egy tulajdonoshoz.

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

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

Content

Bármilyen objektumot használhatsz a ToolTip tartalma-ként. Íme egy példa a kép elemleírásban történő használatára.

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

Elhelyezés

Alapértelmezés szerint egy elemleírás jelenik meg középre az egérmutató felett. Az elhelyezést az alkalmazásablak nem korlátozza, ezért előfordulhat, hogy az elemleírás részben vagy teljesen az alkalmazásablak határain kívül jelenik meg.

Széles körű módosításokhoz használja az Elhelyezés tulajdonságot vagy a ToolTipService.Placement csatolt tulajdonságot annak megadásához, hogy az elemleírásnak az egérmutató fölött, alatt, bal vagy jobb oldalán kell-e megjelennie. A VerticalOffset vagy HorizontalOffset tulajdonságaival módosíthatja az egérmutató és az elemleírás közötti távolságot. A két eltolásérték közül csak az egyik befolyásolja a végső pozíciót – VerticalOffset, ha az elhelyezés felső vagy alsó, a HorizontalOffset pedig a bal vagy a jobb elhelyezés.

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

Ha egy elemleírás elhomályosítja a hivatkozott tartalmat, pontosan módosíthatja az elhelyezését a PlacementRect tulajdonság használatával. A PlacementRect rögzíti az eszköztipp pozícióját, és úgy is szolgál, mint egy terület, amelyet az eszköztipp nem fed le, feltéve, hogy van elegendő képernyőterület az eszköztipp ezen a területen kívüli megjelenítéséhez. Megadhatja a téglalap eredetét az eszköztipp tulajdonosához képest, valamint a kizárási terület magasságát és szélességét. Az Elhelyezés tulajdonság határozza meg, hogy az eszköztippnek a PlacementRect fölött, alatt, bal vagy jobb oldalán kell elhelyezkednie.

<!-- 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>

Kapcsolódó cikkek

• elemleírás-osztály