ToolTip Styling In Silverlight 3

 
Introduction

Whenever you mouse hover onto a particular control in run time, you have an area where you can display some information. This is achieved by using the ToolTip. Now the default styling of ToolTip is very common. So in this article we will be seeing how can we change the styling of a ToolTip in Silverlight 3 of course in Blend 3.

Creating the Silverlight Project

Fire up Blend 3 and create a Silverlight 3 Project.


 
We will start styling a ToolTip for an Image Control.

1. Draw three Image Controls in the Grid. (Find Image Control in Asset Library)
   
   
   
   I have made each of them equal width and height.
2. Add Source to the Project store it in images Folder. Give source values to each Image.
   
   
3. Go the XAML code behind and add a ToolTipService.ToolTip tag. Add an Image control and assign the Source Value.
   
   The XAML will look similar to the following:

   <Image HorizontalAlignment="Left" Margin="8,11,0,10" Width="40" Grid.Row="1" Height="50" Source="Images/003.jpg">
             <ToolTipService.ToolTip>
                      <Image Source="Images/003.jpg"/>
             </ToolTipService.ToolTip>
   </Image>
   <Image Height="50" HorizontalAlignment="Left" Margin="52,11,0,10" Width="40" Grid.Row="1" Source="Images/008.jpg">
             <ToolTipService.ToolTip>
                      <Image Source="Images/008.jpg"/>
             </ToolTipService.ToolTip>
   </Image>
   <Image Height="50" HorizontalAlignment="Left" Margin="96,11,0,10" Width="40" Grid.Row="1" Source="Images/009.jpg">
             <ToolTipService.ToolTip>
                      <Image Source="Images/009.jpg"/>
             </ToolTipService.ToolTip>
   </Image>
   
   Now press F5 and see your application running in browser. Now Mouse Hover to the particular images and you will see the real size of the Image. This is cool right. Now we will see some other styles.

4. Add a TextBlock and a TextBox to the Grid.
   
   
5. Go to XAML code behind and find the TextBox. Add the following code to style the ToolTip.

   <ToolTipService.ToolTip>

        <ToolTip Content="Search Your Movies">

                    <ToolTip.Background>

                           <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">

                           <GradientStop Color="ForestGreen" Offset="0.8"/>

                                <GradientStop Color="White" Offset="0"/>

                           </LinearGradientBrush>

                    </ToolTip.Background>

               </ToolTip>

   </ToolTipService.ToolTip>

In above code what do you see is; we have added a ToolTip.Service and added Content as ToolTip itself. Further we designed the ToolTip's Background property to a Linear Gradient Brush.

Run your application by pressing F5, you will see the following when you Mouse Over on the TextBox.


 
That's it, this is from my side. You can imagine of your own design of the ToolTip and try building it.

Enjoy Animating.