ToolTips - nápovědy k ovládacím prvkům

Tooltipy, infotipy nebo hinty (bublinové nápovědy, informační bubliny) – různé názvy pro tentýž koncept: Možnost, jak získat další informace o určitém ovládacím prvku nebo odkazu tím, že nad nimi podržíme myš (mouse hover). WPF tento koncept samozřejmě také podporuje díky vlastnosti ToolTip definované na třídě FrameworkElement, z níž dědí téměř všechny ovládací prvky WPF.

Přidat k ovládacímu prvku jeho tooltip je velmi jednoduché, jak ostatně uvidíte v tomto prvním a velmi jednoduchém příkladu:

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsSimpleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsSimpleSample" Height="150" Width="400">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

        <Button ToolTip="Click here and something will happen!">Click here!</Button>

    </Grid>
</Window>

Na screenshotech je vidět, že pokud myš podržíte nad tlačítkem, objeví se plovoucí rámeček se zadaným řetězcem. Většina frameworků na UI nabízí právě toto – zobrazení textového řetězce. Nic víc.

Ve WPF je však vlastnost ToolTip nikoliv typu string, nýbrž object, což znamená, že do ní můžeme vložit, cokoliv potřebujeme. To skýtá určité super možnosti, kdy můžeme uživateli nabídnout tooltipy, které jsou mnohem bohatší a užitečnější. Podívejte se třeba na tento příklad a porovnejte ho s tím prvním:

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsAdvancedSample" Height="200" Width="400" UseLayoutRounding="True">
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <Button ToolTip="Create a new file">
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
                </Button.Content>
            </Button>
            <Button>
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
                </Button.Content>
                <Button.ToolTip>
                    <StackPanel>
                        <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
                        <TextBlock>
                        Search your computer or local network
                        <LineBreak />
                        for a file and open it for editing.
                        </TextBlock>
                        <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
                        <WrapPanel>
                            <Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
                            <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
                        </WrapPanel>
                    </StackPanel>
                </Button.ToolTip>
            </Button>
        </ToolBar>

        <TextBox>
            Editor area...
        </TextBox>
    </DockPanel>
</Window>

Všimněte si, že v tomto příkladu je u prvního tlačítka použit jednoduchý tooltip s řetězcem, kdežto druhé tlačítko má tooltip mnohem propracovanější. V tom propracovanějším případě používáme jako kořenový ovládací prvek panel, což nám umožní přidávat do něj podle potřeby i další prvky. Výsledek je fakt bomba – se záhlavím, popisem a tipem, že pro další nápovědu můžete stisknout F1, a to včetně ikony pro nápovědu.

Pokročilé možnosti

Třída ToolTipService má hromadu zajímavých vlastností, které ovlivňují chování vašich tooltipů. Nastavují se přímo na ovládacím prvku s tooltipem jako třeba v tomto příkladu, kde jsme prodloužili čas zobrazení tooltipu pomocí vlastnosti ShowDuration (nastavili jsme ho na 5000 milisekund, čili na 5 sekund):

<Button ToolTip="Create a new file" ToolTipService.ShowDuration="5000" Content="Open" />

Pomocí vlastnosti HasDropShadow můžete dále určit, zda má popup mít stín, a vlastností ShowOnDisabled říkáte, zda se tooltipy mají zobrazovat i pro ovládací prvky, které jsou zakázané (disabled). Existují i další zajímavé vlastnosti, jejich úplný seznam najdete v dokumentaci: http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

Shrnutí

Tootipy mohou být pro uživatele velmi přínosné a ve WPF jsou jednak snadno použitelné a jednak velice flexibilní. Přidejte skutečnost, že díky vlastnostem třídy ToolTipService máte úplnou kontrolu nad vzhledem a obsahem tooltipu, a inline nápověda, kterou vytváříte ve vašich aplikacích, bude uživatelsky ještě přívětivější.