Avalon Quiz Answer: Beware of Dock.Fill and the Order of Elements

  • Article

So where did I go wrong?  When Avalon encounters the “Fill“ command, it does just that -- filling the entirety of the given element no matter what follows that element.  So though I logically expected the placement of the following TextPanel to carve its location, it gets overriden by the earlier Fill command. So, if I place the TextPanel above the ListBox, it will work:

<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>
<TextPanel DockPanel.Dock="Bottom" Background="Brown" Height="15">This is some text on bottom.</TextPanel>
<ListBox ID="listBoxGenre" DockPanel.Dock="Fill" Background="CornSilk" >
<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
</ListBox>
</DockPanel>
</Window>

Props to Drew Marsh and Luc Cluitmans for figuring it out...