Semantic Zoom always brings back to the first item - xaml

Question

I am trying to implement a semantic zoom in C#/Xaml for Windows 8. I succeed in displaying the zoom out and the zoom in. But when i click on item in the zoom out view I always come back to the first item of my zoom-in view.
here is how I grouped my items :
public IEnumerable<object> ListByCategory()
{
var query = from item in listArticles.listArticles
orderby item.categorie
group item by item.categorie into g
select g;
return query;
}
I used this to display the same collection of grouped items to the zoom out and zoom in views :
this.cvs1.Source = App.api.ListByCategory();
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource =
this.cvs1.View.CollectionGroups;
and my xaml code is
<ScrollViewer
x:Name="itemGridScrollViewer"
AutomationProperties.AutomationId="ItemGridScrollViewer"
Grid.Row="1"
Margin="0,-3,0,0"
Style="{StaticResource HorizontalScrollViewerStyle}">
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
<SemanticZoom.ZoomedOutView>
<GridView Foreground="Black" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2"
VerticalChildrenAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True">
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
</ScrollViewer>
Thank you for your help.

Answer 1

I found the solution in the link that Depechie posted.
Replacing the ScrollViewer with SemanticZoom
The first and most important thing to do is to completely remove the ScrollViewer named “itemGridScrollViewer” from the Movies.xaml. The SemanticZoom control won’t work correctly if it’s inside the ScrollViewer.
Many people have problems getting the ZoomedOutView and ZoomedInView “in sync”. The usual problem is that when the item in ZoomedOutView is clicked, the ZoomedInView doesn’t scroll to the correct position. The reason for this problem usually is that the SemanticZoom –control is inside a ScrollViewer.
So effectively, I just remove the scrollViewer and it works like a charm :
<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom"
Grid.Row="1"
Margin="0,-3,0,0">
<SemanticZoom.ZoomedOutView>
<GridView Foreground="Black" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Group.Key}"
FontFamily="Segoe UI Light"
FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2"
VerticalChildrenAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True">
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>

Answer 2

Bit difficult to see why it isn't working, so my option for you is to try working 'back' from a working solution: take a look at http://mikaelkoskinen.net/winrt-step-by-step-tutorial-mvvm-gridview-semanticzoom/ for a very good detailed example!

Answer 3

I think grouping may be the key here. Make sure your CollectionViewSource has IsSourceGrouped="True".
Also, you don't need to set
ItemsSource = this.cvs1.View.CollectionGroups;
It can be set
ItemsSource = this.cvs1;