Using a SemanticZoom control containing a Grid

The SemanticZoom control in Windows Store Apps is a nice way of implementing the pinch style gesture to show content you want to display in a different fashion – one zoomed in, the other zoomed out.

I wanted to switch between a GridView layout and a ListView layout using this control – displaying more detailed information in the GridView layout and showing less when using a ListView. However in my situation I was using a GridView HeaderTemplate which was being used to display an image and I wanted this to appear in the same location when zoomed out with the ListView.

Unfortunately using the HeaderTemplate with the ListView resulted in it appearing in a different location. It would have been nice to lay out the header such that it appeared in the same location on both GridView and ListViews but normally the only controls allowed in a SemanticZoom control are GridView and ListViews.

The way around this is to create a new control that subclasses the Grid control and that implements the ISemanticZoomInformation interface (see this MSDN blog entry). This grid can then encapsulate the ListView and the header template content so that it appears in the same location as the zoomed out view. I didn’t need to implement anything in the ISemanticZoomInformation methods, everything seems to work as is.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <SemanticZoom Height="400">
        <SemanticZoom.ZoomedInView>
            <GridView
                SelectionMode="None"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                ItemTemplate="{StaticResource ItemTemplate}"
                HeaderTemplate="{StaticResource HeaderTemplate}"
            />
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <local:SemanticZoomableGrid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <ContentControl x:Name="ListViewHeader"  Grid.Column="0" Margin="50,0,0,0" 
                    ContentTemplate="{StaticResource HeaderTemplate}" />
                <ListView
                    Grid.Column="1"
                    Margin="100,0,0,0"
                    SelectionMode="None"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                    ItemTemplate="{StaticResource ItemListTemplate}"
                />
            </local:SemanticZoomableGrid>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>
</Grid>