Moving to Windows 10: SemanticZoom

In my spare time I’m moving some of our projects to Windows 10 UWP. One of the signature controls of Windows 8 was the SemanticZoom control. But as with many other controls, this one got an overhaul to trim down a few layers and improve performance. This resulted that existing Windows 8/8.1 views using a SemanticZoom control broke as it didn’t zoom anymore, which is quite important for this control.

In Windows 8.1, using a SemanticZoom came down to some very basic XAML, zooming happened automatically and jumped to the correct group if you were using a grouped CollectionViewSource.

<SemanticZoom x:Name="SemanticZoom">
    <SemanticZoom.ZoomedInView>
        ...
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        ...
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

In Windows 10, we need a small tweak to enable the zooming.

<SemanticZoom x:Name="SemanticZoom"
              ScrollViewer.ZoomMode="Enabled">
    <SemanticZoom.ZoomedInView>
        ...
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        ...
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Another detail to pay attention to is scrolling: back in ‘the old days’ scrolling on a GridView happened horizontally, now it’s by default vertically. While that might be good for some applications, this one I’m working on requires horizontal scrolling. There are a few things to do to acquire the desired behavior:

• Make sure the items flow vertically and wrap horizontally by setting the Orientation on the ItemsWrapGrid.
• Re-enable the horizontal scrollbar and disable the vertical one.

Keeping the grouping of the zoomed in view, this resulted in XAML similar to:

<SemanticZoom.ZoomedInView>
    <!-- Horizontal scrolling to be like 8.1 for demo purposes -->
    <GridView ItemsSource="{Binding Source={StaticResource Collection}}"
              ItemTemplate="{StaticResource MyItemTemplate}"
              ScrollViewer.HorizontalScrollBarVisibility="Auto"
              ScrollViewer.HorizontalScrollMode="Auto"
              ScrollViewer.VerticalScrollBarVisibility="Disabled"
              ScrollViewer.VerticalScrollMode="Disabled">

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Vertical" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="0">
                            <TextBlock Text='{Binding Name}' Foreground="Gray" FontSize="25" Margin="5" />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

Some of my views still had a WrapGrid control instead of an ItemsWrapGrid. The MSDN documentation clearly recommends that as of Windows 8.1 the ItemsWrapGrid should be used. In Windows 10 you’ll be forced to use it, as wrapping no longer works correctly out of the box on the WrapGrid if you try to switch orientation. Other than that, everything still works as intended: we can zoom out and jump back into another selected group.

The code for this blog post is available on GitHub.

In the next post we’ll use an AdaptiveTrigger to change the orientation of our GridView flowing based on the available screen size and ratio.

Note: When porting an app from Windows 8.1 to Windows 10, please review used styles or even better reset the styles and re-apply any changes made to get the most out of the improvements the Windows team made.