Posted by: Zeeshan Amjad | May 19, 2010

Display tooltip in List box items


Sometimes we don’t want to display all the information in list view columns, but leave some information to display in tooltip. Let’s take a look at example of customers where we are going to display customer’s name and address in columns, but their phone number in tool tip. Here is a  class do define its data structure.

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

We can define the data template on cell level for tool tip. Here is XAML code to define data template.

  1: <GridViewColumn Width="145" Header="Name">
  2: 	<GridViewColumn.CellTemplate>
  3: 		<DataTemplate>
  4: 			<TextBlock Text="{Binding Name}">
  5: 				<TextBlock.ToolTip>
  6: 					<TextBlock Text="{Binding PhoneNo}"/>
  7: 				</TextBlock.ToolTip>
  8: 			</TextBlock>
  9: 		</DataTemplate>
 10: 	</GridViewColumn.CellTemplate>
 11: </GridViewColumn>
 12: 

Here is complete C# code of the program.

  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: using System.Collections.ObjectModel;
 15: 
 16: namespace WpfToolTip
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         private ObservableCollection<Customer> customers = new ObservableCollection<Customer>();
 24: 
 25:         public Window1()
 26:         {
 27:             InitializeComponent();
 28: 
 29:             customers.Add(new Customer("Alex", "Frederick MD", "111-111-1111"));
 30:             customers.Add(new Customer("Bob", "Newton MA", "222-222-2222"));
 31:             customers.Add(new Customer("Charlis", "Burbank MA", "333-333-3333"));
 32:             customers.Add(new Customer("Dave", "Allentown PA", "444-444-4444"));
 33: 
 34:             DataContext = customers;
 35: 
 36:         }
 37:     }
 38: 
 39:     class Customer
 40:     {
 41:         public Customer(String name, String address, String phoneNo)
 42:         {
 43:             Name = name;
 44:             Address = address;
 45:             PhoneNo = phoneNo;
 46:         }
 47: 
 48:         public String Name
 49:         { get; set; }
 50: 
 51:         public String Address
 52:         { get; set; }
 53: 
 54:         public String PhoneNo
 55:         { get; set; }
 56:     }
 57: }
 58: 

 

And here is complete XAML code of the program.

  1: <Window x:Class="WpfToolTip.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="300">
  5:     <Grid>
  6:         <ListView Margin="5" ItemsSource="{Binding}">
  7:             <ListView.View>
  8:                 <GridView>
  9:                     <GridViewColumn Width="145" Header="Name">
 10:                         <GridViewColumn.CellTemplate>
 11:                             <DataTemplate>
 12:                                 <TextBlock Text="{Binding Name}">
 13:                                     <TextBlock.ToolTip>
 14:                                         <TextBlock Text="{Binding PhoneNo}"/>
 15:                                     </TextBlock.ToolTip>
 16:                                 </TextBlock>
 17:                             </DataTemplate>
 18:                         </GridViewColumn.CellTemplate>
 19:                     </GridViewColumn>
 20:                     <GridViewColumn Width="145" Header="Address">
 21:                         <GridViewColumn.CellTemplate>
 22:                             <DataTemplate>
 23:                                 <TextBlock Text="{Binding Address}">
 24:                                     <TextBlock.ToolTip>
 25:                                         <TextBlock Text="{Binding PhoneNo}"/>
 26:                                     </TextBlock.ToolTip>
 27:                                 </TextBlock>
 28:                             </DataTemplate>
 29:                         </GridViewColumn.CellTemplate>
 30:                     </GridViewColumn>
 31:                 </GridView>
 32:             </ListView.View>
 33:         </ListView>
 34:     </Grid>
 35: </Window>
 36: 

 

Here is the output of the program.

ListViewToolTipOutput

Advertisements

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: