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

Question

看一下照片，Visual Studio 2013（以及Blend）设计器显示的渲染与实际的Windows Phone 8.1设备（Lumia 930）不同：

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

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

样品工程 。

要旨：

<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中的错误。 这是MS Connect错误报告 。

Answer 1

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

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

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

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

</ItemsControl>