Why when I switch my semantic zoom, it does not navigate to the section?

Question

Something is strange with my semantic zoom. I have two sections in it:

And when I set the the ZoomOut, the grouping is okay, here is the image:

But for example if I choose the second option, semantic zoom does not navigate me to the item clicked.

Here are the most important parts of my program.

    <!-- from resources -->
    <CollectionViewSource
        x:Name="groupedItemsViewSource"
        Source="{Binding Groups}"
        IsSourceGrouped="False">

    ...

    <!-- Horizontal scrolling grid used in most view states -->
    <SemanticZoom x:Name="semanticZoomControl" Grid.Row="1" >
        <SemanticZoom.ZoomedInView>
            <ListView x:Name="itemGridView" SelectionMode="None" IsItemClickEnabled="False"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      ScrollViewer.VerticalScrollMode="Disabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.HorizontalScrollMode="Auto"
                      Margin="0,-3,0,0"
                      Padding="116,0,40,46"
                      ItemTemplateSelector="{StaticResource StartItemSelector}"
                      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                      ItemContainerStyle="{StaticResource ListViewItemStyleFlat}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <ListView x:Name="groupGridView" CanDragItems="False"
                      CanReorderItems="False" SelectionMode="None" IsItemClickEnabled="True"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.HorizontalScrollMode="Auto"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      ScrollViewer.VerticalScrollMode="Disabled"
                      ItemContainerStyle="{StaticResource ListViewItemStyleSimple}"
                      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                      ItemTemplateSelector="{StaticResource ZoomedOutSelector}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"  Height="330"
                                    HorizontalAlignment="Left" VerticalAlignment="Top" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>

What could be the reason which is happening this?

If you feel more confortable, you can download the project from SkyDrive: http://sdrv.ms/Ma0LmE

Answer 1

You need to set the ItemsSource of the Zoomed Out GridView in the codebehind like

groupGridView.ItemsSource = groupedItemsViewSource.View.CollectionGroups;

You'll most likely need to update your templates for that Grid, to append a "Group." before your bindings.

Your ItemTemplateSelector will also stop working at it will be passed a DependencyObject rather than your bound group. You can cast the object to ICollectionViewGroup which has a Group property that you can cast to your model object etc.

It's all a pain in the ass but I can't find a better way at the moment.

Answer 2

My case was somewhat different but I decided to share it here, hope someone will find it useful. In my app I had to have two different datasources for the zoomed in/out views of the semantic zoom. This, of course, broke the link between the two, so I couldn't do what @Nigel suggested above and what would work in the general case. Instead, I had to handle scrolling myself.

So, I added an event handler for the view change event:

<SemanticZoom ViewChangeStarted="OnSemanticZoomViewChangeStarted">
...
</SemanticZoom>

Then I defined it in the codebehind:

private void OnSemanticZoomViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    // only interested in zoomed out->zoomed in transitions
    if (e.IsSourceZoomedInView)
    {
        return;
    }

    // get the selected group
    MyItemGroup selectedGroup = e.SourceItem.Item as MyItemGroup;

    // identify the selected group in the zoomed in data source (here I do it by its name, YMMV)
    ObservableCollection<MyItemGroup> myItemGroups = this.DefaultViewModel["GroupedItems"] as ObservableCollection<MyItemGroup>;
    MyItemGroup myGroup = myItemGroups.First<MyItemGroup>((g) => { return g.Name == selectedGroup.Name; });

    // workaround: need to reset the scroll position first, otherwise ScrollIntoView won't work
    SemanticZoomLocation zoomloc = new SemanticZoomLocation();
    zoomloc.Bounds = new Windows.Foundation.Rect(0, 0, 1, 1);
    zoomloc.Item = myItemGroups[0];
    zoomedInGridView.MakeVisible(zoomloc);

    // now we can scroll to the selected group in the zoomed in view
    zoomedInGridView.ScrollIntoView(myGroup, ScrollIntoViewAlignment.Leading);
}

As you can see, the hack is that the gridview first needs to be rewound for the ScrollIntoView to work properly. I suppose this is just another of Microsoft's "by design" decisions... :P