Control ToolTips

Tooltips, infotips o hints -varios nombres pero el concepto es el mismo: la capacidad de obtener información extra acerca de un control especifico o un link, colocando el mouse sobre el. WPF obviamente soporta este concepto muy bien, y utilizando la propiedad ToolTip dentro de la clase FrameworkElement de la cual casi cualquier control WPF hereda.

Especificar un tooltips en un control es muy fácil, como podrás ver en este primer ejemplo básico.

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

Como puedes ver en la imagen anterior, esto resulta en una ayuda contextual(Tooltips), cuando el mouse se posiciona sobre el botón. Esto es lo que la mayoría de los frameworks de interfaz de usuario ofrece - El poder ver un texto y nada mas.

Sin embargo en WPF, la propiedad ToolTip no es tipo string, sino de tipo objeto, por lo que podemos agregar lo que queramos en ella. Esto nos da muchas posibilidades, donde podemos ofrecer al usuario tooltips de mucha ayuda y mucho más enriquecidos. Para tener una referencia, compare el siguiente ejemplo con el primero:

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

Fijate como este ejemplo usa un simple tooltip de texto para el primer botón y luego uno mucho más avanzado para el segundo botón. En el caso avanzado, nosotros usamos un panel como control raiz y luego somos libre de añadir tantos controles a este panel como deseemos. El resultado es muy chulo, con una cabecera, una descripción y un indicio de que puedes pulsar F1 para mas ayuda, incluyendo un icono de ayuda.

Opciones avanzadas

La clase ToolTipService tiene un grupo de propiedades interesantes que afectarán al comportamiento de tus tooltips. Las puedes modificar directamente en el control que tiene el tooltip, por ejemplo, aquí hemos extendido el tiempo que el tooltip se muestra usando la propiedad ShowDuration (la hemos cambiado a 5.000 milisegundos o lo que es lo mismo 5 segundos)

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

También puedes controlar si el popup debe tener sombra o no usando la propiedad HasDropShadow, o si los tooltips deben de mostrarse en controles deshabilitados, usando la propiedad ShowOnDisabled. Hay algunas otras propiedades interesantes, para ver la lista completa, por favor consulta la documentación en: http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

Resumen

Los Tooltips pueden ser una gran ayuda para el usuario, y en WPF, son a la vez fáciles de usar y extremadamente flexibles. Añadiendo el hecho de que tu tienes completamente el control de diseñar y rellenar el tooltip, con propiedades de la clase ToolTipService para crear ayudas mas amigables en tu aplicación.