The Grid control at first looks like every other control, I am going to double click the grid to cause it to become the activated element, so, I get the grid adorners on it. Unlike the canvas and the other layout containers, the grid has got the two additional bars, one to the left and one above as well as a small icon that right now informs us that we are in canvas layout mode. And when we click that and switch over to grid layout mode, now, look what happens when I move my number one control into the grid. As soon as it has moved into the grid, a handful of new adorners displays a new information for me. Right now, the information is telling me that my button is going to stay about 95 pixels from the top, 106 pixels from the left and 100 pixels from the bottom. You will notice that these numbers are also displayed over here in the Property inspector.
To the right of the number 1 is a dotted line and what looks like a broken link. This indicates that the distance between the right side of my control and the right side of the grid is variable and it can change. I can change any of these margins from hard values which are values that will not change to a soft value that can change just by clicking on those links. You will notice when I click on the left link, the right link became solid. For a grid to lay everything out, it has to know information in both directions from at least one source by making the left link a soft link. It no longer had information on where to position my number and it figured since I did not care about the left margin I must care about the right margin. Now, when I select my grid and resize it, you will notice that the number one will always remain at that distance from the right and top of my grid.
So long as there are no row or column dividers in a grid, the margins will always be from the current location to the edges of the grid, but I can add row or column dividers at any time. And now the margins will move to that instead of the upset edge. If it was my intent for the margin to the link to the right side of the grid instead of to the column separator, I can modify the column-span property in the property inspector. By setting the value of the two, I now see to it that my control exists in both of those cells. Since before the margin was 27 pixels from the right most portion that the control recognized, now they are recognize that the right edge of the grid it jumped to 27 pixels from the right edge of the grid. When I select the grid and change the size of it, you will notice that both columns increase and decrease in size. This is because both columns or what is called star-sized. This means each one will get its appropriate percentage of the size of the grid. The two unlocked locks at the top of grid indicate this. By clicking them, I can change from star-sized to pixel-size and this will establish that that column will keep its size regardless of how big the grid happens to get.
The grids row and column dividers are guidelines to help you lay things out. These column dividers, however, being on the guidelines, there is nothing stopping you from moving the elements on top of these dividers. When I run my application, you will see that the elements in the grid move around based on how I am moving my application window. So, as the application gets wider or narrower, the grid maintains its margin from the layout route and CONTROL 1 maintains its margin to the right side of the grid. CONTROL 2 however, as it attached to the left maintains its distance from the grid and the grid subsequent distance from the edge of the window. Just as each of the elements inside the grid has its margins, the grid itself has its margins from the layout route. So, in the layout route, is the activated element and I select my grid. You will see each margin is displayed as well.
Layout Containers can live inside of each other to any arbitrary depth. So, sometimes it may be useful to put a stock panel, for instance, inside of a grid so that as the grid changes around the stock panel will stay where it is supposed to be relative to the rest of the application. But the elements decide it or relayed out as they are supposed to be.
When you are working with layout containers the activated element or the element with the yellow box over the object tree will always receive the new element center created. The Layout Route, by default, being selected means that if I create a new rectangle it will be created as a child of the Layout Route. However, if I double-click my grid and make it the activated element, the rectangle that I draw will end up as a child of it. This is evident by the indentation displayed over here in the object tree.
The snap lines that we discussed earlier, to help you get the padding against the sides of your window, are also there for the grid. So, as I move my rectangle close to the edges of the grid or even a gridline, the pink bar show up to help me get the right spacing from the edges of my layout container.
Now that we have taken a look at the different layout managers you should start to gain an idea of how these layout managers can work together to help you build very dynamic user interfaces that will change as the user resizes the application to their particular means.
Transcription by:
Scribe4you Transcription Services