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.

comments powered by Disqus

Featured

  • What's Next for ASP.NET Core and Blazor

    Since its inception as an intriguing experiment in leveraging WebAssembly to enable dynamic web development with C#, Blazor has evolved into a mature, fully featured framework. Integral to the ASP.NET Core ecosystem, Blazor offers developers a unique combination of server-side rendering and rich client-side interactivity.

  • Nearest Centroid Classification for Numeric Data Using C#

    Here's a complete end-to-end demo of what Dr. James McCaffrey of Microsoft Research says is arguably the simplest possible classification technique.

  • .NET MAUI in VS Code Goes GA

    Visual Studio Code's .NET MAUI workload, which evolves the former Xamarin.Forms mobile-centric framework by adding support for creating desktop applications, has reached general availability.

  • Visual Studio Devs Quick to Sound Off on Automatic Updates: 'Please No'

    A five-year-old Visual Studio feature request for automatic IDE updates is finally getting enacted by Microsoft amid a lot of initial developer pushback, seemingly misplaced.

  • First Official OpenAI Library for .NET Goes Beta

    Although it seems Microsoft and OpenAI have been deeply intertwined partners for a long time, they are only now getting around to releasing an official OpenAI library for .NET developers, joining existing community libraries.

Subscribe on YouTube