Advanced View of a ToolTip in Silverlight 3
 
Published: 16 Nov 2009
Abstract
In this article, Sergey examines the capabilities of Silverlight to create an advanced view of a tool tip. After a short introduction, he shows ways to create the tool tip with standard representations and examines the customization capabilities of the tool tip view. Finally, he shows how to create animations for the tool tip.
by Sergey Zwezdin
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 42458/ 63

Introduction

Usually in any business application there is a big set of control elements which often implement complex functionality and can confuse a user. To make a user’s work easy, there are various types of help in almost every application. These helps are shown in a variety of ways: labels and images on a form, audio and video resources, etc. However, the most popular are tooltips which are displayed as a result of a mouse cursor hovering over a control element. This kind of help is very user-friendly because it allows us to use the maximum space on a form (just necessary help is displayed).

Tool tips support is already implemented in both Windows Presentation Foundation and Silverlight and there is no need to make additional efforts to realize similar behavior. However, you should not expect that, in Silverlight, there are fewer capacities to work with tool tips than in WPF. Nevertheless, existing functionality is enough to create your own scenarios of work with tool tips.

Definition of simple tool tip in Silverlight

ToolTipService object is used to set a tool tip. To define a tool tip to a Silverlight control element, it is necessary to attach "ToolTipService.ToolTip" property to it. It can be done for any Silverlight control element. This attached property should contain an object of type ToolTip. This object will be displayed to a user as a result of hovering a mouse cursor over a control element.

ToolTip object is a visual control element. It is an inheritor of a ContentControl object and contains a number of properties that allows us to manage an application appearance. In the simplest case a ToolTip object can contain a base text in a TextBlock control element. To create such pop-up tool tip it is necessary to do the following definition in XAML code.

Listing 1 - Simple definition of tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip>
                  <TextBlock Text="Tooltip for Button control"/>
            </ToolTip>
      </ToolTipService.ToolTip>

</Button>

In this example for the button there will be a simple tool tip as is shown in a following picture.

Figure 1: Simple tool tip

In this case any value of tool tip properties is not set. Usage of these properties helps to manage a tool tip appearance. For example, you can enter a big length text and specify sizes of a tool tip. For these purposes Width and Height properties are used. It is strongly recommended to define these properties. If they are set, it is easy to understand sizes of a tool tip. If width and height properties are not set, the runtime of Silverlight specifies sizes of a tool tip depending on its content.

Listing 2 - Sizing of tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Width="150" Height="50">
                  <TextBlock Text="Tooltip for Button control. Tooltip for Button
                        control. Tooltip for Button control. Tooltip for Button 
                        control" TextWrapping="Wrap"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

If values of width and height of a tool tip are set then a control element is displayed in strictly set sizes and all other content is cut off.

Figure 2: Tool tip with fixed size

Moreover, you can define a tool tip appearance. For example, it is possible to set background color, font color, a font name and its size, a thickness and color of a border, a transparency and other visual properties which can essentially affect a tool tip appearance. A visual appearance of a tool tip border can be defined too.

Listing 3 - Defining visual appearance of a border for the tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Width="150" Height="50" Background="Gray" FontSize="8" 
                  Foreground="White" Opacity="0.8" 
                  BorderBrush="Red" BorderThickness="2">
                  <TextBlock 
                        Text=" Tooltip for Button control. Tooltip for Button
                              control. Tooltip for Button control. Tooltip for 
                              Button control" TextWrapping="Wrap"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

This definition of a tool tip for a control element looks like this.

Figure 3: Tool tip with border

Also there is no necessity to use only a text in tool tips. Actually, you can use any Silverlight control elements within a tool tip. However, you should understand that usage of some control elements, such as a button, textbox, etc., is not meaningful because a tool tip will be hidden as soon as a user moves a mouse cursor (the user will not have the possibility to work with these controls). However, you can place an image within a tool tip, for example.

Listing 4 - Tool tip with image

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Width="150" Height="26" Background="Gray" FontSize="8" 
                  Foreground="White" Opacity="0.8" BorderBrush="Red" 
                  BorderThickness="2">
                  <StackPanel Orientation="Horizontal">
                        <Image Source="book.png" Width="16" Height="16"/>
                        <TextBlock Text="Some text." TextWrapping="Wrap"/>
                  </StackPanel>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

Thus, this example will be displayed as follows.

Figure 4: Tool tip with image

 

Usage of the specified properties makes it possible to change appearance of a tool tip essentially. In some situations more significant changes of a tool tip appearance can be demanded. For this purpose you should create a new tool tip template (ControlTemplate). For example, creations of a tool tip with a non-standard form. For these purposes a Path control can be used to draw your own form for a tool tip.

Listing 5 - Tool tip with custom form

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip>
                  <ToolTip.Template>
                        <ControlTemplate TargetType="ToolTip">
                        <Grid>
                              <Path Fill="Blue" Stretch="Fill" Stroke="#FF000000"
Margin="0" UseLayoutRounding="False" Data="M290,232 C255.65538,225.35266
230.24176,237 198,237 C198,237.66667 198,238.33333 198,239 C184.91988,239 
147.17065,252.34129 162,282 C173.83936,305.67871 188.39276,311.26788 226,305 
C242.90622,302.18228 258.14798,288.43201 277,301 C291.76587,310.8439 
303.67093,309.80832 324,304 C333.82855,301.19183 350.48572,296.19049 356,287 
C363.6926,284.80212 361.08459,285.57697 363,276 C364.26926,269.65378 
368.23724,266.49304 360,262 C350.63977,256.89441 336.47565,259.85699 326,257 
C315.53107,254.14484 294.14899,268.5047 289,256 C286.06909,248.88211 
289.59357,249.43437 293,243 C297.50867,234.4836 291.76053,239.34572 290,232 z"/>
                              <ContentPresenter 
                                    Content="{TemplateBinding Content}"  
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"/>
                        </Grid>
                        </ControlTemplate>
                  </ToolTip.Template>
                  
                  <TextBlock Text="Some text"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

Defining a template, it is important to insert a ContentPresenter control element to display contents of a tool tip.

Figure 5: Tool tip with custom template

A lot of different templates for tool tips can be set in Silverlight.

An attentive look at all the previous examples makes it clear to understand that the way to define a visual representation of a tool tip directly at its description is not so convenient. It is much more convenient to store templates and other visual options somewhere in a special place and use them, when it is necessary. To do it you need to define a tool tip style in resources of a form or in external resources which are connected to an application.

Listing 6 - Defining style for the tool tip

<Style x:Key="TooltipStyle" TargetType="ToolTip">
      <Setter Property="Template">
            <Setter.Value>
                  <ControlTemplate TargetType="ToolTip">
                        <Border>
                              <Grid>
                                    <Path Fill="Blue" Stretch="Fill" 
Stroke="#FF000000" Margin="0" UseLayoutRounding="False" Data="M290,232 
C255.65538,225.35266 230.24176,237 198,237 C198,237.66667 198,238.33333 198,239 
C184.91988,239 147.17065,252.34129 162,282 C173.83936,305.67871 
188.39276,311.26788 226,305 C242.90622,302.18228 258.14798,288.43201 277,301 
C291.76587,310.8439 303.67093,309.80832 324,304 C333.82855,301.19183 
350.48572,296.19049 356,287 C363.6926,284.80212 361.08459,285.57697 363,276 
C364.26926,269.65378 368.23724,266.49304 360,262 C350.63977,256.89441 
336.47565,259.85699 326,257 C315.53107,254.14484 294.14899,268.5047 289,256 
C286.06909,248.88211 289.59357,249.43437 293,243 C297.50867,234.4836 
291.76053,239.34572 290,232 z"/>
                                    <ContentPresenter 
                                          Content="{TemplateBinding Content}"  
                                          HorizontalAlignment="Center"  
                                          VerticalAlignment="Center"/>
                              </Grid>
                        </Border>
                  </ControlTemplate>
            </Setter.Value>
      </Setter>
</Style>

After determining a style it can be used where necessary to identify a tool tip. When the count of control elements is mass, a code can be essentially reduced. Usage of the following code helps you.

Listing 7 - Defining style-based tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Style="{StaticResource TooltipStyle}">
                  <TextBlock Text="Some text"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

As you can see, it is easy and handy to modify a tool tip appearance. Use a set of standard properties to do simple changes of appearance. If there is a need to get more significant changes in a tool tip appearance it is necessary to redefine a template of a tool tip.

Definition of animation for Tooltip

A tool tip appearance redefining is a very important point of an application style. A way of a tool tip emergence is not less important for sense. If you observe this process by default then it is easy to see that a tool tip appears without applying any visual effect. In some cases this behavior can be acceptable. However, there are scenarios when it is necessary to redefine this behavior and display a tool tip using animation.

In Silverlight there are ways to define animation of a tool tip showing and hiding. For these purposes there is a mechanism of triggers which allows us to define show behavior of a tool tip. To specify an animation you should create Storyboard which is started at the moment the trigger has responded.

Listing 8 - Defining event trigger for tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Name="Tooltip1">
                  <ToolTip.Triggers>
                        <EventTrigger>
                              <BeginStoryboard>
                                    <Storyboard>
                                          <DoubleAnimation  
                                                Storyboard.TargetName="Tooltip1"  
Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:00:00.4"/>
                                    </Storyboard>
                              </BeginStoryboard>
                        </EventTrigger>
                  </ToolTip.Triggers>
                  <ToolTip.Template>
                        <ControlTemplate TargetType="ToolTip">
                              <Grid>
                                    <Path Fill="Blue" Stretch="Fill" 
Stroke="#FF000000" Margin="0" UseLayoutRounding="False" Data="M290,232 
C255.65538,225.35266 230.24176,237 198,237 C198,237.66667 198,238.33333 198,239 
C184.91988,239 147.17065,252.34129 162,282 C173.83936,305.67871 
188.39276,311.26788 226,305 C242.90622,302.18228 258.14798,288.43201 277,301 
C291.76587,310.8439 303.67093,309.80832 324,304 C333.82855,301.19183 
350.48572,296.19049 356,287 C363.6926,284.80212 361.08459,285.57697 363,276 
C364.26926,269.65378 368.23724,266.49304 360,262 C350.63977,256.89441 
336.47565,259.85699 326,257 C315.53107,254.14484 294.14899,268.5047 289,256 
C286.06909,248.88211 289.59357,249.43437 293,243 C297.50867,234.4836 
291.76053,239.34572 290,232 z"/>
                                    <ContentPresenter 
                                          Content="{TemplateBinding Content}" 
                                          HorizontalAlignment="Center" 
                                          VerticalAlignment="Center"/>
                              </Grid>
                        </ControlTemplate>
                  </ToolTip.Template>
                  
                  <TextBlock Text="Some text"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

In this case, animation is a smooth appearance of a tool tip in an application. But at the same time, animation can be as complex as it is necessary. For example, it is possible to use animation to stretch a width of a tool tip at the moment of its appearance.

Listing 9 - Animation of stretching of width for tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Width="100">
                  <ToolTip.RenderTransform>
                        <ScaleTransform x:Name="ScaleTransofrm1" CenterX="50"/>
                  </ToolTip.RenderTransform>
                  <ToolTip.Triggers>
                        <EventTrigger>
                              <BeginStoryboard>
                                    <Storyboard>
                                          <DoubleAnimation 
Storyboard.TargetName="ScaleTransofrm1" Storyboard.TargetProperty="ScaleX" 
From="0" To="1" Duration="0:00:00.5"/>
                                    </Storyboard>
                              </BeginStoryboard>
                        </EventTrigger>
                  </ToolTip.Triggers>
            
                  <TextBlock Text="Some text"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>   

Also, you can combine some animations and create more complex appearance effects. For example, it is possible to stretch a tool tip on width and height and change a value of an transparency.

Listing 10 - More difficult animation for the tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Name="Tooltip2" Width="100" Height="80">
                  <ToolTip.RenderTransform>
                        <ScaleTransform x:Name="ScaleTransofrm1" CenterX="50"
                              CenterY="40"/>
                  </ToolTip.RenderTransform>
                  <ToolTip.Triggers>
                        <EventTrigger>
                              <BeginStoryboard>
                                    <Storyboard>
                                          <DoubleAnimation 
Storyboard.TargetName="ScaleTransofrm1" Storyboard.TargetProperty="ScaleX" 
From="0" To="1" Duration="0:00:00.5"/>
                                          <DoubleAnimation 
Storyboard.TargetName="ScaleTransofrm1" Storyboard.TargetProperty="ScaleY" 
From="0" To="1" Duration="0:00:00.5"/>
                                          <DoubleAnimation 
