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.