Semantic Zoom doesn't work in Windows 8 app

Question

I'm trying to use a SemanticZoom in my Windows 8 application and it seems to not work.

Do I do something wrong here ? I tried pretty much everything I thought that could work but in vain : removed the rowdefinitions, removed the style, removed the templates but still not working...

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <SemanticZoom Grid.RowSpan="2">            
        <SemanticZoom.ZoomedInView>
             <GridView x:Name="itemGridView"
                      AutomationProperties.AutomationId="ItemGridView"
                      AutomationProperties.Name="Grouped Items"
                      Padding="116,137,40,46"
                      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                      SelectionMode="None"
                      IsSwipeEnabled="True"
                      IsItemClickEnabled="True"
                      ItemTemplate="{StaticResource GridViewItemTemplateZoomIn}"
                      ItemsPanel="{StaticResource GridViewItemsPanelTemplate}"
                      helpers:ItemClickCommand.Command="{Binding ServiceClickCommand}">
                <GridView.GroupStyle>
                    <GroupStyle HidesIfEmpty="True">
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="1,0,10,6">
                                    <Button AutomationProperties.Name="Group Title"
                                            Style="{StaticResource TextPrimaryButtonStyle}">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Name}"
                                                       Margin="3,-7,10,10"
                                                       Style="{StaticResource GroupHeaderTextStyle}" />
                                            <TextBlock Text="{StaticResource ChevronGlyph}"
                                                       FontFamily="Segoe UI Symbol"
                                                       Margin="0,-7,0,10"
                                                       Style="{StaticResource GroupHeaderTextStyle}" />
                                        </StackPanel>
                                    </Button>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical"
                                                       Margin="0,0,80,0" />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <GridView x:Name="itemZoomOutGridView"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                      AutomationProperties.AutomationId="ItemGridView"
                      AutomationProperties.Name="Grouped Items"
                      Padding="116,175,40,46"
                      SelectionMode="None"
                      IsSwipeEnabled="True"
                      IsItemClickEnabled="True"
                      ItemTemplate="{StaticResource GridViewItemTemplateZoomOut}"
                      ItemsPanel="{StaticResource GridViewItemsPanelTemplate}"
                      ItemsSource="{Binding ServiceCategories}">
            </GridView>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>

Thank you :)

Answer 1

If I understand your problem correctly, the semanticView in itself is working (you can zoom in and zoom out). But when you zoom back in the GridView items are the same and doesn't change according to the ZoomedOutView GridView item you selected.

But with your XAML I think this is normal behaviour, because when you select a category the binding on your gridview in zoomedInView doesn't change.

ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

My first advice would be to bind the ItemsSource to a list in your ViewModel not use a staticRessource.

Secondly you can change the SemanticView this way:

<SemanticZoom Grid.RowSpan="2" ViewChangeStarted="SemanticZoomChanged" >

And in your code behind add that:

private void SemanticZoomChanged(object sender, SemanticZoomViewChangedEventArgs e)
{
   // First we check that we are going from ZoomedOut to ZoomedIn
   if (e.IsSourceZoomedInView == false)
   {
      // I call a method in my ViewModel giving the chosen category in parameter
      DefaultViewModel.OnSelectedCategoryChanged(e.SourceItem.Item.ToString());
   }
}

Using MVVM I know it's ugly to have code in code-behind but this is not a lot and we are calling a method in the ViewModel to do the logic so it's still following MVVM design pattern.

And last we add a function in the ViewModel that will change the ItemsSource of the ZoomedInView

OnSelectedCategoryChanged(string chosenCategory)
{
    // Here change the value of your groupedItemsViewSource list
    GroupedItemsViewSource = ....;
}

Now it should work as you want to.