VisualStudio XAML designer preview differs from actual Windows Phone app view - visual-studio

Question

Take a look at the photo, Visual Studio 2013 (as well as Blend) designer shows different rendering than on actual Windows Phone 8.1 device (Lumia 930):
Look at the red backgrounds widths: designer shows it like left aligned, but device renders as stretch.
The questions are: why and what causes this problem and how to fix it or workaround?
Sample project.
Gist:
<Page.Resources>
<SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
<DataTemplate x:Key="TestItemTemplate">
<Border Background="#FFA20F00">
<TextBlock Text="{Binding Property1}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</Border>
</DataTemplate>
</Page.Resources>
<Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}" ItemsSource="{Binding TestCollection}"/>
</Grid>
Found workaround:
<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}" ItemsSource="{Binding TestCollection}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter"/>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
It seems to be a bug in the VisualStudio. Here's the MS Connect bug report.

Answer 1

It might be that Visual Studio just has a different template than what is actually on the device for some reason. Try setting the alignment of the itemcontainer manually by adding an ItemContainerStyle to your ItemsControl.
Depending on what you want to do, change the value of the setter. Set it to left to mimic the behavior in Visual Studio, or Stretch to make it look like it is on the device.
<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}"
ItemsSource="{Binding TestCollection}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>