Enlarge a picture and add text on mouseover - using Listview

Hello.  Currently I am using a Listview box.  In the box I have a list of items, with pictures above each item title.  As I type into a textbox, the results of the Listview box change dynamicaly to match what I am typing.


I want to make it so that if I hold the mouse cursor over the picture of one of the items, the picture is enlarged, and some extra details about the item are displayed beneath the picture... then when I move the mouse away it shrinks back into the list.  

Is this possible with listview?  If so can somebody point me on the right track, or tell me what approach i need to take?

Thanks,
twibblejawayAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
1) How are the pictures displayed?  

2) What is the View set to for the ListView?  LargeIcons?

Bob
twibblejawayAuthor Commented:
1)I am getting the image name from an access database,
then:
LargeImageList.Images.Add("image")

then putting it into the Listview:
Listview.Items.Insert(i, "item_name", i)


2) It is set to largeicons.  
Bob LearnedCommented:
Do you want to display larger images in the ListView or another control, like a PictureBox control?

Bob
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

twibblejawayAuthor Commented:
Maybe I am going about this the wrong way.  What I want is
A box on the screen with images:

-----------------------
|   IMG_A  IMG_B   |
|    texta    textb    |
|                          |
|                          |
|   IMG_C  IMG_D  |
|    textc    textd    |
|                          |
|                          |
|                          |
-----------------------

When I mouse over IMG_A, i want the image to be enlared, and also extra information about the image to be displayed (eg, price, quantity available)

How can I accomplish this?
Bob LearnedCommented:
I think that your approach would be very difficult, if not impossible, to accomplish.  Your ListView is bound to an ImageList.  ImageList's can only contain fixed image sizes.  You would have to switch ImageLists between a small list, and a large list, but that size would apply to all the images, and not just the selected item.  The ListView control has a StateImageList, but that wouldn't help.

Bob
twibblejawayAuthor Commented:
Any ideas how I can accomplish what I want to do?
Bob LearnedCommented:
I was asking before if you wanted to use a larger PictureBox to display the larger image with a caption below?  You have to have to form real estate, though.

-----------------------                     +---------------------------------------+
|   IMG_A  IMG_B   |                    |                                                  |
|    texta    textb    |                    |                                                  |
|                          |                    |           Larger IMG_A                   |
|                          |                    |                                                  |
|   IMG_C  IMG_D  |                    |                                                  |
|    textc    textd    |                    |                                                  |
|                          |                    |                                                  |
|                          |                     +---------------------------------------+
|                          |                    Label:  This is IMG_A.  It is a 10 KB GIF file.
-----------------------
arthurmnevCommented:
A few ways to go about it:

Use two forms:
1) the main form with all your controls on it
2) "tooltip form" that will contain a larger image and a blank label

If you want enlarged picture to appear kind of like tooltip when you move the mouse over then:

get the left side of the picture box
get pixel coordinate to identify line boundaries coordinates
trap mousemove event
as soon as mouse is over a particular set of coordinate populate a mini form with picture and text  and set location to left side of the X=listbox Y=mouse Y snapped to the lower Y (position the form over the current line or you can snap it to next line's Y to position it below)
position the form at coordinates over the line.
if you do dynamic opacity change, it will look like fade in/out.
If you change the window style, you can make the clicks go through the upper levle form.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
twibblejawayAuthor Commented:
I decided to go another route, but I may use ideas from either or both of you so I'll just split the points.  Thanks for your help.  
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.