Posted by: Zeeshan Amjad | February 15, 2010

Tooltip binding with ListView Header


We have already seen example of list view that has customized header template and embedded list box inside the list view item here. This time we are going to change this program little bit and add 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 program.

Perform tooltip binding to our program is in fact very easy. We only have to add couple of XAML lines in our existing program. Here is a piece of code we use in Column header template datatemplate.

  1: <TextBlock Foreground="Blue" FontSize="14" FontWeight="Bold" Margin="5" 
  2: 		   Text="{Binding}" Width="Auto">
  3: 	<TextBlock.ToolTip>
  4: 		<TextBlock Text="{Binding}"/>
  5: 	</TextBlock.ToolTip>
  6: </TextBlock>
  7: 

Rest of the program is almost similar to the previous one. The other change we have in our this program is use the text block instead of expender to display the state nick name. Here is complete XAML code of our program.

  1: <Window x:Class="UIElement.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:UIElement"
  5:     Title="ListView Example" Height="400" Width="550">
  6:     <Window.Resources>
  7:         <Style x:Key="myStyle" TargetType="{x:Type ListViewItem}">
  8:             <Setter Property="Background" Value="AliceBlue"/>
  9:             <Setter Property="FontSize" Value="14"/>
 10:             <Setter Property="Foreground" Value="Green"/>
 11:         </Style>
 12:     </Window.Resources>
 13:     <Grid>        
 14:         <ListView ItemContainerStyle="{StaticResource myStyle}" 
 15:                   Name="list" Margin="5" HorizontalContentAlignment="Stretch">
 16:             <ListView.View>                
 17:                 <GridView>
 18:                     <GridView.ColumnHeaderTemplate>
 19:                         <DataTemplate>
 20:                             <Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
 21:                                 <Border.Background>
 22:                                     <LinearGradientBrush>
 23:                                         <GradientStop Offset="0" Color="Wheat"/>
 24:                                         <GradientStop Offset="1" Color="LightCoral"/>
 25:                                     </LinearGradientBrush>
 26:                                 </Border.Background>
 27:                                 <TextBlock Foreground="Blue" FontSize="14" FontWeight="Bold" Margin="5" 
 28:                                            Text="{Binding}" Width="Auto">
 29:                                     <TextBlock.ToolTip>
 30:                                         <TextBlock Text="{Binding}"/>
 31:                                     </TextBlock.ToolTip>
 32:                                 </TextBlock>
 33:                             </Border>                            
 34:                         </DataTemplate>
 35:                     </GridView.ColumnHeaderTemplate>
 36:                     <GridViewColumn Width="Auto" Header="Visited">
 37:                         <GridViewColumn.CellTemplate>
 38:                             <DataTemplate>
 39:                                 <CheckBox IsChecked="{Binding Visited}"/>
 40:                             </DataTemplate>
 41:                         </GridViewColumn.CellTemplate>
 42:                     </GridViewColumn>
 43:                     <GridViewColumn Width="Auto" Header="State Name" DisplayMemberBinding="{Binding Path=Name}"/>
 44:                     <GridViewColumn Width="Auto" Header="State Capital" DisplayMemberBinding="{Binding Path=Capital}"/>
 45:                     <GridViewColumn Width="Auto" Header="State Nick Name">
 46:                         <GridViewColumn.CellTemplate>
 47:                             <DataTemplate>
 48:                                 <TextBlock Margin="5" Text="{Binding Path=NickName}"/>
 49:                             </DataTemplate>
 50:                         </GridViewColumn.CellTemplate>
 51:                     </GridViewColumn>
 52:                     <GridViewColumn Width="100" Header="Cities">
 53:                         <GridViewColumn.CellTemplate>
 54:                             <DataTemplate>
 55:                                 <ComboBox Width="75" ItemsSource="{Binding Cities}" HorizontalContentAlignment="Stretch">
 56:                                     <ComboBox.ItemTemplate>
 57:                                         <DataTemplate>
 58:                                             <StackPanel Orientation="Horizontal">
 59:                                                 <CheckBox Margin="2" VerticalAlignment="Center"/>
 60:                                                 <TextBlock Margin="2" FontSize="12" Text="{Binding}"/>
 61:                                             </StackPanel>
 62:                                         </DataTemplate>
 63:                                     </ComboBox.ItemTemplate>
 64:                                 </ComboBox>
 65:                             </DataTemplate>
 66:                         </GridViewColumn.CellTemplate>
 67:                     </GridViewColumn>
 68:                 </GridView>
 69:             </ListView.View>
 70:         </ListView>
 71:     </Grid>
 72: </Window>
 73: 

