I haven't posted any articles here for quite a while. You might think I've given up on the Crystal Toolkit, but not yet! I've been making various improvements, bug fixes, and enhancements. It's slowly getting better. Probably by the time I am done, Windows Forms will be dead!
Here's a big feature, coming very soon in Crystal Toolkit 0.80, that I've wanted for my own image viewing programs: zooming the thumbnail images that are contained within CrystalImageGridView. Previously I was only able to allow users to set the CellSize property and that was it. If you had a thumbnail image that was 300 x 300, you were stuck with that until you changed that property and had the internal grid recalculate itself. It might have worked, but the images would all have to be re-thumbnailed at that new size, and a lot of time would be wasted.
1: /// <summary>
2: /// Sets up the Matrix object used for displaying the image.
3: /// </summary>
4: /// <param name="gfx">Graphics object used for drawing.</param>
5: /// <param name="zoomScale">Scale used for matrix.</param>
6: protected virtual void SetupMainImageMatrix(Graphics gfx, float zoomScale)
7: {
8: gfx.ResetTransform();
9:
10: // Set up the transformation to handle zooming and panning.
11: Matrix mx = new Matrix();
12:
13: // Account for the scroll position.
14: mx.Translate(AutoScrollPosition.X, AutoScrollPosition.Y);
15:
16: // Account for the zoom factor.
17: mx.Scale(zoomScale, zoomScale);
18:
19: // Set the transform into the global transform for the specified Graphics context.
20: gfx.Transform = mx;
21:
22: // Set the interpolation mode.
23: gfx.InterpolationMode = _interpolationMode;
24: }
To make thumbnail scaling work in the new release, I've taken some code and patterns found in CrystalPictureBox. In that class, I used a Matrix object and set the scale according to a property I called ZoomFactor. This enabled me to present an image in CrystalPictureBox at any scale I desired, like from 30% of full size to 300% of full size.
CrystalImageGridView now has a property called ZoomFactor. Using this, the entire grid can be displayed at a percentage of the full sized grid. To implement an image grid that goes from small images to medium images to large images, you would just set the ZoomFactor in the image grid, and the object takes care of the rest.
How it works:
First, setup a Form and drop the CrystalImageGridView onto the form. Set the CellSize property to the largest possible size that you wish to display. In this case, I chose a cell size of 375 x 375. If you set it up this way, the thumbnailer object (internal to the grid) will make thumbnail images at this size, providing users with a crisp view. It's easier to downscale a larger image than it is to upscale a smaller image. Now, an alternative way to do this could have been a different pattern--where we send out a signal that we are changing the size and thumbnail the viewable images on the spot. Windows Explorer and several other programs do this. Perhaps in the future I will provide an alternative method like this. The advantage of this method is that the image scaling is pretty fast. The disadvantage is that the thumbnailed image requires more disk space at the largest possible size.
1: private float[] zoomFactor = { .30f, .45f, .60f, .75f, .90f, 1.0f };
The ZoomFactor property is set by a trackbar in my little example program (which will be in Crystal Toolkit 0.80). The zoom factors are predefined in array. At the lower end of the scale (represented by setting the trackbar all the way to the left) we have 30% of the full size 375x375, which is 125x125. At the upper end, we have 100% of the thumbnail size. There is a trackbar on the form with Minimum set to 0 and Maximum set to 5, to match the settings in the array.
When the program is launched, the default ZoomFactor is set to 0.30 (125x125). I've got about 24 thumbnails displaying here. Notice how the text for the image is still visible at this 30% setting, this was actually the trickiest part of the whole deal (and there may be bugs left to find in that regard). OK, I've got the Hulk selected in the middle of the screen, keep an eye on him.
Here the ZoomFactor is set close to 50%. The grid has repositioned the images as the ZoomFactor increased in size. The Hulk remains selected, in the center of the grid so that the user can view his beautiful face. Is that a booger in his hose? Let's zoom it up further.
Finally, here's what the CrystalImageGridView looks like with the ZoomFactor at 100% (375x375). We've got two images side by side, the Hulk is still selected and viewable. And it's not a booger, it's this wild Marvel character called Ant-Man, making a quick exit from the Hulk's gamma irradiated body.
With good luck, I should be posting Crystal Toolkit 0.80 with this feature this Memorial Day. Nuff said.
