Verktygstips

En verktygstips är ett popup-fönster som innehåller ytterligare information om en annan styrning eller ett annat objekt. Knappbeskrivningar visas automatiskt när användaren flyttar fokus till, trycker och håller, eller hovrar pekaren över den associerade kontrollen. Knappbeskrivningen försvinner när användaren flyttar fokus från, slutar trycka på eller slutar hovra pekaren över den associerade kontrollen (om inte pekaren rör sig mot knappbeskrivningen).

Är det här rätt kontroll?

Använd en knappbeskrivning för att visa mer information om en kontroll innan du ber användaren att utföra en åtgärd. Knappbeskrivningar bör användas sparsamt och endast när de lägger till ett distinkt värde för den användare som försöker slutföra en uppgift. En tumregel är att om informationen är tillgänglig någon annanstans i samma upplevelse behöver du inget verktygstips. Ett värdefullt verktygstips kommer att klargöra en otydlig åtgärd.

När ska du använda ett verktygstips? Du kan ta ställning till följande frågor:

• Bör informationen bli synlig baserat på pekarens hovring? Om inte, använd en annan kontroll. Visa bara tips som ett resultat av användarinteraktion och visa dem aldrig på egen hand.

• Har en kontroll en textetikett? Om inte, använd ett verktygstips för att tillhandahålla etiketten. Det är en bra UX-designmetod att märka de flesta kontroller på plats och för dessa behöver du inte verktygstips. Verktygsfältskontroller och kommandoknappar som bara visar ikoner behöver knappbeskrivningar.

• Har ett objekt nytta av en beskrivning eller ytterligare information? I så fall använder du ett verktygstips. Men texten måste vara kompletterande – det vill: inte nödvändig för de primära uppgifterna. Om det är viktigt lägger du det direkt i användargränssnittet så att användarna inte behöver identifiera eller jaga efter det.

• Är tilläggsinformationen ett fel, en varning eller status? I så fall använder du ett annat gränssnittselement, till exempel en utfällbar meny.

• Behöver användarna interagera med tipset? I så fall använder du en annan kontroll. Användare kan inte interagera med tips eftersom om du flyttar musen försvinner de.

• Behöver användarna skriva ut tilläggsinformationen? I så fall använder du en annan kontroll.

• Kommer användarna att tycka att tipsen är irriterande eller distraherande? I så fall bör du överväga att använda en annan lösning – inklusive att inte göra någonting alls. Om du använder tips där de kan vara distraherande kan du låta användarna inaktivera dem.

Rekommendationer

• Använd verktygstips sparsamt (eller inte alls). Verktygstips är ett avbrott. Ett verktygstips kan vara lika distraherande som ett popup-fönster, så använd dem inte om de inte tillför väsentligt värde.
• Behåll knappbeskrivningstexten kortfattad. Verktygstips är perfekta för korta meningar och meningsfragment. Stora textblock kan vara överväldigande och verktygstipset kan gå ut innan användaren har läst klart.
• Skapa användbar, kompletterande knappbeskrivningstext. Knappbeskrivningstexten måste vara informativ. Gör det inte uppenbart eller upprepa bara det som redan finns på skärmen. Eftersom knappbeskrivningstext inte alltid visas bör det vara kompletterande information som användarna inte behöver läsa. Förmedla viktig information med hjälp av självförklarande kontrolletiketter eller kompletterande text på plats.
• Använd bilder när det är lämpligt. Ibland är det bättre att använda en bild i ett verktygstips. När användaren till exempel hovrar över en hyperlänk kan du använda en knappbeskrivning för att visa en förhandsgranskning av den länkade sidan.
• Tangentbordsacceleratorer visas som standard i knappbeskrivningar. Om du lägger till en egen knappbeskrivning kontrollerar du att den innehåller information om de tangentbordsacceleratorer som är tillgängliga.
• Använd inte ett verktygstips för att visa text som redan syns i användargränssnittet. Lägg till exempel inte en knappbeskrivning på en knapp som visar samma text på knappen.
• Placera inte interaktiva kontroller i knappbeskrivningen.
• Placera inte bilder som ser ut som om de är interaktiva i knappbeskrivningen.

Skapa ett verktygstips

WinUI 3 Gallery-appen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store- eller hämta källkoden på GitHub-

En ToolTip- måste tilldelas till ett annat användargränssnittselement som är dess ägare. Klassen ToolTipService innehåller statiska metoder för att visa en knappbeskrivning.

I XAML använder du den bifogade egenskapen ToolTipService.ToolTip för att tilldela verktygstipset till en ägare.

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

I kod använder du metoden ToolTipService.SetToolTip för att tilldela ToolTip till en komponent.

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

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

Innehåll

Du kan använda valfritt objekt som Innehåll i ett verktygstips. Här är ett exempel på hur man använder en bild i ett verktygstips.

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

Placering

Som standard visas ett verktygstips centrerat ovanför pekaren. Placeringen begränsas inte av appfönstret, så knappbeskrivningen kan visas delvis eller helt utanför appfönstrets gränser.

För breda justeringar använder du egenskapen Placering eller den bifogade egenskapen ToolTipService.Placement för att ange om verktygstipset ska visas ovanför, nedanför, till vänster eller till höger om pekaren. Du kan ange egenskaperna VerticalOffset eller HorizontalOffset för att ändra avståndet mellan pekaren och verktygstipset. Endast ett av de två förskjutningsvärdena påverkar den slutliga positionen – VerticalOffset när placeringen är överst eller nederkant, vågrätoffset när placeringen är vänster eller höger.

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

Om en knappbeskrivning döljer innehållet som den refererar till kan du justera dess placering exakt med hjälp av egenskapen PlacementRect. PlacementRect fäster knappbeskrivningens position och fungerar även som ett område som knappbeskrivningen inte kommer att skymma, förutsatt att det finns tillräckligt med skärmutrymme för att rita knappbeskrivningen utanför detta område. Du kan ange rektangelns ursprung i förhållande till ToolTip-ägaren och höjden och bredden på exkluderingsområdet. Egenskapen Placering definierar om ToolTip ska rita ovanför, nedan, vänster eller höger om 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 och WinUI 2

API:er för den här kontrollen finns i Windows.UI.Xaml.Controls namnområde.

Vi rekommenderar att du använder den senaste WinUI 2- för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. För mer information, se hörnradie.

Relaterade artiklar

• ToolTip-klass