Windows Phone 8 Panorama Binding Bug? - mvvm

Question

I've come across an issue with the Panorama Control on Windows Phone 8.
Created a project to test the issue using simple code based on the WP Panorama Project template.
So I'm binding to an Observable Collection using INotifyPropertyChanged interface (MVVM).
<phone:PhoneApplicationPage
<! ... >
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama ItemsSource="{Binding PageTitles}"
Title="Panorama Test">
<phone:Panorama.HeaderTemplate>
<DataTemplate>
<Grid Width="410" Margin="-2,0,0,0">
<TextBlock d:DataContext="{Binding}" Text="{Binding Title}" HorizontalAlignment="Left" Style="{StaticResource PanoramaItemHeaderTextStyle}" />
</Grid>
</DataTemplate>
</phone:Panorama.HeaderTemplate>
<phone:Panorama.Background>
<ImageBrush ImageSource="/Assets\PanoramaBackground.png"/>
</phone:Panorama.Background>
<phone:PanoramaItem Name="Screen1">
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
<phone:PanoramaItem Name="Screen2">
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
<phone:PanoramaItem Name="Screen3">
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
<phone:PanoramaItem Name="Screen4" >
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
When in the Visual Studio 2013 Design View, in place of the page content I see I single line that reads:
_.di28.Induction.Viewmodels.ItemViewModel
and when run in the Emulator, it reads:
Induction.Viewmodels.ItemViewModel
I've restructured the Binding in all the ways I can think of and find, but the problem remains.
Is this a bug with the Panorama Control under Windows Phone 8?

Answer 1

Not sure if it will resolve your issue but you're misunderstanding something :
The ItemsSource property is not only there for the titles but for the whole PanoramaItems collection.
You should not redefine every PanoramaItem after that but use a datatemplate instead : just like for the HeaderTemplate :
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama ItemsSource="{Binding PageTitles}"
Title="Panorama Test">
<phone:Panorama.HeaderTemplate>
<DataTemplate>
<Grid Width="410" Margin="-2,0,0,0">
<TextBlock d:DataContext="{Binding}" Text="{Binding Title}" HorizontalAlignment="Left" Style="{StaticResource PanoramaItemHeaderTextStyle}" />
</Grid>
</DataTemplate>
</phone:Panorama.HeaderTemplate>
<phone:Panorama.Background>
<ImageBrush ImageSource="/Assets\PanoramaBackground.png"/>
</phone:Panorama.Background>
<phone:Panorama.ItemTemplate>
<DataTemplate>
<phone:PanoramaItem>
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
</DataTemplate>
</phone:Panorama.ItemTemplate>
</phone:Panorama>
I cannot test right now but at least you get the idea. Hope this helps !