Avalon Gotcha Quiz: What Did I Do Wrong?

  • Article

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!