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:
<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" >
<TextPanel DockPanel.Dock="Bottom" Background="Brown" Height="15">This is some text on bottom.</TextPanel>
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!