Avalon Gotcha Quiz: What Did I Do Wrong?

I was writing an Avalon application today and hit a weird gotcha.  It threw me for a loop until a colleague explained what was happening.

Basically, I wanted to create a very simple page with a ListBox and two TextPanels, one above the ListBox and one below the ListBox.  So I wrote the following XAML:

<Window xmlns="https://schemas.microsoft.com/2003/xaml">
<DockPanel DockPanel.Dock="Fill" Width="100%" Height="100%" Background="Pink">
<TextPanel DockPanel.Dock="Top" Background="Pink" Height="15">This is some text on top.</TextPanel>
<ListBox ID="listBoxGenre" DockPanel.Dock="Fill" Background="CornSilk" >
<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
</ListBox>
<TextPanel DockPanel.Dock="Bottom" Background="Brown" Height="15">This is some text on bottom.</TextPanel>
</DockPanel>
</Window>

This makes logical sense, right?  I wanted the two TextPanels to be of Height 15 and then the Listbox to fill the rest of the area.  So, I wrote the code you see above.  However, when I ran the XAML, the layout was all goofed up and the TextPanel that was supposed to be on the bottom was being rendered all wrong.  What did I do wrong?  Answer to the quiz on Monday!

Comments

• Anonymous
  April 30, 2004
  It's all in the ordering. ;)
• Anonymous
  April 30, 2004
  I don't know anything about XAML, but lemme guess...
  
  The docking model is the same as in the current .NET framework, isn't it? That means you first put a text panel on the top, then fill the rest with a listbox, and then come to the conclusion there is no more room for the bottom panel, because the listbox already extends to the bottom... Probably the bottom textpanel gets draw over the listbox instead of below it.
  
  Lesson learned: Always add the item with "Fill" docking last.
  
  
• Anonymous
  May 03, 2004
  Yep, both of you are correct!