Ever wanted to place a button inside one of the header controls? Wait no longer because the ButtonSpecs collection now makes this possible.

New controls or new features?

Whenever I ask developers what they would like to see added to the Krypton Toolkit they almost always say they want extra controls. Not an unreasonable request but adding new functionality to existing controls can have just as big an impact on the toolkit.

Although not a single developer has asked for buttons on headers I am betting that once you see it can be done, you will think its a good idea. At least I hope so because I just spent several days adding it!

Static to Dynamic

At the moment you can use the KryptonHeader to add a title or header to a section of your application. Here is a typical example of a header.

This is static control because you cannot do anything with it. In real world applications you will have some actions that are associated with the titled section of the form. Maybe the user is allowed to delete, sort or expand the section.

It would be a better use of space to put the extra actions on the header and not have to place them elsewhere. Well now you can. In this example I have added a button with a delete image to the header.

ButtonSpecs

The KryptonHeader has a new collection property called ButtonSpecs that contains a set of individual button specifications.

For each enty in the collection you get the following list of button specification properties that can be viewed and changed in the standard collection editor.

There are a whole host of properties and I will not try and explain all of them here. But it has the set of features you would expect such as Enabled, Visible, Checked and so forth.

ButtonSpec – Type

One property that is worth mentioning in more detail is Type. When I added the red delete button a little earlier it was assigned the default Type of Generic. This means the button has no implied purpose.

But many applications will want standard actions and so you can instead select one of the alternative Type values of Close, Context, Next or Previous. These types will get the image from the palette. This picture shows the images that are provided with the built in professional palette.

Because they come from the palette you can modify the KryptonPalette component and use alternative images for each of the types, ensuring that the look and feel is consistent for whatever palette styling you are creating.

KryptonHeader

The KryptonHeader has not been neglected and also has the new ButtonSpecs collection. It also has an additional property for each button specification called Location, this allows you to specify which header the button is associated with.

Here is an example where I placed a Previous button on the Near edge of the primary header. The Next button is placed on the Far edge and a Context button on the secondary header.

As new features are added to the Krypton Toolkit the Krypton Palette will become bigger because new entries need to be exposed. In order to support this long term, the palette is being rearranged.

Previously the top level of the palette held all the different styles such as Button1, Button2, Label1 and so forth. As new styles are added this is going to create a very long list and so I have added an extra level of grouping. All the button styles are placed inside a top level ButtonStyles group, all the label styles inside a LabelStyles group and so forth.

When you have several different styles it would be quicker to define common values in a single place and then override the style specific variations. So now there is a ButtonCommon that the Button1, Button2 etc inherit from. This is replicated for the other groups of styles as well.

You can see the new arrangement below…

You will have noticed another new top level group called Cargo. This is designed to hold a set of properties that are assigned by the developer and used at runtime in whatever way you like. It is like the Tag property on an object in Windows.Forms. Note however that the values in here are not inherited from the base palette if they are left blank.

If there any additional Cargo fields that you think would be handy then let me know and I will add them in.

Finally you will see another new group called ButtonSpec. This is a new feature that no one has actually asked for but once revealed everyone is going to use. It should double the usefullness of the Toolkit at a stroke.

A common way to display an image is to provide a bitmap and then change the color of the image depending on the state of the content. Until now that was not possible with the Krypton Toolkit.

For example, you have a KryptonButton instance and you want to assign an image for display. The image is just a simple black cross used to represent a close action. When the user moves the mouse over the button you want the button to change to red and when pressed down it should become blue.

Previously you could not achieve this because you can only specify a single image for the KryptonButton and not an image per button state. There already exists the ImageEffect property for altering the image colors but this alters all the colors in the image. This is useful for showing an image disabled or lighter/darker, but it does not allow you to specify a fine grain change in an individual color.

So now I have added two new properties called ImageColorMap and ImageColorTo. Shown below are the propertise for the tracking state of our examples KryptonButton instance. You can see the new properties being used to remap black into red.

To complete the example I also setup the pressed state to remap black to blue. You can see the result of the changes below where the three different states normal, tracking and pressed are shown in that order.

Ok, so this is not a very exciting image but it does show how you can provide a single image and then alter the displayed color. With this new ability you have a full range of options for achieving the button appearance you need. Already you can alter the border and background per state and now you can alter the image color per state.