Docking Controls to the Top or Bottom of the Screen in a Windows Phone App

This is actually super easy to do in XAML, but for whatever reason it caused me some trouble.  I wanted a page to have a scrollable list of items that filled the screen, with a bottom row of buttons always visible.  I could have used a StackPanel and set the height of the ListView so that there was room at the bottom for my buttons, but that seemed hack-ish.

What I wanted was an equivalent of the old DockPanel.  Unfortunately, that is no longer available for some reason.

So, a bit of searching and I stumbled across a technique using the Grid instead:

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="*"/>
		<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
 
	<ListView Grid.Row="1"></ListView>
	<Button Grid.Row="2">Footer Button</Button>
</Grid>

The important bit here is the Grid.RowDefinitions section.  I define the height of the first row to fill the available space by setting Height="*". Then, using Height="Auto", I set the second row to automatically size itself to the height of its controls.

Now my page has a full-size list, with a “sticky” footer row. You can define a header row by reversing the order of the RowDefinition rows, or define your own row and columns to suit your needs.

Categories: C# Windows 8 XAML