O WPF trouxe muita facilidade para a personalização dos objetos, com o uso de estilos e modelos. Podemos alterar tanto a aparência dos objetos quanto seu formato com muita facilidade.

Isto é válido também para as dicas de componentes (tooltips). Neste artigo iremos ver como personalizar as tooltips usando estilos e modelos.

Mudando o formato do texto e a cor da tooltip

O primeiro passo é criar uma janela com um botão. No XamlPad ou XamlCruncher, insira o seguinte código:

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Height="300" Width="300" >

<Grid>

<Button Width="100" Height="40" HorizontalAlignment="Center"

VerticalAlignment="Center" Content="Dica"

ToolTip="Olá, dicas personalizadas" />

</Grid>

</Window>

Este código mostra uma janela com um botão no centro e mostra uma tooltip quando o mouse está sobre ela. O próximo passo é mudar a cor do fundo, a posição e o tipo da fonte. Isto é feito criando-se um novo estilo, que é aplicado aos objetos do tipo ToolTip:

<Grid>

<Grid.Resources>

<Style TargetType="{x:Type ToolTip}">

<Setter Property="FontWeight" Value="Bold" />

<Setter Property="FontStyle" Value="Italic" />

<Setter Property="FontSize" Value="14" />

<Setter Property="Background" Value="Aquamarine" />

<Setter Property="Placement" Value="Top" />

<Setter Property="HorizontalOffset" Value="20" />

</Style>

</Grid.Resources>

<Button Width="100" Height="40" HorizontalAlignment="Center"

VerticalAlignment="Center" Content="Dica"

ToolTip="Olá, dicas personalizadas" />

Desta maneira, a dica fica em negrito/itálico e tamanho 14, com fundo azul claro, como mostrado na Figura 1.

Figura 1 – Dica em negrito/itálico

Uma vez personalizado o estilo, iremos personalizar o formato da dica com a utilização de um modelo (template).

Alterando o formato da tooltip

Quando queremos alterar o formato da dica usamos um modelo. Neste modelo colocamos uma grid com um retângulo de bordas arredondadas. Para mostrar o conteúdo da dica usamos um ContentPresenter. O modelo a ser usado é o seguinte:

<Setter Property="Placement" Value="Top" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToolTip}">

<Grid Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}" Margin="15">

<Rectangle RadiusX="10" RadiusY="10"

Fill="{TemplateBinding Background}" />

<ContentPresenter Margin="10,5,10,5"

HorizontalAlignment="Center" VerticalAlignment="Center"

TextBlock.Foreground="Black" TextBlock.FontSize="12" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

Finalmente, iremos colocar uma sombra na dica, usando um DropShadowBitmapEffect:

<Grid.BitmapEffect>

<BitmapEffectGroup>

<DropShadowBitmapEffect Color="Black" Direction="-45"

ShadowDepth="10" Softness="1" Opacity="0.5"/>

</BitmapEffectGroup>

</Grid.BitmapEffect>

Figura 2 – Tooltip com retângulo de bordas arredondadas

Da mesma maneira que colocamos um retângulo com bordas arrendondadas, podemos colocar uma imagem, bastando para isso substituir o retângulo e reposicionar o ContentPresenter para que apareça no local correto:

<Image Source="C:\Users\Bruno\Pictures\image001.gif" />

<ContentPresenter Margin="10,60,10,30" HorizontalAlignment="Center"

TextBlock.Foreground="Black" TextBlock.FontSize="12" />

Figura 3 – Tooltip com imagem

O código final é o seguinte:

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Height="300" Width="300" >

<Grid>

<Grid.Resources>

<Style TargetType="{x:Type ToolTip}">

<Setter Property="FontWeight" Value="Bold" />

<Setter Property="FontStyle" Value="Italic" />

<Setter Property="FontSize" Value="14" />

<Setter Property="Background" Value="Aquamarine" />

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="VerticalOffset" Value="10" />

<Setter Property="HorizontalOffset" Value="20" />

<Setter Property="Placement" Value="Top" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToolTip}">

<Grid Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}" Margin="15">

<Grid.BitmapEffect>

<BitmapEffectGroup>

<DropShadowBitmapEffect Color="Black" Direction="-45"

ShadowDepth="10" Softness="1" Opacity="0.5"/>

</BitmapEffectGroup>

</Grid.BitmapEffect>

<Image Source="C:\Users\Bruno\Pictures\image001.gif" />

<ContentPresenter Margin="10,60,10,30"

HorizontalAlignment="Center" TextBlock.Foreground="Black"

TextBlock.FontSize="12" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<Button Width="100" Height="40" HorizontalAlignment="Center"

VerticalAlignment="Center" Content="Dica"

ToolTip="Olá, dicas personalizadas" />

</Grid>

</Window>

Conclusões

Como pudemos ver, os recursos de personalização disponíveis no WPF permitem não só personalizar os objetos da janela como também possibilitam alterar o formato das tooltips apresentadas quando o mouse está sobre o objeto. Isto é feito de maneira muito simples, sem que seja necessário escrever código. A mudança de estilo, usando um retângulo ou uma imagem também é muito simples, bastando para isso substituir o desenho no modelo.