Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Silverlight API ships with a set of layout panels. They are the StackPanel, Canvas, and Grid, which are first-rate for common layout scenarios. If you export explore the Silverlight Toolkit you'll see some additional panels. They are the WrapPanel and the DockPanel. For historical reasons the panels are part of the toolkit, but don't be fooled. They're production ready. I'm inside Visual Studio and I've opened a project called MorePanels and then I've opened this LiveDemo.xaml file. I've also pinned in my Toolbox to the left side of my screen, that's done by clicking on this Auto Hide button and, go down here and hover over the Toolbox and then click on Auto Hide.
I've installed the latest Silverlight Toolkit on my computer. If you are following on along you need to install the toolkit before continuing. Depending on your computer configuration, you may or may not see the Toolbox controls on the Visual Studio Toolbox. On my computer I had to reset my Visual Studio Toolbox in order to see the Silverlight 5 controls. That's because I hadn't installed the Silverlight 4 toolkit earlier. Here is how you can reset the toolbox. Right-click, and choose Reset Toolbox. Click Yes, and you're done.
If you are going to use the Silverlight 5 controls in the toolkit, you have to make sure you're compiling to Silverlight 5. That's done by going to your Property pane and selecting Silverlight 5 as your target Silverlight version. On my computer I'd like to keep my controls sorted in alphabetical order, that's also easy to accomplish by right-clicking and choosing Sort Items Alphabetically. Now we're ready to look at the demo. I'm going to press F5. This demo has four different examples.
We'll start by looking at the DockPanel Basic. In my first example you can see the two of the buttons are pinned to the left-hand side. One is pinned to the bottom, to two at the top and so on. Here is a real-world example of how you might use that. I'm using the DockPanel to dock the menu and the button bar at the top of the screen. The WrapPanel stacks its children across the top row, trying to fit as many as possible on the top row. When the top row is full it moves the rest of the children to the next row.
In this example you can see I have four buttons on the top row. If I move this horizontal size Horizontal Size slider and make it narrower you can see that one of the buttons has moved down to the second row. If I make it wider I can fit more on the first and second rows. So here's a real-world example. I have a Color dialog where the user can select different colors to paint their UI. If we make the paint box narrower you'll see that the colors move down and make room.
If I make it wider I can see more colors on my palette, and let's see how you set these in xaml. I'm going to open the UseDockPanel and then I'm going to scroll down in my xaml and show you my DockPanel. It has six buttons as children. Each button is selecting a location but the first button is docked to the left, the second button is docked to the left and so on. If I take the button that's currently docked at the bottom and cut it and paste it here at the top of the order, you'll see that there is now a new arrangement.
This button is docked to the bottom first and then the next two buttons are docked to the left. You can control what happens to the last item as well by setting this LastChildFill property. Currently, LastChildFill is set to False that means that this button here does not occupy the entire leftover space. If I change this to True and then run the application again by pressing F5 and loading the DockPanel Basic you see that this sixth button is now occupying the entire leftover space of the DockPanel.
Both the WrapPanel and DockPanel are useful panels. Why not try them for yourself?
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104384 Viewers
56 Video lessons · 116289 Viewers
71 Video lessons · 85534 Viewers
131 Video lessons · 40946 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.