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.