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 中的一个错误。 Here's the MS Connect bug report.

Answer 1

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

根据您想执行的操作，更改 setter 的值。将其设置为左侧以模仿 Visual Studio 中的行为，或将其设置为 Stretch 使其看起来就像在设备上一样。

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

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

</ItemsControl>

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

VisualStudio XAML designer preview differs from actual Windows Phone app view

visual-studio

xaml

windows-phone

blend