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:

rightalign

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:

ItemContainer

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

ContentBug

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:

ContentBugFix

Let’s see if that does the trick…

rightalignfixed

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

This Post Has 3 Comments

  1. 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. Thanks!! i’m using WP7.1 OS and I still saw this and it was driving me mad.

Leave a Reply

Close Menu