Archive for May, 2007

In order to support the new Outlook – Mini mode I needed to add the ability to show a page inside a popup window. It seems logical to expose this feature for all the modes that I would call ‘tab strips’. I define a ‘tab strip’ mode as one where the contents of the selected page are not displayed in the control.

For each of these ‘tab strip’ modes you can now press the page header (tab, check button or ribbon tab) and have the associated page show inside a popup. This is best explained using a possible usage scenario.

HeaderBar – CheckButton – Group
We begin with a mode that shows the contents of the selected page. There is also an arrow button defined via a button spec on the right of the navigator. At runtime you can imagine a user wanting to conserve window real estate by pressing the up arrow to shrink down the size of the control.

HeaderBar – CheckButton – Only
Once the arrow is pressed we switch to this new mode where the client area has been hidden. This frees up client area for other more important controls.

But the user might still need to access the pages from time to time. Rather than force the user to expand the control back to the original setting they can just press the header of the page they need. So if they press the First button they now get this popup…

This is a really nice feature because if the user needs just occasional quick access they can single click and get the popup. If they want to access the pages all the time they can use the down arrow button and have the pages displayed all the time. So with only a few lines of code used to switch modes we have provided some great flexibility to the user.

To prove the popup page is fully functionality let’s try a silly example. We can place another navigator instance inside one of the pages. Here we click page Three which contains within itself a Outlook – Mini mode navigator.

Clicking the Outlook – Mini button will correctly show its own page as another popup.

Using the TAB key works correctly and rotates the focus around the controls inside the popup. You can use the ESCAPE key at any time to dismiss the top most popup page.

Navigator.PopupPages Properties
There are several properties inside Navigator.PopupPages that can be used to customize how the popup is displayed. By default you will see that the popup has a border area of 3 pixels around the actual page contents. For the next picture we will change that to be 9.

You can also change the location of the popup. By default you will have noticed it shows the popup below the header item and aligned to the left edge. Now let’s choose the option that shows it below the navigator but changed in size to match the width of the navigator.

DisplayPopupPage Event
To provide maximum flexibility there is an event called DisplayPopupPage fired just before the popup is shown. It allows you to modify the screen rectangle that is used for display. This gives you complete control over the size and location in order to match whatever unique needs your application has.

By the way, all the images above should have a nice shadow border around the pop ups but my Paint Shop Pro would not capture them. So the real appearance looks much better.

Until now you could only add button specifications to the KryptonNavigator that have a Generic type. This meant you had to provide the image and text for the button yourself. A useful feature of the KryptonHeader and KryptonHeaderGroup button specifications is that they allow you to change the Type property to something like ArrowLeft. Then the image would be inherited from the palette defined ArrowLeft setting and so ensure you have a palette appropriate image.

The reason the Type property was omitted is that the KryptonNavigator itself internally creates Close, Next, Previous and Content type buttons in order to provide out of the box functionality for the button type. So if you had the ability to create extra buttons with the same Type value then the user would be very confused about what is happening when your own buttons do not operate as the internally defined ones.

So instead of adding the Type property I have now added a TypeRestricted property that allows you to specify any type except the Close, Next, Previous and Close. Here is a picture of the navigator but two user defined buttons, the left of which is using the ArrowLeft restricted type and the right the FormClose restricted type.

Several developers have requested a new mode for the Navigator so they can mimic the collapse functionality as seen in Outlook 2007 application. So here it is!

Outlook – Full
This is the new name for the existing Outlook mode. You will of course already been familiar with the following image.

Outlook – Mini
Now we switch to using the Outlook Mini mode and you can see that it has removed the page display area and put a vertical button in its place. It also removes the drawing of the stack item text in order to reduce the width required to the minimum possible.

When you click on the vertical button it then pops up the appropriate page to the side.

There are properties for controlling the position and size of the popup in order to override the default but the default should be applicable to the majority of developers.

The Krypton installers on Vista do not currently install the documentation into the Visual Studio 2005 help system nor the helper project and item templates. I hope to fix this for the next release. In the meantime you can use the following simple steps to manually register the help…

Open a command prompt with administrator privileges
- Click the Start Button
- Type ‘cmd’ in the search box
- Right click ‘cmd’ entry and use ‘Run as administrator’

Navigate to the ‘\Help\Help2Install’ subdirectory
- cd ‘c:\Program Files\Component Factory Pty Ltd\Krypton Toolkit 2.5.1\Help\Help2Install’

Run ‘RegisterHelp2.bat .’
- Yes that is a dot as the batch file parameter

View the installed help collection
- Run Krypton Explorer
- Select the ‘Resources’ option
- Select the ‘Documentation’ hyperlink

To manually add the templates you can use the following steps…

Find the installation directory of Visual Studio
- Open up the registry using ‘regedit’
- Open up ‘HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\8.0’
- Note the directory of the ‘InstallDir’ value

Copy template zip files to correct subdirectory
- Copy *ProjectCS.zip files to ‘[InstallDir]\ProjectTemplates\CSharp\Windows’
- Copy the other .zip files to ‘[InstallDir]\ItemTemplates\CSharp’

Ask Visual Studio to install the templates
- Click the Start Button
- Type ‘cmd’ in the search box
- Right click ‘cmd’ entry and use ‘Run as administrator’
- Change directory to [InstallDir]
- Run ‘devenv.exe /installvstemplates’

If you’re using the KryptonRibbon with the system set of colors then you might have noticed the automatically calculated colors are not the easiest to see. In particular the actual ribbon tabs do not really stand out as they do with the Office 2007 color schemes. So I decided to detect the use of the system colors and tweak slightly how the colors are generated.

To show you the difference the following image has the old colors on the left side and the new colors on the right.

Although a small change I hope you agree it improves the overall appearance. Now here are the old and new colors for the Windows Classic window settings.