When I started the Silverlight learning series, I never thought I’ll be able to do a 15 part series. Things have gone well so far and they look good for another 15 parts. In todays post I am going to cover a very simple yet powerful feature of Silverlight which is the Tooltip service.
Tooltip is a very common feature available in all programming languages. Be it web based technologies or desktop applications, we always have need to display information to the en user in different forms. Tooltips are mainly used to enhance the user experience when the screen estate is less and the information to be presented to the user is more. They are also used to display additional information with regards to context actions like button functionalities or an image detail. We find tooltips in almost every application. Lets see how to use tooltips in Silverlight application.
How to use Tooltip in Silverlight
Silverlight offers out of box Tooltip functionality. Same is the case with WPF and Windows Phone 7. The beauty of these technologies is they allow you to extend the default look and feel to come up with appealing UI to a customer. Tooltips are implemented as content controls and hence can be used to display any content. We can use images, graphics etc. within a tooltip. I don’t remember such a feature being available in earlier versions of desktop applications like Windows Forms 2.0.
Lets see where we can make use of the Tooltip in NGTweet. We could use it to display additional information in many places like the retweet button. It would be helpful for users to know what the button is meant for. Apart from that we can also use it to display additional text where we cannot display more information due to lack of space. One such place is the text that is displayed with the name of the user of the tweet. If the user name is long and that users tweet is retweeted by another user, we might run short of the space to display both their screen names. This is where I would like to use tooltip.
As can be seen from the above screenshot, first 3 tweets that are displayed are all retweets. The first and the second tweets are able to display the complete names of the two users. Notice carefully at the third one. It cannot fit in the available space. This is one place where we would use a tooltip to display the complete text.
<TextBlock Text="{Binding ScreenName, Mode=OneTime}"
TextTrimming="WordEllipsis"
FontWeight="Bold"
Grid.Row="0"
Grid.Column="1">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding ScreenName, Mode=OneTime}" />
</ToolTipService.ToolTip>
</TextBlock>
In the above code snippet, I have used TextTrimming feature of TextBlock to truncate the text if it does not fit within the available space. Then I have used the ToolTipService to associate a tooltip with the textbox and bound it to the ScreenName property. We can see the output of this in the screenshot below
The tooltip is displayed for the second tweet when we hover the mouse over the screen name. In general tooltips are used to display just the text. But in Silverlight, the tooltip control is a contentcontrol. This allows us to put any content as part of the tooltip. Here is a small example of displaying the profile image along with the screen name.
<ToolTipService.ToolTip>
<ToolTip>
<StackPanel>
<Image Source="{Binding ProfileImageSource, Mode=OneTime}"
Height="50"
Width="50" />
<TextBlock Text="{Binding ScreenName, Mode=OneTime}" />
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
I have stacked up the profile image and the screen name using a StackPanel. And the resulting output is
We can see the image and text both appearing as the tooltip for the 3rd tweet above. Being a content control, tooltip allows us all the other features like styling and templating.
Conclusion
Tooltip is very easy to use. Its helpful in building a good user experience. We can apply tooltip to any framework element like textbox, button, image etc.
As always the complete source code is available for download at Dropbox.
Until next time Happy Programming
No comments:
Post a Comment