Posted by: Zeeshan Amjad | May 24, 2010

Displaying Tooltip in Tab Control


We have already seen example of displaying tooltip in different control. Now we are going to display the tooltip in tab control. To do this we are going to do the data binding with tab control. We have already seen one example of doing data binding with tab control here. We are going to use the same technique here, but this time for tooltip. Here is our data class.

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

Now we are going to make object of ObservableCollection of StateInfo type and insert some data into it. Here is a code to do this.

  1: states.Add(new StateInfo("Maryland", "Annapolis", "Baltimore"));
  2: states.Add(new StateInfo("Virginia", "Richmond", "Virginia Beach"));
  3: states.Add(new StateInfo("Pennsylvania", "Harrisburg", "Philadelphia"));
  4: states.Add(new StateInfo("Delaware", "Dover", "Wilmington"));
  5: 

Now we are going to define the Tab control item template to display the tooltip in the tab control. Here is XAML code to do this.

  1: <TabControl.ItemTemplate>
  2: 	<DataTemplate>
  3: 		<TextBlock Text="{Binding Name}">
  4: 			<TextBlock.ToolTip>
  5: 				<TextBlock Text="{Binding Capital}"/>
  6: 			</TextBlock.ToolTip>
  7: 		</TextBlock>
  8: 	</DataTemplate>
  9: </TabControl.ItemTemplate>
 10: 

It will display the state name in the tab header and stats capital as a tooltip when we place mouse pointer on the it. 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 WpfTabControl
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         ObservableCollection<StateInfo> states = new ObservableCollection<StateInfo>();
 24:         public Window1()
 25:         {
 26:             InitializeComponent();
 27: 
 28:             states.Add(new StateInfo("Maryland", "Annapolis", "Baltimore"));
 29:             states.Add(new StateInfo("Virginia", "Richmond", "Virginia Beach"));
 30:             states.Add(new StateInfo("Pennsylvania", "Harrisburg", "Philadelphia"));
 31:             states.Add(new StateInfo("Delaware", "Dover", "Wilmington"));
 32: 
 33:             DataContext = states;
 34:         }
 35:     }
 36: 
 37:     public class StateInfo
 38:     {
 39:         public StateInfo(String name, String capital, String largestCity)
 40:         {
 41:             Name = name;
 42:             Capital = capital;
 43:             LargestCity = largestCity;
 44:         }
 45: 
 46:         public String Name
 47:         { get; set; }
 48: 
 49:         public String Capital
 50:         { get; set; }
 51: 
 52:         public String LargestCity
 53:         { get; set; }
 54:     }
 55: }
 56: 

Here is complete XAML code of the program

  1: <Window x:Class="WpfTabControl.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Tab Control Tooltip" Height="300" Width="400">
  5:     <Grid>
  6:         <TabControl Margin="5" ItemsSource="{Binding}">
  7:             <TabControl.ItemTemplate>
  8:                 <DataTemplate>
  9:                     <TextBlock Text="{Binding Name}">
 10:                         <TextBlock.ToolTip>
 11:                             <TextBlock Text="{Binding Capital}"/>
 12:                         </TextBlock.ToolTip>
 13:                     </TextBlock>
 14:                 </DataTemplate>
 15:             </TabControl.ItemTemplate>
 16:             <TabControl.ContentTemplate>
 17:                 <DataTemplate>
 18:                     <TextBlock Text="{Binding LargestCity}"/>
 19:                 </DataTemplate>
 20:             </TabControl.ContentTemplate>
 21:         </TabControl>
 22:     </Grid>
 23: </Window>
 24: 

Here is the output of the program.

TabControlTooltip

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: