Advanced View of a ToolTip in Silverlight 3
page 3 of 4
by Sergey Zwezdin
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 45140/ 108

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.


View Entire Article

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-05-22 11:05:03 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search