XAML Fu Basics – Panels
No matter what you do with WPF you’re going to run into panels at some point. Having a good understanding of the available panels and what they do is essential to creating or modifying a UI in WPF. People keep asking for a basic overview of the panels so this is my attempt to shed some light on the situation. Questions? Something you don’t understand? Put it in the comments and I’ll do my best to explain the concept.
Canvas
A Canvas allows you to precisely position elements within a region. This is also one of the few panels that allows elements to easily overlap (the other I know of is the Grid). In many cases you might think you need to use a Canvas, you don’t. Much like the GOTO a Canvas is a royal pain in the butt to maintain and it tends to break layouts when changing window sizes or adding new elements. The only possible reason I have ever seen for using a canvas is when laying out drawing elements (e.g. Path, Shapes) or when you’re Bea Stollnitz making a cool example.
DockPanel
The DockPanel allows you to dock UI elements to the edge of the panel while letting another element fill the rest of the space. It is a great replacement for most uses of the Grid because of its lighter weight. The DockPanel is one of my favorite panels for larger scale layouts and should become one of yours as well.
Grid
The Grid is probably the most powerful of all panels. It is also one of the heaviest in terms of CPU and memory usage. That isn’t to say that you should avoid using a Grid if you need one, just don’t use it in every place you need a panel if another type of panel (other than Canvas) will work just as well. With a Grid you can make any layout you could make with HTML tables. You can size columns and rows either based on their content (Row Height/Column Width=”Auto”) or based on what the Grid is contained in (Row Height/Column Width=”*”).
StackPanel
The StackPanel is the bread and butter of many layouts and especially within control templates. Basically the StackPanel stacks items either vertically or horizontally. One thing to be careful of: the StackPanel is unconstrained in the direction it is stacking, e.g. you could stack buttons right off the screen and even if you add scrollbars depending on the visual tree they may never appear.
UniformGrid
The UniformGrid is an interesting control. It lays out elements in as near to a square grid as it can without having to specify the number of rows or columns within it. The most common use I’ve found for this is as the ItemsPanel in an ItemsControl. Say you want all of your items displayed in two equal columns. All you have to do is tell the UniformGrid you want two columns and it will make two equal columns and fill the items into however many rows are required.
WrapPanel
The WrapPanel acts much like a StackPanel except that when the items stack to the edge of the panel they wrap. The same caveats with scroll bars apply, in many cases you have to set a height or width to get it to wrap items properly (since the height and width properties are basically evil try using MaxHeight/Width).
Edit: Here is a similar post on Code Project with some more advanced examples.