Storyboard.TargetName="Tooltip2" Storyboard.TargetProperty="Opacity" From="0" 
To="1" Duration="0:00:00.5"/>
                                    </Storyboard>
                              </BeginStoryboard>
                        </EventTrigger>
                  </ToolTip.Triggers>
            
                  <TextBlock Text="Some text"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

Finally, you can help to bright up a tool tip appearance thanks to adding animation in a pendulum style. For these purposes, you can use animation-based KeyFrame. You should set boundary points of a tool tip movements in every key frame. As a result, the appearance of the animation can be set as follows.

Listing 10 - Pendulum animation for the tool tip

<Button Content="Button">
      <ToolTipService.ToolTip>
            <ToolTip Name="Tooltip3" Width="100" Height="80">
                  <ToolTip.RenderTransform>
                        <TransformGroup>
                              <ScaleTransform x:Name="ScaleTransofrm2" 
                                    CenterX="50" CenterY="40"/>
                              <RotateTransform x:Name="RotateTransform1" 
                                    CenterX="50" CenterY="0"/>
                        </TransformGroup>
                  </ToolTip.RenderTransform>
                  <ToolTip.Triggers>
                        <EventTrigger>
                              <BeginStoryboard>
                                    <Storyboard>
                                          <DoubleAnimation 
Storyboard.TargetName="ScaleTransofrm2" Storyboard.TargetProperty="ScaleX" 
From="0" To="1" Duration="0:00:00.5"/>
                                          <DoubleAnimation 
Storyboard.TargetName="ScaleTransofrm2" Storyboard.TargetProperty="ScaleY" 
From="0" To="1" Duration="0:00:00.5"/>
                                          <DoubleAnimation 
Storyboard.TargetName="Tooltip3" Storyboard.TargetProperty="Opacity" From="0" 
To="1" Duration="0:00:00.5"/>
                                          
                                          <DoubleAnimationUsingKeyFrames 
Storyboard.TargetName="RotateTransform1" Storyboard.TargetProperty="Angle">
 
<DoubleAnimationUsingKeyFrames.KeyFrames>
      <DoubleKeyFrameCollection>
            <LinearDoubleKeyFrame KeyTime="0:00:00.1" Value="-25" />
            <LinearDoubleKeyFrame KeyTime="0:00:00.2" Value="25" />
            <LinearDoubleKeyFrame KeyTime="0:00:00.3" Value="-17" />
            <LinearDoubleKeyFrame KeyTime="0:00:00.4" Value="17" />
            <LinearDoubleKeyFrame KeyTime="0:00:00.5" Value="-5" />
            <LinearDoubleKeyFrame KeyTime="0:00:00.6" Value="5" />
            <LinearDoubleKeyFrame KeyTime="0:00:00.7" Value="0" />
      </DoubleKeyFrameCollection>
</DoubleAnimationUsingKeyFrames.KeyFrames>
                                          </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                              </BeginStoryboard>
                        </EventTrigger>
                  </ToolTip.Triggers>
            
                  <TextBlock Text="Some text"/>
            </ToolTip>
      </ToolTipService.ToolTip>
</Button>

So, using these techniques, it is possible to define animation of tool tips appearance. Such animation can make a user interface more dynamic and user friendly.

Unfortunately, such animations cannot be packed into styles. It creates additional inconveniences when you try to define an application in a same style. The solution is inheritance of ToolTip class and definition a property to set a style and animation in it.

Conclusion

This article reviewed the approaches that can define a custom design for tool tips in Silverlight 3. Without a doubt, any application can work without such style of tool tips, but changing a tool tip appearance and ways to display it (in the form of animation) helps to make any application more professional and user friendly.



User Comments

Title: Great article   
Name: ACanadian
Date: 2012-11-27 2:08:47 PM
Comment:
Thanks for your clear and concise article! Helped me out today.
Title: title   
Name: name
Date: 2012-10-16 10:46:47 AM
Comment:
comment
Title: request   
Name: mojtaba
Date: 2011-01-24 12:35:17 PM
Comment:
hi
I want to use this tooltip in c# code
could you give me this nice tooltip's style ?
please tell me how can I use that style in code ?
I want to have very short c# code.
my email address : m_master22@yahoo.com
tnx alot






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-10-17 10:06:10 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search