Posted by: Zeeshan Amjad | November 2, 2009

Using Tooltip with Data Binding


If we are going to use the Tooltip then we can use it very easily using the tooltip class. Here is the class diagram of Tooltip class.

Tooltip 

Now lets take a look at how we can apply the data binding with tooltip. Let’s take a look at our example of state information. We are going to display the name of the state in list box and when user put mouse point on any item of the list box then we will see the description of that item. We are doing data binding to perform both list box and its tooltip.

Here is our StateInfo class to store this information.

  1: public class StateInfo
  2: {
  3:     public StateInfo()
  4:     {
  5:     }
  6: 
  7:     public StateInfo(String name, String description)
  8:     {
  9:         Name = name;
 10:         Description = description;
 11:     }
 12: 
 13:     public String Name
 14:     { get; set; }
 15: 
 16:     public String Description
 17:     { get; set; }
 18: }
 19: 

And here is the piece of code to insert data in it listbox.

  1: listStates = new List<StateInfo>();
  2: 
  3: listStates.Add(new StateInfo("Alaska", "Largest State with respect to Area"));
  4: listStates.Add(new StateInfo("California", "Largest State with respect to Population"));
  5: listStates.Add(new StateInfo("Rohde Island", "Smallest State with respect to Area"));
  6: listStates.Add(new StateInfo("Wyoming", "Smallest State with respect to Population"));
  7: 
  8: list.ItemsSource = listStates;
  9: 

Here is a XAML for doing data binding for both list box item and tooltip.

  1: <Window x:Class="ToolTip.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="ToolTip" Height="300" Width="400">
  5:     <Grid>
  6:         <ListBox Name="list" Margin="5">
  7:             <ListBox.ItemTemplate>
  8:                 <DataTemplate>
  9:                     <TextBlock Text="{Binding Name}">
 10:                         <TextBlock.ToolTip>
 11:                             <TextBlock Text="{Binding Description}"/>
 12:                         </TextBlock.ToolTip>
 13:                     </TextBlock>
 14:                 </DataTemplate>
 15:             </ListBox.ItemTemplate>
 16:         </ListBox>
 17:     </Grid>
 18: </Window>
 19: 

And here is a complete C# code of this project.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace ToolTip
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         private List<StateInfo> listStates;
 23: 
 24:         public Window1()
 25:         {
 26:             InitializeComponent();
 27: 
 28:             listStates = new List<StateInfo>();
 29: 
 30:             listStates.Add(new StateInfo("Alaska", "Largest State with respect to Area"));
 31:             listStates.Add(new StateInfo("California", "Largest State with respect to Population"));
 32:             listStates.Add(new StateInfo("Rohde Island", "Smallest State with respect to Area"));
 33:             listStates.Add(new StateInfo("Wyoming", "Smallest State with respect to Population"));
 34: 
 35:             list.ItemsSource = listStates;
 36:         }
 37:     }
 38: 
 39:     public class StateInfo
 40:     {
 41:         public StateInfo()
 42:         {
 43:         }
 44: 
 45:         public StateInfo(String name, String description)
 46:         {
 47:             Name = name;
 48:             Description = description;
 49:         }
 50: 
 51:         public String Name
 52:         { get; set; }
 53: 
 54:         public String Description
 55:         { get; set; }
 56:     }
 57: }
 58: 

Here is the output of this program when user move the mouse pointer on the list box item “Wyoming”.

Tooltip_Output

Advertisements

Responses

  1. […] the tooltip binding with list view header. We also have already seen the example of tooltip binding here.  Now we are going to use the same tooltip binding technique in our list view […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: