Specifying cell sizing

How do you specify the size of a KryptonWorkspace cell? It sounds trivial and the automatic answer would be to use a pixel value but this alone does not actually work. If you set a constant value then it implies you want the size to be fixed. Maybe some of your cells should be fixed in size and so specifying the pixel value is adequate but what about other cells that change in size according to the space available?

The simplest example is an instance of the Workspace that has a single cell. With a single cell you would expect it to occupy the entire area no matter how the user resizes the control. If you specify the size in pixels then you automatically fail. Instead I have copied the star sizing technique that is used by the grid control in WPF.

Star sizing

Star sizing allows you to add an asterisk to the end of the size value if you want the size to be proportional to the remaining space available. Here we have two cells that each have a width defined as ’1*’.

The available width is first allocated to whatever fixed size cells are defined. We have none and so the entire width is then allocated to the cells with stars defined. The total number of stars is 2 and so each cell gets half the available width as they each have half the number of total stars. As we expand the window we get the following change in appearance…

Both still get half the total width. We now update the first cell to have a value of ’3*’ and see what happens…

The total number of stars is 4 and so the first is given 3/4 of the space and the second cell 1/4 of the space. Using stars makes it very easy for you to indicate the relative proportions of each cell. These examples only show the width changing but the height works in the same way for sequences that are arranged in the vertical direction.

Fixed and Proportional

Most real world scenarios will likely include fixed as well as proportional cells. To show this we define three cells with widths of ’100′, ’1*’ and ’1*’ respectively. This is how it looks…

The first cell is fixed in width and so allocated the full 100 pixels with the remaining space split evenly between the other two cells. If we expand the window we get the following…

As expected the first cell stays the same and the others split up the larger space between themselves. Now let’s change the last cells width to be ’4*’ and see the change…

Our last cells is taking up 4/5 of the remainder and the second cell just 1/5. Shrinking the window changes the appearance like this…

The combination of fixed and proportional sizing gives the flexibility you need to construct just about any scenario you are likely to need. When you use the splitter to change the sizing it will automatically update the star and fixed sizes correctly. Calling the size fixed only refers to a fixed layout and does not mean the users cannot change the size using the splitter.

Minimum and Maximum

Each cell has the standard control properties of MinimumSize and MaximumSize. These properties are correctly honored when laying out cells and deciding how much space to allocate. So if you specify a maximum width of 200 pixels for a cell that is using star sizing it will enforce that setting. As your window gets bigger each star cell gets bigger and bigger except that particular cell which will stop growing at the 200 pixel mark leaving the other star cells to grow instead.

It has been a little while since I tried any kind of new marketing effort. Yesterday I received an email from a Microsoft MVP suggesting it would be a good idea to give free copies of Krypton Suite to MVP holders. Obviously he has a vested interest but I actually agree that getting copies into the hands of such an influential group could provide real benefits.

I also think that developer blogs are another way to reach many potential customers. So I’ve decided to make an offer to both those camps in the hope it will drive greater awareness of Krypton and in the long run generate some extra sales.

If you fall into either category then please email me and we can set you up with a free copy. Here is the link to the website page describing the criteria…

Free offer criteria

If you can think of any other groups that should qualify then feel free to leave a comment.

Not only am I back from holiday but I there is good news on the broken hand. The cast is off and I’m back into coding mode! Four months is a long time to be away from the coding coal face and I am looking forward to some serious coding sessions with late night deliveries of pepperoni pizza. So what am I going to be working on?

Krypton Workspace

I have just started on a completely new component called Krypton Workspace. If you’ve been following the blog and forums you will know that my intention is to add a docking system to the Krypton suite of components. But in order to add docking windows I need the Workspace component.

This component will be the building block that is used inside the client area of floating windows as well as docked windows at the edge of a Form. Rather than reserve the control for exclusive use inside the docking windows it will also be available as a standalone control. I imagine it will be invaluable as the filler that appears as the main Form content. Think of it as the Visual Studio document editing area but with a little added Kryptonite!

KryptonWorkspaceCell

The KryptonWorkspace has a property called Children that represents the root collection of items for display. Each KryptonWorkspaceCell instance you place inside this will appear as a Navigator instance in the client area of the control. In fact the KryptonWorkspaceCell class is derived from KryptonNavigator. Here you can see the effect of adding three cell instances, one at a time…

 
KryptonWorkspaceSequence

The Children collection is an instance of the KryptonWorkspaceSequence class and allows any number of child elements to be added. By default the sequence direction for layout is horizontal but you can easily switch this to vertical by updating the Orientation property. Unlike Visual Studio you are not restricted to having entries in a single direction. You can place sequence instances inside another sequence. This allows any depth of hierarchy to be created…

The structure used to create this arrangement is very simple…

KryptonWorkspace.Children
...KryptonWorkspaceCell      (1,2)
...KryptonWorkspaceSequence  (Vertical)
......KryptonWorkspaceCell      (T,Y)
......KryptonWorkspaceCell      (Horizontal)
.........KryptonWorkspaceCell      (Q,W)
.........KryptonWorkspaceCell      (E,R)
......KryptonWorkspaceCell      (U, I)

As each individual cell is really just a Navigator, with some extra properties; you can alter each cell with the full flexibility of the Navigator. You could change its mode so it looks like a simple panel or have the full Outlook functionality. 

All of the above examples have used the default sizing which is to give each item an equal amount of the available space. So as you make the window bigger all the cells get bigger as well. My next task is to add more control over the sizing so that you can actually use it in real world scenarios.