Let your ListBox items breath

When displaying a list to your users it can get tricky when the list is bigger then the screen. The last item will usually be at the very bottom of the screen. This can cause the user to swipe again just to see if there is something he hasn't seen.

Your user should not have to think about such things!

 
Is runtime sixteen the last item?

Is runtime sixteen the last item?

 

As you can see in the image above you can't know if "runtime sixteen" is the last item or not. You would have to check it by dragging the list up and see if it would bounce back or show more data.

A nice little trick (which is something that Microsoft recommends for all scrollable containers) is to tweak your ListBox a little bit by adding extra space to it's bottom. This can be done with just a few lines of code:

<ListBox.ItemsPanel>
 <ItemsPanelTemplate>
  <StackPanel Margin="0,0,0,150"/>
 </ItemsPanelTemplate>
</ListBox.ItemsPanel>

If you run your app now you will see a nice little extra space after the last item.

 
Now it's all crystal clear.

Now it's all crystal clear.

 

Now you don't have to check if it's really the last item but can know it just by looking at the list. It might save you a moment of frustration or two :)

I hope you like this.

Until next time, happy coding :)

Windows Phone progress indicator

Taking photos in Windows Store Universal Apps