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 :
Let’s see if that does the trick…
Yep, the layout does what it’s supposed to do now, sweet!