Zoom after Stretch and ScrollBars about cyotek.windows.forms.imagebox

[cyotek]

I had a look and I did spot an issue where the sample code didn't work properly if the image was very small so even after the first zoom the stretch rule came into play thus resetting the zoom level. I'll see if I can find a bit of time to play with the sample further.

[cyotek]

Hello,

To answer your second question first, it currently isn't possible to hide the scrollbars as they are required for how ImageBox currently calculates offsets (destroying the scrollbars causes the control to complete screw up rendering as per #3) and if I remember correctly, the HorizontalScroll and VerticalScroll properties are essentially read only - you trying to change them will have no effect. There is a version of ImageBox in a different branch which has been rewrote to allow the scrollbars to be correctly hidden (and for those classes to actually work); however it's not complete and the last time I tested it it had issues. I really need to find some time to get it released.

In regards to your first question this is by design. If you're using a custom SizeMode, it generally indicates you want to fit the entire image within the control and ignore zooming etc. I'm unclear on what you are trying to achieve here, so any more details you can provide would be helpful. If you are just trying to make the ImageBox fill available space, then setting the Dock property to Fill is sufficient.

Regards;
Richard Moss

[Prakash19921206]

Hi Richard,
First of all thanks for your amazing control.

i just tried your ScrollbarExperiments branch, it worked like charm. i wanted to have maximum space for Picture(Display), now with scrollbar hidden it looks amazing!
what issue did you had when u try to hide scrollbar?

regarding SizeMode,
i was trying to make ImageBox always to be filled with picture having zooming option available (basically hide GridColor and GridColorAlternate).
if Picture Size becomes smaller than ImageBox then SizeMode: Stretch it or else SizeMode: Normal
sorry for asking such basic question, but how to check if current image size falls within ImageBox or outside?

i thought of changing SizeMode with mouseWheel event

one small bug i noticed with ScrollbarExperiments branch is that, if you debug with visual studio, panning slow and not smooth, but if i run .exe directly its perfect!
i'm using Visual Studio 2015 community edition

Update: i subscribed to imageBox1.MouseWheel event , and from MouseEventArgs.Delta we can check for scroll up/down. but how to check if Picture size is same as ImageBox size? so that i can allow/restrict zoom
for now i'm doing this, i guess there will be a better way

void OnImageBoxMouseWheel(System.Object sender, System.Windows.Forms.MouseEventArgs e)
{
	if (e.Delta > 0) //zoomed in
	{
		imageBox1.SizeMode = Cyotek.Windows.Forms.ImageBoxSizeMode.Normal;
		if (imageBox1.Zoom < 60)  //check if image size is shorter than imageBox1
			imageBox1.Zoom = 70;
	}

	else if (e.Delta < 0 && imageBox1.Zoom <= 150) //zoomed out also check if image size is shorter than imageBox1
		imageBox1.SizeMode = Cyotek.Windows.Forms.ImageBoxSizeMode.Stretch;
}

Thank you
with warm regards,
Prakash

[cyotek]

Hello,

If you want to check if the current image fits within the current viewport you should be able to do something like this:

• Get a Rectangle which describes the inner viewport using GetInsideViewPort
• Compare the Width and Height properties of the above rectangle with the ScaledWidth and ScaledHeight ImageBox properties - if there is a discrepancy adjust the display or zoom accordingly.
• Alternatively, compare the Size property of the viewport rectangle against the ViewSize property which returns the non-scaled image size

Hope that helps!

Regards;
Richard Moss

[Prakash19921206]

Thanks for your reply Richard,

i was able to use GetInsideViewPort, however i didn't find ScaledWidth or ScaledHeight.
i think you are referring to ScaledImageHeight and ScaledImageWidth (but both of these properties are protected variables)

however i should be able to access from ImageBox's object/instance imageBox1 right?
but from imageBox1, i can't access ScaledImageHeight or ScaledImageWidth. when i type imageBox1. visual studio's IntelliSense is showing most of the properties excluding all protected variables (so unable to use ViewSize as well)

in StackOverFlow's Post, someone suggested to use public setter for the protected field (i'm new to C#)

[cyotek]

Hello,

Yes, you're correct, I did mean ScaledImageWidth and ScaledImageHeight. I'd forgotten they weren't exposed though - sorry about that. The problem with just hooking into the MouseWheel event is a user can change the zoom via other means, for example by using the keyboard, or depending on how you have the control configured by clicking.

