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


Top 5 Contributors of the Month
david stephan

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

 Subscribe to Articles

Image In Tooltip In WPF Application

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

Image In Tooltip In WPF Application. In this article we will see how we can Bind an Image to the Tooltip of an Image.
 

Introduction

In this article we will see how we can Bind an Image to the Tooltip of an Image.

Crating WPF Application Project

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

ToolTipWPF1.gif

Here is the basic idea about the sample application; we will have a list of images and it would display it's Image (Larger than Thumbnail) in it's
Tooltip on the top as it's preview.

So let's have a ListBox and then we will bind the images onto it.

    public class Movies
    {
        public string ImageUri { get; set; }
        public string Name { get; set; }
    }


The above Class represents the Movie Structure.

        public Window1()
        {
            InitializeComponent();
            List movieList = new List 
            {
                new Movies{Name="Ajab Prem Ki Gazhab Kahani",ImageUri="Assets/ajabpremkigazhabkahani.jpg"},
                new Movies{Name="Bolt",ImageUri="Assets/bolt.jpg"},
                new Movies{Name="Brother's Bloom",ImageUri="Assets/brothersbloom.jpg"},
                new Movies{Name="Cloudy With A Chance Of MeatBalls",
                    ImageUri="Assets/cloudywithachanceofmeatballs.jpg"},
                new Movies{Name="How To Lose A Guy In 10 Days",ImageUri="Assets/howtoloseaguyin10days.jpg"},
                new Movies{Name="I am Legend",ImageUri="Assets/iamlegend.jpg"},
                new Movies{Name="Idiocracy",ImageUri="Assets/idiocracy.jpg"},
                new Movies{Name="Knowing",ImageUri="Assets/knowing.jpg"},
                new Movies{Name="Madagascar 2",ImageUri="Assets/madagascar2.jpg"},
                new Movies{Name="Sarkar Raj",ImageUri="Assets/sarkarraj.jpg"},
                new Movies{Name="Taken",ImageUri="Assets/taken.jpg"},
                new Movies{Name="Yes Man",ImageUri="Assets/yesman.jpg"},
            };
            lbMovies.ItemsSource = movieList;
        }


We would have an ItemPanelTemplate and ListBoxItemTemplate to view the images in the ListBox.


  



Now run the application to see the images loaded in the ListBox.

ToolTipWPF5.gif

Now our ImageToolTip should display on top of each image, for that to happen I have designed a Border that would contain an Image and it would be bound to Source of Parent Image.


  
    
      
        
        
          
            
              
              
              
            
          
          
        
      
    
  


Include the above inside Image that is defined in the ListBoxItem Style.

Now we are ready to see our Image in Tooltip.

Run the application and mouse hover on any of the Images in the List.

ToolTipWPF7.gif

Hope this article helps.


 Subscribe to Articles

     

Further Readings:

Responses

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