Bryan's Coding Corner

I’ve created a new project for Behaviors on CodePlex, the WPF Behavior Library. A behavior is basically just a set of attached properties and functionality you can attach to a visual element. By attaching the behavior to the bit of UI you give it the additional functionality.

The first behavior I’ve included is Drag & Drop. There are a few drag and drop behaviors out there right now but they all require a lot of modification to use in other applications. Most of them only work for a subset of the UI elements that inherit from ItemsControl (mostly the ones that have their own ItemsContainers), some can’t move items between windows, and some don’t allow you to change logic behind moving items. In short none were general purpose enough to just grab a dll and use the behavior.

So take a look at the WPF Behavior Library, give feedback, report bugs, suggest new behaviors and features, or contribute.

WPF WPF, wpfbehaviorlibrary

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.

XAML Fu basics, Canvas, DockPanel, Grid, panels, StackPanel, UniformGrid, WrapPanel