Control ToolTips

Tooltips, infotips o hints - diversos noms però el concepte és el mateix: la capacitat d'obtenir informació extra sobre un control especifico o un link, col·locant el mouse sobre el. WPF òbviament suporta aquest concepte molt bé, i utilitzant la propietat ToolTip dins de la classe FrameworkElement de la qual gairebé qualsevol control WPF hereta.

Especificar un tooltips en un control és molt fàcil, com podràs veure en aquest primer exemple bàsic.

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

Com pots veure en la imatge anterior, això resulta en una ajuda contextual(Tooltips), quan el mouse es posiciona sobre el botó. Això és el que la majoria dels frameworks d'interfície d'usuari ofereix - El poder veure un text i res mes.

No obstant això en WPF, la propietat ToolTip no és tipus string, sinó de tipus objecte, per la qual cosa podem agregar el que vulguem en ella. Això ens dóna moltes possibilitats, on podem oferir a l'usuari tooltips de molta ajuda i molt més enriquits. Per a tenir una referència, compari el següent exemple amb el primer:

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

Fixa't com aquest exemple empra un simple tooltip de text per al primer botó i després un molt més avançat per al segon botó. En el cas avançat, nosaltres usem un panell com a control arrel i després som lliure d'afegir tants controls a aquest panell com desitgem. El resultat és molt fanfarró, amb una capçalera, una descripció i un indici que pots prémer F1 per a mes ajuda, incloent una icona d'ajuda.

Opcions avançades

La classe ToolTipService té un grup de propietats interessants que afectaran el comportament dels teus tooltips. Les pots modificar directament en el control que té el tooltip, per exemple, aquí hem estès el temps que el tooltip es mostra usant la propietat ShowDuration (l'hem canviat a 5.000 mil·lisegons o cosa que és el mateix 5 segons)

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

També pots controlar si el popup ha de tenir ombra o no usant la propietat HasDropShadow, o si els tooltips han de mostrar-se en controls deshabilitats, usant la propietat ShowOnDisabled. Hi ha algunes altres propietats interessants, per a veure la llista completa, si us plau consulta la documentació en: http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

Resum

Els Tooltips poden ser una gran ajuda per a l'usuari, i en WPF, són alhora fàcils d'usar i extremadament flexibles. Afegint el fet que el teu tens completament el control de dissenyar i emplenar el tooltip, amb propietats de la classe ToolTipService per a crear ajudes mes amigables en la teva aplicació.