Le contrôle ToolTips (InfoBulle)

"Tooltips", "InfosTips" et "Hints" - sont autant de noms différents pour un même concept : La possibilité d'avoir des informations supplémentaires sur un contrôle spécifique ou sur un lien en passant la souris au-dessus. Il est évidemment possible d'avoir recours à ce concept avec WPF, en utilisant la propriété ToolTip de la classe FrameWorkElement, de laquelle la plupart des contrôles sont dérivés.

Spécifier un "Tooltip" pour un contrôle est extrêmement simple, comme vous allez le constater dans ce premier exemple basique :

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

Comme vous pouvez le voir sur la capture d'écran, une fois la souris au-dessus du bouton, une boite flottante contenant la chaîne de caractère spécifiée apparaît. C'est ce que la plupart des frameworks graphiques offrent : l'affichage d'une chaîne de caractères et rien de plus.

Cela dit, en WPF, la propriété ToolTip n'est pas de type String, Mais de type Object, ce qui veut dire que l'on peut placer ce que l'on veut à l’intérieur. Cela ouvre des possibilités assez intéressantes et permet de fournir à l'utilisateur des infos-bulles, plus riches et pertinentes. Observez l'exemple ci-après et comparez-le au premier :

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

Notez la manière dont le premier exemple utilise une simple info-bulle textuelle pour le premier bouton et une plus complexe pour le deuxième. Dans ce cas plus avancé, nous utilisons un panel comme contrôle racine, puis nous sommes libres d'y ajouter autant de contrôles enfants que nous le voulons. Le résultat est plutôt intéressant, avec un header, une description et le conseil "Appuyez sur F1 pour plus d'aide" comprenant une icône d'aide.

Options avancées

La classe ToolTipService possède un tas de propriétés intéressantes qui vont affecter le comportement de vos info-bulles. Vous les spécifiez directement sur le contrôle qui possède l'info-bulle, par exemple, comme ici où nous avons augmenté le temps d'apparition de l'info-bulle en utilisant la propriété ShowDuration (Paramétrée à 5000 millisecondes soit 5 secondes).

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

Vous pouvez aussi contrôler si l'info-bulle aura une ombre, en utilisant la propriété HasDropShadow, ou alors si l'info-bulle doit s'afficher même quand le contrôle est désactivé, en utilisant la propriété ShowOnDisabled. il y a plusieurs autres propriétés intéressantes, pour une liste complète consulter la documentation : http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

Résumé

Les info-Bulles peuvent être d'une grande aide pour les utilisateurs, et avec WPF, il y a deux manières extrêmement faciles et flexibles de les utiliser. Vous pouvez à la fois contrôler complètement le design et le contenu de l'info-bulle, avec les propriétés de la classe ToolTipService, et ainsi créer des indications d'aide plus pertinentes pour l'utilisateur dans vos applications.