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>