Originally published on my old Charteris blog

Debugging layout issues is something I had to do fairly often particularly with some of the complex layouts we were trying in the past. Trying to work out why "such and such" FrameworkElement would not stretch to the size of "whatever" layout panel I was using. 

Before we get to the detail of stretching there is one simple layout, debugging technique that I think is worth sharing; It is that setting the backgrounds of all the various panels that you are using, whilst debugging, makes life much easier. Take this relatively simple layout problem

Imagine if we are trying to find work out why the buttons "2" are not aligned to the bottom of the screen even though they have VerticalAlignment set to Bottom. Well colouring the different layout panels will as you can see make it easier to see what is constraining what.

From this you can see that is more than likely the PaleGoldenRod coloured panel that is causing the panel containing the "2" buttons to layout as they are.

Stretching - Bible

I know it is a little arrogant to suggest I could write a bible on anything but this was the most often referenced pieces of WPF information I had, on a previous project. I cover it in the upcoming Part5 of my WPF Training Course, but I thought it was useful enough to pull out here.

FrameworkElements have a default of Stretch for their HorizontalAlignment and VerticalAlignment but whether or not this stretching is performed all depends on the containing layout panel and how that Panel is being used. It is this information that I refer to as the "Stretching - Bible"

Panel X Dimension Y Dimension
Canvas No No
Dock Yes Yes
StackPanel (Vertical Yes No
StackPanel (Horizontal) No Yes
Grid Yes* Yes*
WrapPanel No No

* Except when using "Auto" rows and columns

Yes in the above table means "Children are stretched to available size"

No in the above table means "Children are their desired size"

I find myself referring back to this table whenever I am wondering why elements are not stretching even though I have set their alignment(s) to Stretch. Hope it helps someone else too.