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.

Leave a Reply