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.

2 Responses to “Star sizing”

  1. DavidS Says:

    Hi Phil,

    Fantastic new work, which I will definitly could do with, can you confirm whether the tab navigator will have the ability to show the close button on the tab, I know this is not the place to ask but its sort of relevant?

  2. Phil Wright Says:

    At some point in the future I am sure the Navigator will be modified to do that but probably not at the next release.

Leave a Reply