Crystal Toolkit: April 2007 Archives

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.