Monday, 9 April 2012

Custom Tooltip and Popup

Like with everything else in WPF you can override the style for tooltips.

Standard Tooltip

image_thumb3

Custom Tooltip

image_thumb1[1]

<Window.Resources>
<Style x:Key="CustomTooltip" TargetType="{x:Type ToolTip}">
<Setter Property="HorizontalOffset" Value="50" />
<Setter Property="VerticalOffset" Value="-50" />
<Setter Property="Background" Value="Beige" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
</Window.Resources>

<!-- the following code lives inside the control you want to tooltip -->
<Grid.ToolTip>
<ToolTip Style="{StaticResource CustomTooltip}">
<TextBlock>Custom tooltip</TextBlock>
</ToolTip>
</Grid.ToolTip>

This custom tooltip rather boringly just features a textblock but you can customise with any fonts and colours and include any combination of UI controls such as images, animations or even video.


Source:  http://stevenhollidge.com/blog-source-code/WrappingListbox-CustomTooltip.zip


Custom Tooltip with Shape (Path)


image_thumb1

<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="HorizontalOffset" Value="0" />
<Setter Property="VerticalOffset" Value="-75" />
<Setter Property="Background" Value="GhostWhite" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Canvas Width="200" Height="100">
<Path x:Name="Container"
Canvas.Left="0"
Canvas.Top="0"
Margin="20"
Data="M 0,40 L15,50 15,80 150,80 150,0 15,0 15,30"
Fill="{TemplateBinding Background}"
Stroke="Black">
<Path.Effect>
<DropShadowEffect BlurRadius="10"
Opacity="0.5"
ShadowDepth="4" />
</Path.Effect>
</Path>
<TextBlock Canvas.Left="50"
Canvas.Top="28"
Width="100"
Height="65"
Text="{TemplateBinding Content}"
TextWrapping="Wrapwithoverflow" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Source:  http://stevenhollidge.com/blog-source-code/WrappingListbox-CustomTooltip-WithPath.zip


Popup


image_thumb[1]

<Popup x:Name="PopupInfo"
AllowsTransparency="True"
HorizontalOffset="-10"
IsOpen="{Binding ElementName=backgroundGrid,
Path=IsMouseOver,
Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}"
VerticalOffset="-30"
Placement="Right">

<Canvas Width="200" Height="100">
<Path x:Name="Container"
Canvas.Left="0"
Canvas.Top="0"
Margin="20"
Data="M 0,40 L15,50 15,80 150,80 150,0 15,0 15,30"
Fill="Beige"
Stroke="Black">
<Path.Effect>
<DropShadowEffect BlurRadius="10"
Opacity="0.5"
ShadowDepth="4" />
</Path.Effect>
</Path>
<TextBlock Canvas.Left="50"
Canvas.Top="28"
Width="100"
Height="65"
Text="Popup with text...."
TextWrapping="Wrapwithoverflow" />

</Canvas>
</Popup>

Source: http://stevenhollidge.com/blog-source-code/wpf-popup.zip

3 comments: