Wahlin on .NET
Using Element to Element Binding for ToolTips in Silverlight
Silverlight 3 or higher provides a feature called “element to element” binding that allows one element to bind to another element’s property.
Silverlight 3 or higher provides a feature called "element to element" binding that allows one element to bind to another element's property. It's quite useful when you need to tie two objects together so that when one object changes the other changes as well. Most of the samples shown for this particular feature tend to focus on using slider controls. For example, when a Slider control changes, its Value property can be bound to a TextBlock element's Text property to automatically update the text. An example of doing this using standard Silverlight binding syntax is shown next. Looking through the code you'll see that the ElementName keyword is used to bind the Text property to the Slider with a name of "TheSlider".
‹Slider x:Name="TheSlider"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Width="200"
Maximum="100.0"
Minimum="0.0"
Value="50.0" /›
‹TextBlock FontFamily="Georgia"
FontSize="18"
Margin="5,0,0,0"
Text="{Binding Value, ElementName=TheSlider, Mode=OneWay}" /›
While this is useful for demonstrations, I don't typically have a need for sliders most of the time. Here's a simple yet effective way to leverage element to element binding for tooltips in Silverlight applications. The sample below shows a ComboBox control with a data template. When a user mouses over the ComboBox control a description of the selected item will be shown. With Silverlight 2 you'd have to write code since there wouldn't be a way for the tooltip service to bind to the selected item declaratively. With Silverlight 3 or higher you can do something like this (notice the ToolTipService attribute):
‹ComboBox
x:Name="WorkCodeComboBox"
ItemsSource="{Binding Source={StaticResource
ViewModel},Path=CurrentTimeSheetView.WorkCodes}"
Style="{StaticResource TimeSheetComboBoxStyle}"
SelectionChanged="WorkCode_SelectionChanged"
ToolTipService.ToolTip="{Binding Path=SelectedItem.Description,
ElementName=WorkCodeComboBox}"›
‹ComboBox.ItemTemplate›
‹DataTemplate›
‹StackPanel Orientation="Horizontal" Margin="0"›
‹TextBlock Text="{Binding WorkCodeID}" Width="30"
Margin="5,0,0,0" /›
‹Rectangle Style="{StaticResource ComboBoxVerticalLine}" /›
‹TextBlock Text="{Binding Description}" Width="250"
Margin="10,0,0,0" /›
‹/StackPanel›
‹/DataTemplate›
‹/ComboBox.ItemTemplate›
‹/ComboBox›
In this case I'm binding the tooltip to the selected item's Description property. At first glance it looks like the ComboBox is binding to itself but in reality it's binding to the ToolTipService's Tooltip property. A simple little trick, but nice when you need it since it saves a line or two of C# code and provides end users with more information about the selected item in the ComboBox.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.