This blog serves as a public service announcement to give your ListBox, ListView, ItemsControl, whatever you choose the space that they deserve. I have seen a lot of apps (and often forget to do this myself!) that do not extend their lists all the way to the right of the page and keep the page too close to the bottom. It is easy to fall into this trap because of the defaults within Visual Studio. Take a look at the following examples:
Notice that huge gap to the side? Now take a look at the settings apps
Look mom! No gap! So what causes this gap? It’s the default template for pages in Visual Studio. When you create a new page for Windows Phone Silverlight apps you get the following
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
</Grid>
Notice the side margin of 12? This is a design guideline to leave the gap, but lists give you this buffer as well! You get the same XAML for Windows Phone Runtime app, but 9.5 instead of 12 for the margin. So, when you create a new page that will have a list in it, remove that right margin!
<!--ContentPanel - it has a ListBox so no right margin! -->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,0">
<ListBox>
</ListBox>
</Grid>
Now our app behaves just like the built in apps!
The second space you want to give your apps is space at the bottom of the list. When you use a list it will expand to all the space it is given. The downside to this is when you scroll to the bottom of the list, the content is at the very bottom! This makes it a little hard to see. Take a look at the following examples.
Notice the nice gap at the bottom of the settings app. This is a lot easier on your eyes. This one is easy to solve as well. Simply add some padding to the bottom of your list.
<ListView Padding="0,0,0,72">
</ListView>
If you want you can create a style to use everywhere.
Take a few seconds and update your apps with these gaps.