And here is complete C# code of our 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: 
 15: namespace UIElement
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {            
 24:             InitializeComponent();
 25: 
 26:             List<StateInfo> statesList = new List<StateInfo>();
 27: 
 28:             StateInfo s1 = new StateInfo();
 29:             s1.Name = "Maryland";
 30:             s1.Capital = "Annapolis";
 31:             s1.NickName = "Old Line State";
 32:             s1.Visited = true;
 33:             List<String> s1List = new List<string>();
 34:             s1List.Add("Frederick");
 35:             s1List.Add("Baltimore");
 36:             s1List.Add("Rockville");
 37:             s1List.Add("Hagerstown");
 38:             s1.Cities = s1List;
 39:             statesList.Add(s1);
 40: 
 41:             StateInfo s2 = new StateInfo();
 42:             s2.Name = "California";
 43:             s2.Capital = "Sacramento";
 44:             s2.NickName = "Golden State";
 45:             s2.Visited = true;
 46:             List<String> s2List = new List<string>();
 47:             s2List.Add("Los Angeles");
 48:             s2List.Add("San Franscico");
 49:             s2List.Add("San Deiago");
 50:             s2List.Add("San Jose");
 51:             s2List.Add("Fresno");
 52:             s2List.Add("Long Beach");
 53:             s2.Cities = s2List;
 54:             statesList.Add(s2);
 55: 
 56:             StateInfo s3 = new StateInfo();
 57:             s3.Name = "Taxes";
 58:             s3.Capital = "Austin";
 59:             s3.NickName = "Lone Star State";
 60:             s3.Visited = true;
 61:             List<String> s3List = new List<string>();
 62:             s3List.Add("Houston");
 63:             s3List.Add("Dallas");
 64:             s3List.Add("San Antonio");
 65:             s3List.Add("El Paso");
 66:             s3.Cities = s3List;
 67:             statesList.Add(s3);
 68: 
 69:             StateInfo s4 = new StateInfo();
 70:             s4.Name = "Ohio";
 71:             s4.Capital = "Columbus";
 72:             s4.NickName = "Buckeye State";
 73:             s4.Visited = false;
 74:             List<String> s4List = new List<String>();
 75:             s4List.Add("Cleveland");
 76:             s4List.Add("Cincinnati");
 77:             s4.Cities = s4List;
 78:             statesList.Add(s4);            
 79: 
 80:             StateInfo s5 = new StateInfo();
 81:             s5.Name = "Florida";
 82:             s5.Capital = "Tallahassee";
 83:             s5.NickName = "Sunshine State";
 84:             s5.Visited = false;
 85:             List<String> s5List = new List<string>();
 86:             s5List.Add("Miami");
 87:             s5List.Add("Jacksonville");
 88:             s5List.Add("Tampa");
 89:             s5.Cities = s5List;
 90:             statesList.Add(s5);
 91: 
 92:             list.ItemsSource = statesList;
 93:         }
 94:     }
 95: 
 96:     public class StateInfo
 97:     {
 98:         private List<String> list;
 99: 
100:         public StateInfo()
101:         {
102:         }
103: 
104:         public StateInfo(String name, String capital, String nickName, String timeZone, Boolean visited)
105:         {
106:             Name = name;
107:             Capital = capital;
108:             NickName = nickName;
109:             TimeZone = timeZone;
110:             Visited = visited;
111: 
112:             list = new List<string>();
113:         }
114: 
115:         public String Name
116:         { get; set; }
117: 
118:         public String Capital
119:         { get; set; }
120: 
121:         public String NickName
122:         { get; set; }
123: 
124:         public String TimeZone
125:         { get; set; }
126: 
127:         public Boolean Visited
128:         { get; set; }
129: 
130:         public List<String> Cities
131:         {
132:             get { return list; }
133:             set { list = value; }
134:         }        
135:     }
136: }
137: 

This is the output of the program.

ListViewOutput_07

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: