Recently in Crystal Toolkit Category

Crystal Toolkit is a Windows Forms (.NET Framework 2.0) control library written in C#. This is the eighth release and contains the following updates:

Bug fixes.

1. CrystalGradientControl-derived classes, including CrystalLabel and CrystalPictureBox (but not CrystalTrackBar): Transparent backgrounds were not working previously. To set a transparent background, set BackColor property to the Transparent color. You can do this in design mode or programmatically. This makes TransparentMode=True. When this occurs, Color1 and Color2 are ignored. To get the Gradient color mode to work, set BackColor back to Control (or any other non-Transparent value) and then set Color1 and Color2 to the Gradient color scheme.

2. CrystalThumbnailer: Exceptions are now caught when an error occurs when thumbnailing images.

3. CrystalImageGridView: Bug fixes for keyboard navigation. When images were selected and right-mouse click inside the middle of the selection, the selected image list is retained.

This release comes in a ZIP file. Simply unzip the contents to your hard drive, navigate to the root Attilan folder, and double click on CrystalDemo.sln. This solution file contains the Crystal Toolkit plus demo programs. Just build the solution (which compiles the CrystalToolkit library first) and run the demo programs to see how they work. You can run the demo programs without building the source by clicking on "StartDemo.bat" in the root Attilan folder or CrystalDemoLauncher.exe in Attilan\bin.

I've tested the demos under Windows XP SP2 and Windows Vista. Needless to say, buyers beware, this is alpha software and it's free open-source code: you get what you pay for! I'd welcome any feedback, bugs (or bug fixes), and thumb-bitmap replacements. Send email to richard [at] attilan {dot} com.

Download: Crystal Toolkit 077 (zip file, 8 mb)

Crystal Toolkit is a Windows Forms (.NET Framework 2.0) control library written in C#. This is the eighth release and contains the following updates:

New features.

1. CrystalPictureShowController: Allows you to tie the common elements of an image viewing application in one controller. Create a form with CrystalImageGridView, CrystalPictureShow, a combo box and trackbar for image scaling, toolbar buttons for navigation. Set all these elements in the controller and you are off and running. You still need to handle the split container and certain events (like initiating and terminating full screen modes) but the sample program below will show you how to do that.

   CrystalComicShowController: Allows you to tie the common elements of a comic book viewing (reading CBZ or CBR archive files) application in one controller. This may be the first C# toolkit designed to allow you to read CDisplay compatible files. Create a form with CrystalImageGridView, CrystalComicShow, a combo box and trackbar for image scaling, toolbar buttons for navigation. Set all these elements in the controller and you are off and running. The internal framework uses CrystalMemoryZipCollector for CBZ files and CrystalRarCollector for CBR files.

Enhancements.

1. CrystalCollector: Virtual methods moved from CrystalFileCollector to the base class. Sorting methods, Copy, Move, Delete, Rename, Select operations are moved here so that all derived classes can use them.

   CrystalImageGridView: FocusedImage property added - returns the current focused image. CenterCrystalImage public method added - centers the given image in the grid.

Demo Programs Expanded.

1. CrystalPictureShowController Demo: shows how to use the new controller to quickly develop an image grid viewer. This sample also shows you how to put the main form into a menuless, toolbarless, fully zoomed mode that takes over the entire screen. Just click on the Full Screen button. The Slideshow mode has been expanded to include an options dialog to allow you to set certain options like Shuffle, Repeat, or SlideShow effect.

2. CrystalComicShowController Demo: shows how to use the new controller, and in an indirect way, how to use CrystalToolkit to pull images out of compressed files. To get the full benefit of this demo, you will need to have a CBR or CBZ file on your hard drive. Run the demo program, click File\Open Comic Archive and open up the CDisplay compatible file. You should see the thumbnails start to appear and then the app zooms into full screen mode. Press ESC and you will see the sheet of thumbnails representing the comic book pages.

Bug fixes.

1. CrystalImageGridView: Right-mouse button no longer clears item selection.

This release comes in a ZIP file. Simply unzip the contents to your hard drive, navigate to the root Attilan folder, and double click on CrystalDemo.sln. This solution file contains the Crystal Toolkit plus demo programs. Just build the solution (which compiles the CrystalToolkit library first) and run the demo programs to see how they work. You can run the demo programs without building the source by clicking on "StartDemo.bat" in the root Attilan folder or CrystalDemoLauncher.exe in Attilan\bin.

I've tested the demos under Windows XP SP2 and Windows Vista. Needless to say, buyers beware, this is alpha software and it's free open-source code: you get what you pay for! I'd welcome any feedback, bugs (or bug fixes), and thumb-bitmap replacements. Send email to richard [at] attilan {dot} com.

