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="http://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!