Posted by: Zeeshan Amjad | November 3, 2009

Using Multiple Controls in Tooltip


We studied how can we use data binding with tool tip. Now we are going to see that how can use multiple controls inside the tool tip. We can use the panel to apply multiple controls inside the tooltip. Here is the the piece of XAML piece of code to insert two text box inside the toolkit.

  1: <TextBlock.ToolTip>
  2: 	<Border Margin="5" BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
  3: 		<StackPanel Margin="5">
  4: 			<TextBlock Foreground="Blue" FontWeight="Bold" Text="{Binding Name}"/>
  5: 			<TextBlock Text="{Binding Description}"/>
  6: 		</StackPanel>
  7: 	</Border>
  8: </TextBlock.ToolTip>
  9: 

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: 

and here is complete XAML file for this project.

  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:                             <Border Margin="5" BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
 12:                                 <StackPanel Margin="5">
 13:                                     <TextBlock Foreground="Blue" FontWeight="Bold" Text="{Binding Name}"/>
 14:                                     <TextBlock Text="{Binding Description}"/>
 15:                                 </StackPanel>
 16:                             </Border>
 17:                         </TextBlock.ToolTip>
 18:                     </TextBlock>
 19:                 </DataTemplate>
 20:             </ListBox.ItemTemplate>
 21:         </ListBox>
 22:     </Grid>
 23: </Window>
 24: 

Here is the output of the program.

TooltipOutput2

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: