WP7: Right alignment bug for item templates with grids

If you have done a few templates with some of the content aligned right and other content aligned left in a grid. You have probably bumped into this. It took quite some time to solve. The problem does not exist in WPF or later versions of Silverlight, but since Windows Phone 7 is based on version 3 it’s a bug that can cause some headache. First, a quick view of how it looks. In the picture below, the accent colored label should be aligned right:


But the alignment is connected to the content above and if it doesn’t fill to the right margin we have a problem. The grid that make up the style for each item is stretched and also the HorizontalContentAlignment set to stretch, but still the content refuses to stretch, making it impossible to right align the bottom content correctly.

The problem is in the template binding for the built in ItemContainer, so the solution is to add your own. Start by creating a copy of the built in:


If you look into this template is seems that the HorizontalContentAlignment of the content template is bound to the HorizontalContentAlignment of the item template:


Even the XAML code says that, if you look at the end you find the template binding for horizontal alignment there and even if it is template bound it still is set to left align:

So the trick is to remove this binding and set it manually. Preferable to stretch Smile:


Let’s see if that does the trick…


Yep, the layout does what it’s supposed to do now, sweet!

This Post Has 7 Comments

  1. Allen Lee

    I encountered a similar isue related to the header of a Panorama item. I want to place a round button at the right side to the header, but aligned to the right (while the header align to the left), just like the People Hub. But it looks like it’s impossible to do that.

  2. Greg

    Thanks!! i’m using WP7.1 OS and I still saw this and it was driving me mad.

  3. saree

    Thanks, it’s a good information. alignment is a big head ache on templates all the time for me.

  4. Sakura

    These days out of all the types of pure silk sarees modern silk sarees are very much in trend due to being made of soft silk sarees and lightweight silk.

  5. Sakura

    Indian fashion scene has evolved so much that traditonal silk sarees have taken a contemporary twist and you can even buy silk saree online from many famous brands.

Leave a Reply