Download: Crystal Toolkit 076 (zip file, 7 mb)

I added 4 new samples to the current Crystal Toolkit 0.75 release, and cleaned up some of the old ones. First of all, I think it's important when users open a toolkit that they can see some sample programs right off the bat without compiling the code. I've placed a bin folder under the root Attilan, which contains the CrystalToolkit.dll and the sample programs. If you click on StartDemo.bat under Attilan or CrystalDemoLauncher under Attilan\bin, you will see the CrystalDemoLauncher program:

The gradient background in the demo launcher is provided by CrystalPanel. I've been using this in many applications and it always helps make a Windows Forms program a bit more attractive. I think it looks even better when paired with the KryptonLabel and KryptonLinkLabel controls at Component Factory.

I wanted to provide a minimal program that shows how CrystalImageGridView works. The SimpleImageGridView demo program has about 140 lines of code in Form1.cs. This sample merely looks at your MyPictures folder and thumbnails all the images within it. If you have no images, click on File\Open Folder menu item and select another folder. Here's an example of how it looks--and hold on to your hat--I am going to show you images from actual photographs instead of comic books:

This is our part-time labrador-mix, Roxie the Rocket dog. We take care of her when our friends are out of town. We love this dog, but it's the perfect situation because we get to take care of her and we get our own time as well.

I can't just leave this article without doing something comic-book related. Here's a Form that I recently implemented as a demo called WaitFormPictureShow. It's one of those "watch-me-spin while-you-wait" dialog/forms that you look at while the program is processing something. It does use a wonderful loading circle animation control written by Martin Gagne--download it here on CodeProject. But in addition to that, there is a postage-stamp sized CrystalPictureShow control displaying images in a Fade Slideshow. I loaded up the images into CrystalMemoryCollector, from a project resource file filled with images from Marvel Value Stamps and DC Comics US Postage Stamps:

The CrystalMemoryCollector loads both the full scale image and the thumbnail image--in this case, the same thing. CrystalPictureShow takes the CrystalMemoryCollector (not knowing anything special about it, other than it is derived from CrystalCollector) and displays the Slideshow using the Fade effect. In the code I've told the CrystalPictureShow object not to use its own thumbnailer, as the memory collector has everything loaded and ready to go:

There you have it. I thnk this could be a nice wait dialog with regular photograph thumbnails if you chose to do so. Download the free Crystal Toolkit 0.75 if you want to try this kind of wackiness.

By default, CrystalImageGridView allows you to display thumbnail images with a single border color (CellBorderColor property) that is displayed whenever the CrystalImageItem is selected. That's standard behavior, but a few months ago, I ran into a situation where I wanted to indicate a state for particular image items in the grid. At the time, the best way to handle was to give each CrystalImageItem a unique border color that could be displayed permanently, regardless of selection state. As a result, a range of items could have a red border, others could have a green border. You can create your own customized Collector object to assign these border colors. If you look at this example, I created a subclass from CrystalFileCollector and assigned border colors after all the Images were collected:

public class MyCollector : CrystalFileCollector
{
    public override bool CollectImages()
    {
        bool result = base.CollectImages();

        if (result)
        {
            int index = 0;
            foreach (CrystalImageItem imageItem in GridModel)
            {
                index++;
                if ((index % 2) == 0)
                {
                    imageItem.BorderColor = Color.Red;
                }

                if ((index % 3) == 0)
                {
                    imageItem.BorderColor = Color.Green;
                }
            }
        }

        return result;
    }
}

That's kind of a cheesy example. You might want to examine the Tag property of CrystalImageItem, where you can store your own objects during the collection phase. However, for this simple example, it results in CrystalImageGridViewer displayed the following images with permanent border colors:

That looks fine, but what happens when the images are selected? There's a new property which determines the selected border color in this special mode. The selected border color gets drawn inside the state border color. This is so the user can see that the image item is selected, but also recognize the status of the item. Here's what it looks like when the selected border color is set to Black:

Achieving this in your own programs is easy. You will need to change a few properties in CrystalImageGridView in the Forms Designer within Visual Studio:

1. Set BorderSplitMode to True.

2. Set CellBorderColor to Transparent. (You will assign border colors programmatically through CrystalImageItem's BorderColor property.)

3. Set CellSplitColor to whatever you like for the inner selection border color.

4. Make sure BorderWidth is large enough. The inner and outer borders split this width, with the inner border taking up 1/3 of the size.

In the next release of the toolkit, I will have a sample program that demonstrates this feature.

Programming, to me, is like one big mashup, thanks to Google and all the much smarter programmers than me who are out there sharing their code. I've learned a lot of cool GDI+ tricks from various programmers and "borrowed" their open source code where I needed it for the Crystal Toolkit. But I think I've learned and lifted from one man in particular: Bob Powell and his GDI tips and tricks website. In trying to create the classes for a cool image viewer, I stumbled into the limitations of the PictureBox control, which Bob has railed against for a while. To prove that there was an alternative, he wrote the ZoomPicBox example, which shows you how to live without it.

CrystalPictureBox is a "crystalization" of ZoomPicBox. You can see it here in action in the CrystalImageGridDemo application. CrystalPictureShow (a derivative of CrystalPictureBox) is in the top splitter pane, while CrystalImageGridView is displaying the thumbnails from an image folder on the bottom. If you examine the painting code in CrystalPictureBox, you'll see that I retained Powell's technique of setting up a Matrix with a zoom factor, setting the Matrix in the Graphics object, and using DrawImage. One thing I added to the mix was the ability to center the image within the client rectangle. I did this by adjusting the starting location, based on the zoom factor. To use this mode, all you have to do is make sure the ImageSizeMode is set to RatioStretch in the CrystalPictureBox object.

When the user starts dragging the trackbar on the lower toolbar, the zoom factor changes. Inside the code, I set ImageSizeMode to Scrollable and also set the zoom factor represented by the trackbar (or combo box). The result is a pretty nice and clean scaling of the image as the user drags the mouse. Give a salute to Captain America in all his glory for his unfortunate "death" (what a joke as I think he will be revived) was revealed this week. And let's hope that Silver Surfer looks as nice in the Fantastic Four movie as he does in this close-up.

CrystalPictureBox simply allows you to display images, zoom to a certain percentage of the original size, ratio stretch within the available rectangle, and gives you a cool gradient background. The concept for Scrollable and RatioStretch size modes came from Gil Klod's Viewer user control on CodeProject. I got very used to switching between these two modes and decided to retain them.

CrystalPictureShow, derived from CrystalPictureBox, is more tightly integrated with CrystalImageGridModel to allow you to navigate through lists of CrystalImageItem objects. In the regular display mode, you can view the image in a window just like the above example. If you press the Slideshow button in the demo, you'll see the sample application take over your whole screen (making the form border, menu, toolbars, etc. disappear) and call CrystalPictureShow's StartSlideShow method.

There are four slideshow effects in this first release of CrystalPictureShow: Slide (image moves in from top, bottom, left or right), Fade (image slowly ghosts into the next one), Spin (second image spins and zooms from the current image), and Iris (second image zooms from the current image in an ellipitical form). There was no way that I could have done these without Bob Powell's help. He used to have a subscription based newsletter called Well Formed, and in a number of these he showed people how to do image transitions using GDI+. Unfortunately, Well Formed is not being published at the moment and there's no way to get them on his website. However, this is where being relentless and using Google searches pays off: I found this article on Google Groups where Mr. Powell graciously published a VB example program of the image transition effects. Which I gratefully gobbled up and converted to C#.

Check out CrystalImageGridDemo for an example of all of these things in action (get the latest version of CrystalToolkit on the Downloads page). I feel like I owe Bob Powell several drinks and a fine dinner.

The latest Crystal Toolkit version 0.70 has an early alpha version of classes to help you build image viewers using thumbnails. You may have seen the Microsoft Office Picture Viewer, which has a nice filmstrip view of thumbnails in a splitter like view. I wanted to build an image grid view control that has that nice look and feel, but I also wanted to build it in a classic model-view-controller pattern. And I also wanted to have my control use other tools to automatically thumbnail image folders that I need to browse.

CrystalImageGridView does all of this, working with CrystalImageGridModel, CrystalFileCollector, and the CrystalThumbnailer to provide all of these features. You can see from the screenshots (this demo is included in the zip file on the Downloads page) that you can view the thumbnails docked in the split container on the bottom. Click on the left hand button on the upper toolbar and the split container expands the thumbnail view to fill the client area.

I'll have more bug fixes, little features, and documentation to write later. If you want to play around with this control, do the following:

1. Build Crystal Toolkit and add a reference to your Form project.
2. Drag CrystalImageGridView from the toolbox to your Form, preferrably to a split container.
3. Hook up the Load event to your Form and add this code to the method:

CrystalFileCollector _collector = 

    new CrystalFileCollector();

_collector = new CrystalFileCollector();

_collector.AddView(crystalImageGridView1);

_collector.CollectImages();

It's that easy. Run this simple form you just made, and the image grid starts previewing images from your MyPictures folder. The CrystalFileCollector spins off a background thread and pops the images into the grid as they are thumbnailed. If you don't like that location, you can modify the ImageLocation property.

More later, much more, I hope. If you have any comments, bug fixes, or whatever, contact me at richard {at} attilan [dot] com.