VisualStudio XAML设计器预览与实际的Windows Phone应用程序视图不同

Question

看看照片，Visual Studio 2013（以及Blend）设计师显示的不同于实际的Windows Phone 8.1设备（Lumia 930）：

查看红色背景宽度：设计师将其显示为左对齐，但设备呈现为拉伸。

问题是：为什么以及导致此问题的原因以及如何解决或解决方法？

Sample project

要点：

<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>

找到解决方法：

<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}" ItemsSource="{Binding TestCollection}">
  <ItemsControl.ItemContainerStyle>
     <Style TargetType="ContentPresenter"/>
  </ItemsControl.ItemContainerStyle>
</ItemsControl>

它似乎是VisualStudio中的一个错误。 Here's the MS Connect bug report

Answer 1

由于某些原因，Visual Studio可能只是拥有与设备上实际不同的模板。尝试通过向ItemsControl添加ItemContainerStyle来手动设置itemcontainer的对齐方式。

根据您要执行的操作，更改setter的值。将其设置为左侧以模拟Visual Studio中的行为，或将其设置为“拉伸”以使其看起来像在设备上。

<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}"
              ItemsSource="{Binding TestCollection}">

  <ItemsControl.ItemContainerStyle>
    <Style TargetType="ContentPresenter">
      <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
  </ItemsControl.ItemContainerStyle>

</ItemsControl>