.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Add Tooltip in DataGrid in WPF

Posted By:Diptimaya Patra       Posted Date: May 08, 2010    Points: 25    Category: WPF    URL: http://www.dotnetspark.com  

Add Tooltip in DataGrid in WPF. In this article we will see some good implementation of tooltip here woth sample wpf application.


I was just having hands on DataGrid in WPF, I was thinking how we can utilize Tooltip in DataGrid. In this article we will see some good implementation here.

Crating WPF Application Project

Fire up Visual Studio 2008 and Create a WPF Application and name the project as TooltipInDataGrid.


We would have a DataGrid in our application. Let's have some sample data and display it in the DataGrid.

public class Employee
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string EmailID { get; set; }
        public string Contact { get; set; }

The above class displays the structure of Employee. Now have a list of sample data and display it.

public Window1()
    ObservableCollection empList = new ObservableCollection();
    for (int i = 1; i <= 20; i++)
        Employee emp = new Employee 
            LastName = "LastName" + i.ToString(),
            EmailID = "EmailID" + i.ToString(),
            Contact = "Contact" + i.ToString(),

    dgData.ItemsSource = empList;

Now we will Customize the DataGrid to have AutoGeneratedColumns = False and we would have our own set of Columns.


As you see in above XAML display, we have first Column as TemplateColumn and rest of the Columns are TextColumns.

Now if we would run the application then we would get the following result.


Perfect. Now we will see how can we use ToolTip to display the cell content.

To display a Tooltip we need to have a TemplateColumn.

As in the previous XAML display we have seen that we have first column as Template Column. Now add the following code so that, we will have a sample ToolTip.



Now we will try to put it all together like all the information on the Tooltip.



Now we will have a good theme that would give a pleasant preview of the Row.

It's time to use Expression Blend now.

Let's have the following design.


The following is the Xaml for the above display.


Now that we have the XAML just add this to our TextBlock.ToolTip tag and we will have to bind the Properties.

Always change the following properties of ToolTip such that, our design is transparent to the Background.



That's it. We are done with this sample, give a try for a better design.

Hope this article helps.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend