Now, we have looked at all the layout containers that are more on a basic scale. At this point we are going to start looking at the layout containers that actually do have a concept of relaying out their children. I am going to pull these elements out of the canvas that they are in and I can tap the ALT key just as I put them into the canvas to pull them out of it. I am going to set them here out of my way for now and I am going to delete that canvas that I put on my report. I am now going to work with the first of my Layout Containers, the StackPanel. When I select the StackPanel and drag one out on the art board, like the boarder by default, it does not have any appearance. It is simply there to help you layout controls. Now I am going to switch back to the selection tool and drag several of My Controls into it.
Once again, I am still using the ALT key to change the parent into the StackPanel. You will notice, when I released number 1, it moved to the top center of the StackPanel. That is how StockPanel works. It presents all of the elements in a contiguous line from top to bottom, centered. So as I bring element 2 in, when I release it, it will be centered directly below the number 1. The thick black line that you saw for a moment was the insertion cursor. So if I needed to insert an element between 1 and 2, I could move it around until the insertion cursor goes to the point where I want it. When I release, the elements will be reordered.
You can change the orientation property on the StackPanel from vertical to horizontal, if you prefer that style. The StackPanel will clip elements that fall outside of its border. So as I shrink the size of my stock panel, the elements are removed. The WrapPanel is similar to the stock panel in behavior. I am going to change the layout type from the StackPanel to the WrapPanel, but where the StackPanel clips the elements, the WrapPanel will cause them to wrap onto the next line. So, this time when I select my WrapPanel and reduce the size, you will notice that the number 4 element jumps down to the next line and then so on to make sure all of the elements have the space that they need. The WrapPanel’s orientation can also be set to get more of a vertical display.
These Layout Managers are designed to reposition the controls inside them based on your layout. Each of these maintains or tends to maintain the size of the original controls. I am going to go ahead and select my four elements and drag them out of my WrapPanel and bring them back in the layout route. I am done with that WrapPanel, so I will delete it. I am going to go ahead and just select my object tree and press the delete key to get rid of it.
The View Box control is they are primarily for just keeping elements together. When I select these elements and right click them until it will group into the view box, it looks similar to many of the other Layout Managers, but the View Box keeps all the elements contained within proportional to each other. So, as I stretch or shrink the View Box around, the elements are stretched and shrunk accordingly. I am going to remove my elements from the View Box. I am going to go ahead and select them in the object tree and drag them out of the view box pressing ALT to return them to the layout route. You will notice that when I returned them to the layout route, they turned back to their original size. That was because the stretching and shrinking that we have seen was because of the View Box and once I took them out of the View Box, they were no longer influenced by it. Now that I have moved these out to the art board, I am going to delete the View Box from my object tree and insert the uniform grid to the next Layout Container.
Transcription by:
Scribe4you Transcription Services