Tooltip in Silverlight 3 – part 1

Frequently in our appendices we need to create tool tips. Class ToolTip exists in Silverlight for these purposes. We can create such tool tips more easily by using this class.

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100">
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

As we can see this code is very simple. However, tool tips which we see thus can seem the boring.

Ok. Let's look at how it is possible to define behaviour of these tips in more interesting kind. Also as well as in WPF we can redefine the control template for object ToolTip and essentially change its appearance.

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100">
            <ToolTip.Template>
                <ControlTemplate TargetType="ToolTip">
                    <Border CornerRadius="5" Background="Red">
                        <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                    </Border>
                </ControlTemplate>
            </ToolTip.Template>
            
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

Now our help became more beautiful.

It is clear that to define ControlTemplate each time is ungrateful action, therefore we will define tool tips style.

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100">
            <ToolTip.Style>
                <Style TargetType="ToolTip">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ToolTip">
                                <Border CornerRadius="5" Background="Red">
                                    <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                                </Border>
                            </ControlTemplate>                            
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToolTip.Style>
            
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

After that it is possible to take out this style in resources and to use it repeatedly.

<UserControl.Resources>    
    <Style x:Key="TooltipStyle" TargetType="ToolTip">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Border CornerRadius="5" Background="Red">
                        <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                    </Border>
                </ControlTemplate>                            
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
 
<!-- .... --->
 
<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100" Style="{StaticResource TooltipStyle}">
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

Now our tool tip became more pleasant visually.

However, it is necessary to tell, that removal in styles not always is possible, but about it we will talk next time.

No Comments