Help on WinForms UserControls

[EpikYummeh]

Hi all,

I'm starting to build more advanced WinForms programs and one of them is an image viewer that I hope to maintain a lighter interface than Windows Photo Viewer.

I have animations for UI elements done, and have plans set out for the rest of the application's features.

I am stuck, though, on the actual image display portion. I could not find any useful code snippets on the web for adding a zooming functionality that can easily be programatically controlled, so I decided to write one from scratch.

I don't have much experience with matrices as that seems to be the obvious solution, so I've come up with a nasty hack where the image fills up the control's client space and resizes the control by a zoom factor controlled by a property all based on the image's size.

I guess what I'm looking for are some tips on more effective ways of getting a zooming functionality. If need be I can post screenshots of the application and/or bits of code.

[Raizor]

I did something similar to this for work a while back in C#. I can't recall if it used the native GDI+ stuff or LeadTools components for the image display. I have a feeling I ended up using LeadTools, but it should be possible in GDI+ without too many issues. By all means post your project in the meantime and I'll have a look at it.

If you don't want to post it publicly, just send me a PM on here.

[Raizor]

I've just checked my old code and it does indeed use LeadTools, which is a third party imaging suite.

If I were to do something like this in standard C#, using GDI+, I would likely try the following:

1. Add a panel to the form and dock it to 'fill'.
2. Add a picturebox control within the panel and set its dimensions so that it matches the panel. Set the SizeMode of the picturebox to "zoom", this will cause the image to stretch to the dimensions of the picturebox, while maintaining the aspect ratio. You probably don't want the picturebox docked as we'll be changing the dimensions and position of it for panning/zooming.

For zooming, I would simply multiply the width and height of the picturebox by a scale/zoom factor. So if you're picturebox is 300x200, it would be scaled to 600x400 at 200% zoom. You could hook the mousewheel event over the picturebox to control the zooming. I'd also hook the mousedown event when over the picturebox and set a dragging flag (bool drag = true) while the mouse is down, also store the X/Y position of the event. When the use mouses up, set the drag flag to false.

You could use the mousemove event over the picturebox to control panning a zoomed image (as long as the dragged flag is set/active). You should be able to compare the current X/Y pos of the mouse during a mousemove event against your drag-start X/Y that you stored on mousedown. This should give you the offset X/Y to reposition the picturebox within the panel for panning.

I think that should do the job.

[EpikYummeh]

Using a panel sounds a lot more manageable than what I have going right now. Here's a PasteBin of the current UserControl code I have right now: Zoomer.cs. And here is the form code: ImageForm.cs.

I will play around with using a panel and PictureBox and see if I can make any progress. I'll let you know if I get anything working.

[Raizor]

Using a panel sounds a lot more manageable than what I have going right now. Here's a PasteBin of the current UserControl code I have right now: Zoomer.cs. And here is the form code: ImageForm.cs.

I will play around with using a panel and PictureBox and see if I can make any progress. I'll let you know if I get anything working.

Cool. Also let me know if you don't get anything working and I'll try and help out. What version of Visual Studio are you using btw?

[EpikYummeh]

Using 2010 on this computer, but I have 2012 available on another box.

I've made some progress, though there seem to be some issues with rendering images. I played around with my panning code and out came a beautifully smooth panning/dragging functionality. Here's all the code:

Code: [Select]

// prevLoc is a global Point, _image is the PictureBox
if (_image.Image != null)
            {
                Point diff = new Point(MousePosition.X - prevLoc.X, MousePosition.Y - prevLoc.Y);
                if (_drag)
                {
                    _image.Location = new Point(_image.Location.X + diff.X, _image.Location.Y + diff.Y);
                }

                prevLoc = MousePosition;
            }