There are two methods for navigating around the pages in the GroupBarCheckButtonOutside mode. The default is the context menu and the other is using next/previous actions.

Context

The default mechanism for navigating to pages is use of the Context button on the right side of the control. Here you see the menu showing with the available choices of pages.

Next & Previous

Alternatively you can change a single property and have the Next and Previous buttons displayed instead. Note that these buttons do not cause any change in selection but instead scroll the displayed check buttons. Here is the appearance with the buttons showing.

Once the Next button is pressed the check buttons scroll from right to left in order to show some more options. You can see the change here.

If you really do want the buttons to change the selection instead of scrolling the check buttons then you can do that as well. You just need to alter two properties, one for each button, and the action will change to page selection.

Animation

Althought I cannot demonstrate it on here the check buttons animate across the bar as the next and previous buttons are used to scroll. It also animates whenever the selection changes, either becaues of the user or a programmatic change. If you prefer to turn this off then just set False to the BarAnimation property.

Visual Hints

Another useful feature that improves usability is the way that selecting a page will move that page a little inside the edge to make the next check button visible. For example, here you can see that the mouse is hovering over the Signature button.

Once the check button is pressed the check button is scrolled so that it is fully displayed. But rather than just bring the check button into view it moves it far enough to see the start of the next button as well.

This makes it easier to click on successive buttons because the next one is always shown and so can be clicked on.

RightToLeft

I have not forgotten about providing support for international applications. The control honors the RightToLeft and form level RightToLeftLayout propertis.

The latest mode has taken longer to add than the previous ones but will be far more useful as a result. It is called Group Bar Check Button Outside and does exactly what is says.

NavigatorMode = GroupBarCheckButtonOutside

The main area of the control is taken up with a Group that contains the selected page. There is a Bar of CheckButton items that represent the visible pages. The bar is placed Outside of the group along one of the four control edges.

BarOrientation

Use the bar orientation property to control which of the control edges the bar is docked against. The default is Top and can be seen below.

Alternatively try the Bottom option.

Lastly you can see the Left and Right options next to each other in this picture. Notice that the left and right options show the buttons pointing in towards the center of the control.

ItemOrientation

The default item orientation is called Auto and will give the appearance as seen above. You can however fix the orientation of the check button items to any one direction. Here is the FixedLeft value applied to the bar at the top of the control.

You can fix the items using FixedTop when the bar is on the left side of the control to achieve the following effect.

ItemAlignment

By default the items are positioned from left to right on a horizontal bar but if you prefer them to be centered then assign Center to ItemAlignment.

Using Far will place them on the right hand side of the bar. Here you can see this in effect along with the ItemAlignment altered to be FixedRight.

ItemSizing

You can control the algorithm used to calculate the size of each check button item. The default setting is SameHeight and allows each item to have whatever width they like but gives them all the same height as the tallest button.

Other options include SameWidth for making all items have the width of the widest item but with individual height values, SameWidthAndHeight for making all items the same size as the biggest item and Individual. Use Individual to let each check button be whatever size it wants. The following is an example of Individual.

Here are the same check buttons but with SameWidthAndHeight.

Although not demonstrated here there are a couple of other properties called ItemMinimumSize and ItemMaximumSize that help you define item sizing. These two properties prevent excessive item sizes as well as small 5,5 pixel buttons.

CheckButtonStyle

The default of Button1 style is appropriate for most uses but you can alter this if you prefer the appearance of the other button styles. For deep customization you can alter the StateNormal, StateTracking etc properties to completely customize the look and feel of the check buttons in each possible state.

Here is an example of the control using the Blogger palette.

There are still a couple of enhancements I want to make to finish off the first cut of this mode. I should get them done in the next day or so and then be able to show them off.

Each KryptonPage exposes several text and images so that the containing KryptonNavigator can pick the most appropriate value to use in the given situation.

KryptonPage

At the moment there are three text values called Text, TextTitle and TextDescription. These represents the shortest to longest text values respectively. There are three images called ImageSmall, ImageMedium and ImageLarge. You can see an example of them defined below.

Runtime Mapping

When using the NavigatorMode setting of HeaderGroup we can see the following display for the example page.

You can see that the Text property is used on the context menu, the TextTitle property is used in the primary header and the TextDescription on the secondary header. The ImageSmall image is used on the context menu and the ImageMedium on the top header.

You can change the mapping properties for each of the headers and the context menu if required. Below you can see the settings used to determine how each of the primary heading values is mapped from the KryptonPage instance.

For each of the mappings you can specify None meaning you do not want to map any value from the page and instead prefer the value be blank.

You also have the option of specifying a preference order such as the Medium – Small setting for the MapImage property above. In this case the ImageMedium will be used unless it is null, in which case it will use the ImageSmall instead. Only if both are null will no image be used.

This preference ordering prevents you needing to provide a value for all the text and image properities on the page. Instead you could setup a preference that searches all three text/image values to ensure you always get a value back.

If there are any other properties you think the KryptonPage should have then let me know.

Our third mode of the week is called HeaderGroup and for the first time we have a mode that allows the user to navigate between pages.

NavigationMode = HeaderGroup

The appearance is what you would expect; it replicates the KryptonHeaderGroup appearance with top and bottom headers. Here is a picture of the mode without any KryptonPage instances added as pages.

You can customize the text and images that appear in the headers when it does not have any pages defined. The default is to display just (Empty) but you can use something more appropriate for your application or change it to an empty string.

Once a page has been added it will use the values from the page in order to populate the text and images in the headers. Here is the display when we have added some pages.

The Title 1 and Description 1 have been pulled in from the page details of the selected page. Another post will outline the exact mechanics for pulling in page details for the display, but it is very flexible in order to meet whatever your needs are.

Notice two buttons appear when there is at least one page. The right hand cross is the close button and the left hand the context button. If you press the close button it will do the expected, remove the page from the collection. Pressing the context button allows you to select from a context menu the page you would like to select. Here you can see it in action.

If you prefer a more sequential way of selecting pages then you can modify a property and use next/previous buttons. Here you can see that the previous button is disabled because we are already at first page. The next button is enabled because there is a page afterwards.

If you really want both methods of navigating, then you can…

Here is the navigator with the LightWeight custom palette being used.

Page selection uses the events outlined in a previous post. So when the user clicks the next/previous or an entry in the context menu it will generate the Deselecting and Selecting events to check the page change is allowed. Both of these events are cancellable so you can prevent page changes if required. If the transition is allowed then it generates Deselected, Selected and SelectedPageChanged events.

A minor refresh in order to make a single bug fix available.

Version 1.1.1 now registers the documentation help collection properly so you can access the documentation. This only affects some developers and so you only need to download and us it if you experience the problem.

Download link
Download Toolkit 1.1.1