Rudi Grobler

Why WPF Rocks (Custom Layout Panel Showcase)

Another enhancement in WPF that makes it stand out above the rest is the excellent layout system. In WinForms, a button has a Top and Left property. Now you can move the button around on the form. What if you want to dock the button to the top? Lets add a property Dock! This works... but what if I want to randomly scatter the buttons over the screen? Or if I want to automatically scale the buttons in equal sizes, even if I maximize my window? You can't keep adding properties to accommodate the layout! WPF has taken a new approach, every control in WPF has no concept of layout... Check a button in WPF, it has no Left or Top property! Well, this is crazy, how do you lay it out then? Easy, WPF introduced Layout Panels... The layout panel controls how its children is layed out on the screen.

WPF ships with loads off layout panels (StackPanel, WrapPanel, Grid, DockPanel, Canvas, etc). The layout system also use a new concept called attached properties to then position the element in the panel...

Lets look at a example that closely resemble WinForms... We add a Canvas and add a button to this canvas.

<Canvas>
    <Button />
</Canvas>

To now position the Button at Left=100 and Top=100, we use attached properties

<Button Canvas.Top="100" Canvas.Left="100"/>

This is very flexible... Now you can extend the layout system!!!

To create layout panels, have been covered extensively on the net, I will just quickly show the basics

public class MyCoolPanel : Panel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        // Size...
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        // Position
    }
}

[Tip] Use the Nerd + Art snippets here...

Derive from Panel and override MeasureOverride and ArrangeOverride! Now you have great control over how big the items can/should be and where thy will be positioned!!!

Here is a collection of the best custom layout panels I found on the internet:

PS. All of these panels source is also available!

FishEyePanel

Created by Paul Tallett

AnimatingStackPanel

Released as part of Mike Mars and Joe Stegman's talk at Mix '08 (Including the absolutely brilliant AnimatingPanelBase created by Robby Ingebretsen)

[NOTE] This panel has animation so I will not post a screen cap of this... run the attached application to see this panel in action!

FanPanel

Also by Paul Tallett

The FanPanel, as the name suggests, fans the items out into their position... all the items are fanned out into a wrap panel!

[NOTE] This panel has animation so I will not post a screen cap of this... run the attached application to see this panel in action!

LayeredStackPanel

Created by Nick Thuesen

RadialPanel

Created by Henry Hahn

[UPDATE] also check out this excellent article by Jobi about radial panels!!!

Panel3D

Created by Josh Smith

DiagonalPanel

Created by

TimelinePanel

Originally created by Rob Zelt (Part 1 & Part 2). Later released as part of blendables layout mix

PS. The blog only had a partial implementation and no source code so I implemented the rest...

ElementFlow

Created by Pavan Podila and released as part of the FluidKit

AnimatingCOSPanel

Created by Rudi Grobler

ColumnedPanel

Created by Sacha Barber

SpanningStackPanel

Created by Nick Thuesen

AnimatedWrapPanel

Created by Paranoid Ferret Productions

[NOTE] This panel has animation so I will not post a screen cap of this... run the attached application to see this panel in action!

AnimatingRadomCanvas

Created by Rudi Grobler (Based on AnimatingPanelBase)

[NOTE] This panel has animation so I will not post a screen cap of this... run the attached application to see this panel in action!

Here is the showcase application (including source)

[UPDATE] the link is now fixed

If you found the article useful, please