CODEWITHSUNDEEP
visual-studioxamlwindows-phoneblend
some_engineer
some_engineer

Reputation: 1884

VisualStudio XAML designer preview differs from actual Windows Phone app view

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

enter image description here enter image description here

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.

Upvotes: 0

Views: 221

Answers (1)

Patrick
Patrick

Reputation: 17973

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>

Upvotes: 1

Related Questions