Another alternative would be to hook the ZoomChanged event and do your processing here. The following snippet lets you zoom in and out, but only as long as you don't try to zoom out so that the fully zoomed image is smaller than the control bounds.

private void imageBox_ZoomChanged(object sender, EventArgs e)
{
  if (imageBox.Image != null)
  {
    int scaledWidth;
    int scaledHeight;
    double zoomFactor;
    Size imageSize;
    Size viewSize;

    zoomFactor = imageBox.ZoomFactor;

    imageSize = imageBox.Image.Size;
    scaledWidth = Convert.ToInt32(imageSize.Width * zoomFactor);
    scaledHeight = Convert.ToInt32(imageSize.Height * zoomFactor);

    viewSize = imageBox.GetInsideViewPort().Size;

    if (scaledWidth < viewSize.Width || scaledHeight < viewSize.Height)
    {
      imageBox.ZoomToFit();
    }
  }
}

So the above code is nice and simple and will stop you zooming out too far. However, the image will still fit the control with the correct ratio, meaning depending on the image size you'll have horizontal or vertical padding.

With a little more work, you can make your full scenario work, although I think it's a slightly brittle approach. I tested this in the basic demonstration (v1 code) and it seemed to be fine.

private void imageBox_ZoomChanged(object sender, EventArgs e)
{
  this.SetSizeMode();
}

private void imageBox_MouseWheel(object sender, MouseEventArgs e)
{
  // This event is raised before ImageBox handles the event, so if
  // we set the SizeMode to Normal here, then zooming will work
  imageBox.SizeMode = ImageBoxSizeMode.Normal;
}

private void imageBox_KeyDown(object sender, KeyEventArgs e)
{
  // This event is raised before ImageBox handles the event, so if
  // we set the SizeMode to Normal here, the shortcut keys will work
  if (this.IsZoomShortcutKey(e.KeyCode))
  {
    imageBox.SizeMode = ImageBoxSizeMode.Normal;
  }
}

private void imageBox_KeyUp(object sender, KeyEventArgs e)
{
  if (this.IsZoomShortcutKey(e.KeyCode))
  {
    // just in case the zoom didn't change, we need to reset the SizeMode
    this.SetSizeMode();
  }
}

private bool IsZoomShortcutKey(Keys key)
{
  // this list of keys could potentially change with newer versions of ImageBox
  return key == Keys.Home || key == Keys.PageDown || key == Keys.Oemplus || key == Keys.PageUp || key == Keys.OemMinus;
}

private void SetSizeMode()
{
  if (imageBox.Image != null)
  {
    int scaledWidth;
    int scaledHeight;
    double zoomFactor;
    Size imageSize;
    Size viewSize;

    zoomFactor = imageBox.ZoomFactor;

    imageSize = imageBox.Image.Size;
    scaledWidth = Convert.ToInt32(imageSize.Width * zoomFactor);
    scaledHeight = Convert.ToInt32(imageSize.Height * zoomFactor);

    viewSize = imageBox.GetInsideViewPort().Size;

    if (scaledWidth < viewSize.Width || scaledHeight < viewSize.Height)
    {
      imageBox.SizeMode = ImageBoxSizeMode.Stretch;
    }
    else
    {
      imageBox.SizeMode = ImageBoxSizeMode.Normal;
    }
  }
}

Hope this helps.

Regards;
Richard Moss

[Prakash19921206]

Thank you very much for time & code.

i don't want to bug you but, it worked if my imageBox size is less than some value, if i gradually increase the size of imageBox, it doesn't work.
i was debugging, below values are when zoom didn't work (imageBox1.SizeMode before zooming is Stretch)

//these values are from SetSizeMode func, triggered from MouseScroll Event
zoomFactor = 2
viewSize.Width=1400
viewSize.Height = 805
scaledWidth = 1282
ScaledHeight = 962
imageSize.Width = 641
imageSize.Height = 481

probably we have to manually increase zoom factor little bit here right?
how much amount and when?

here's values when zoom work (imageBox1.SizeMode before zooming is Stretch)

zoomFactor = 2
viewSize.Width=1275
viewSize.Height = 805
scaledWidth = 1282
ScaledHeight = 962
imageSize.Width = 641
imageSize.Height = 481

i haven't set any padding valuesi tried to modify the if statement. then zoom happens but background pixel grid will be noticed