SemanticZoom Control in Universal Windows Platform

Let me brief you about Semantic Zoom control.

• The semantic zoom control enables the user to zoom between the two different views of the same content.
• It has zoomed in and zoomed out components. 
• The zoomed in view is the main ListView, which the user will be first presented with.
• The zoomed out view is the higher level view of the same content.  

Here in this article, to make it simple, I haven't used MVVM Pattern.

 

Add the classes, given below, "JumpListHelper" and "JumpListGroup", which helps to group the data properly. It groups the items into the alphabetical groups and sorts the items.

public class JumpListGroup<T> : List<object>
{
      public object Key { get; set; }

      public new IEnumerator<object> GetEnumerator()
      {
          return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
      }
}

  public static class JumpListHelper
  {
      public static List<JumpListGroup<TSource>> ToAlphaGroups<TSource>(
          this IEnumerable<TSource> source, Func<TSource, string> selector)
      {
          var characterGroupings = new CharacterGroupings();

          var keys = characterGroupings.Where(x => x.Label.Any())
              .Select(x => x.Label)
              .ToDictionary(x => x);
          keys["..."] = "\uD83C\uDF10";

          var groupDictionary = keys.Select(x => new JumpListGroup<TSource>() { Key = x.Value })
              .ToDictionary(x => (string)x.Key);

          var query = from item in source
                      orderby selector(item)
                      select item;

          foreach (var item in query)
          {
              var sortValue = selector(item);
              groupDictionary[keys[characterGroupings.Lookup(sortValue)]].Add(item);
          }

          return groupDictionary.Select(x => x.Value).ToList();
      }
  }

Once, the data is grouped, we need to bind the data to our UI control. CollectionViewSource class helps to bind the grouped data. Add the code, given below: 

public class CountryJumplist
{
    private ObservableCollection<Country> loadedCountry = new ObservableCollection<Country>();

    public CountryJumplist(object country)
    {
        this.loadedCountry = country as ObservableCollection<Country>;
    }

    private IList data;

    public IList Data
    {
        get
        {
            if (this.data == null)
            {
                var items = this.loadedCountry;
                this.data = items.ToAlphaGroups(x => x.CountryName);
            }
            return this.data;
        }
    }

    private CollectionViewSource collection;

    public CollectionViewSource Collection
    {
        get
        {
            if (this.collection == null)
            {
                this.collection = new CollectionViewSource();
                this.collection.Source = this.Data;
                this.collection.IsSourceGrouped = true;
            }

            return this.collection;
        }
    }
}

public class Country
{
    public string CountryName { get; set; }
}

XAML Page

 

Add the code, given below, in your XAML page.

<Page.Resources>
       <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter" />
       <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter" />

       <!--DATA TEMPLATES-->
       <DataTemplate x:Key="AlphaGroupHeaderTemplate">
           <TextBlock Text="{Binding Key}"
                      Foreground="{ThemeResource SystemControlBackgroundAccentBrush}"
                      FontSize="32"
                      FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                      FontWeight="Medium"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Bottom"
                      Margin="5.5,0,0,9.5" />
       </DataTemplate>

       <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">
           <Border Background ="Transparent"
                   BorderThickness="0"
                   Height="60"
                   Width="60"
                   HorizontalAlignment="Center"
                   Margin="0,0,1.5,1.5">
               <TextBlock Text="{Binding Group.Key}"
                      Foreground="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                      FontSize="22"
                      FontWeight="SemiBold"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Margin="1.5,0,0,1.5" />
           </Border>
       </DataTemplate>

       <!--Remove header seperator line in listView groupStyle -->
       <Style TargetType="ListViewHeaderItem">
           <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
           <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
           <Setter Property="Background" Value="Transparent" />
           <Setter Property="Margin" Value="0,0,0,0"/>
           <Setter Property="Padding" Value="6,8,12,0"/>
           <Setter Property="HorizontalContentAlignment" Value="Left" />
           <Setter Property="VerticalContentAlignment" Value="Bottom" />
           <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
           <Setter Property="UseSystemFocusVisuals" Value="True" />
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="ListViewHeaderItem">
                       <StackPanel Background="{TemplateBinding Background}"
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}">
                           <ContentPresenter x:Name="ContentPresenter"
                                     Margin="{TemplateBinding Padding}"
                                     Content="{TemplateBinding Content}"
                                     ContentTemplate="{TemplateBinding ContentTemplate}"
                                     ContentTransitions="{TemplateBinding ContentTransitions}"
                                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                       </StackPanel>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
   </Page.Resources>

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <SemanticZoom HorizontalContentAlignment="Stretch"
                     HorizontalAlignment="Stretch">
           <SemanticZoom.ZoomedInView>
               <ListView x:Name="lstAlphaGroupHeader"
                         ItemsSource="{Binding CountryCollectionView}"
                         SelectionMode="Single"
                         HorizontalContentAlignment="Stretch">
                   <ListView.GroupStyle>
                       <GroupStyle HeaderTemplate="{StaticResource AlphaGroupHeaderTemplate}"
                                   HidesIfEmpty="True" />
                   </ListView.GroupStyle>
                   <ListView.ItemTemplate>
                       <DataTemplate>
                           <TextBlock Text="{Binding CountryName}"/>
                       </DataTemplate>
                   </ListView.ItemTemplate>
               </ListView>
           </SemanticZoom.ZoomedInView>
           <SemanticZoom.ZoomedOutView>
               <GridView x:Name="grdAlphaJumpListPicker"
                         ItemsSource="{Binding CountryCollectionViewCollectionGroups}"
                         HorizontalAlignment="Center"
                         HorizontalContentAlignment="Stretch"
                         VerticalAlignment="Center"
                         ItemTemplate="{StaticResource AlphaJumpListPickerItemTemplate}">
               </GridView>
           </SemanticZoom.ZoomedOutView>
       </SemanticZoom>
   </Grid>

Listview and Gridview have been used inside Semantic zoom control for zoom in and zoom out views. In page resources, I added a couple of DataTemplates ("AlphaGroupHeaderTemplate" and "AlphaJumpListPickerItemTemplate") to design and bind for zoom in and zoom out views.

 

Cs Page

 

Add the code, given below, in cs page. 

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    LoadJumpList();
}

public void LoadJumpList()
{
    ObservableCollection<Country> CountryList = new ObservableCollection<Country>();
    CountryList.Add(new Country() { CountryName = "Afghanistan" });
    CountryList.Add(new Country() { CountryName = "Australia" });
    CountryList.Add(new Country() { CountryName = "Austria" });
    CountryList.Add(new Country() { CountryName = "Bahrain" });
    CountryList.Add(new Country() { CountryName = "Bangladesh" });
    CountryList.Add(new Country() { CountryName = "Belgium" });
    CountryList.Add(new Country() { CountryName = "Brazil" });
    CountryList.Add(new Country() { CountryName = "Canada" });
    CountryList.Add(new Country() { CountryName = "Costa Rica" });
    CountryList.Add(new Country() { CountryName = "Denmark" });
    CountryList.Add(new Country() { CountryName = "Egypt" });
    CountryList.Add(new Country() { CountryName = "Ethiopia" });
    CountryList.Add(new Country() { CountryName = "Finland" });
    CountryList.Add(new Country() { CountryName = "France" });
    CountryList.Add(new Country() { CountryName = "Germany" });
    CountryList.Add(new Country() { CountryName = "Greece" });
    CountryList.Add(new Country() { CountryName = "Hungary" });
    CountryList.Add(new Country() { CountryName = "Iceland" });
    CountryList.Add(new Country() { CountryName = "India" });
    CountryList.Add(new Country() { CountryName = "Ireland" });
    CountryList.Add(new Country() { CountryName = "Italy" });
    CountryList.Add(new Country() { CountryName = "Japan" });
    CountryList.Add(new Country() { CountryName = "Kenya" });
    CountryList.Add(new Country() { CountryName = "Luxembourg" });
    CountryList.Add(new Country() { CountryName = "Malaysia" });
    CountryList.Add(new Country() { CountryName = "Netherlands" });
    CountryList.Add(new Country() { CountryName = "New Zealand" });
    CountryList.Add(new Country() { CountryName = "Oman" });
    CountryList.Add(new Country() { CountryName = "Pakistan" });
    CountryList.Add(new Country() { CountryName = "Qatar" });
    CountryList.Add(new Country() { CountryName = "Russia" });
    CountryList.Add(new Country() { CountryName = "Singapore" });
    CountryList.Add(new Country() { CountryName = "South Africa" });
    CountryList.Add(new Country() { CountryName = "Thailand" });
    CountryList.Add(new Country() { CountryName = "United Kingdom (UK)" });
    CountryList.Add(new Country() { CountryName = "United States of America (USA)" });
    CountryList.Add(new Country() { CountryName = "Vietnam" });
    CountryList.Add(new Country() { CountryName = "Yemen" });
    CountryList.Add(new Country() { CountryName = "Zimbabwe" });

    CountryJumplist countryJumpList = new CountryJumplist(CountryList);
    lstAlphaGroupHeader.ItemsSource = countryJumpList.Collection.View;
    grdAlphaJumpListPicker.ItemsSource = countryJumpList.Collection.View.CollectionGroups;
}

I have added the items to object "CountryList" of type ObservableCollection<Country>, then I am passing the object as a constructor paramater of CountryJumpList.

 

Your MainPage.cs page looks like:

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Globalization.Collation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace SemanticZoomSample
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            LoadJumpList();
        }

        public void LoadJumpList()
        {
            ObservableCollection<Country> CountryList = new ObservableCollection<Country>();
            CountryList.Add(new Country() { CountryName = "Afghanistan" });
            CountryList.Add(new Country() { CountryName = "Australia" });
            CountryList.Add(new Country() { CountryName = "Austria" });
            CountryList.Add(new Country() { CountryName = "Bahrain" });
            CountryList.Add(new Country() { CountryName = "Bangladesh" });
            CountryList.Add(new Country() { CountryName = "Belgium" });
            CountryList.Add(new Country() { CountryName = "Brazil" });
            CountryList.Add(new Country() { CountryName = "Canada" });
            CountryList.Add(new Country() { CountryName = "Costa Rica" });
            CountryList.Add(new Country() { CountryName = "Denmark" });
            CountryList.Add(new Country() { CountryName = "Egypt" });
            CountryList.Add(new Country() { CountryName = "Ethiopia" });
            CountryList.Add(new Country() { CountryName = "Finland" });
            CountryList.Add(new Country() { CountryName = "France" });
            CountryList.Add(new Country() { CountryName = "Germany" });
            CountryList.Add(new Country() { CountryName = "Greece" });
            CountryList.Add(new Country() { CountryName = "Hungary" });
            CountryList.Add(new Country() { CountryName = "Iceland" });
            CountryList.Add(new Country() { CountryName = "India" });
            CountryList.Add(new Country() { CountryName = "Ireland" });
            CountryList.Add(new Country() { CountryName = "Italy" });
            CountryList.Add(new Country() { CountryName = "Japan" });
            CountryList.Add(new Country() { CountryName = "Kenya" });
            CountryList.Add(new Country() { CountryName = "Luxembourg" });
            CountryList.Add(new Country() { CountryName = "Malaysia" });
            CountryList.Add(new Country() { CountryName = "Netherlands" });
            CountryList.Add(new Country() { CountryName = "New Zealand" });
            CountryList.Add(new Country() { CountryName = "Oman" });
            CountryList.Add(new Country() { CountryName = "Pakistan" });
            CountryList.Add(new Country() { CountryName = "Qatar" });
            CountryList.Add(new Country() { CountryName = "Russia" });
            CountryList.Add(new Country() { CountryName = "Singapore" });
            CountryList.Add(new Country() { CountryName = "South Africa" });
            CountryList.Add(new Country() { CountryName = "Thailand" });
            CountryList.Add(new Country() { CountryName = "United Kingdom (UK)" });
            CountryList.Add(new Country() { CountryName = "United States of America (USA)" });
            CountryList.Add(new Country() { CountryName = "Vietnam" });
            CountryList.Add(new Country() { CountryName = "Yemen" });
            CountryList.Add(new Country() { CountryName = "Zimbabwe" });

            CountryJumplist countryJumpList = new CountryJumplist(CountryList);
            lstAlphaGroupHeader.ItemsSource = countryJumpList.Collection.View;
            grdAlphaJumpListPicker.ItemsSource = countryJumpList.Collection.View.CollectionGroups;
        }
    }

    public class CountryJumplist
    {
        private ObservableCollection<Country> loadedCountry = new ObservableCollection<Country>();

        public CountryJumplist(object country)
        {
            this.loadedCountry = country as ObservableCollection<Country>;
        }

        private IList data;

        public IList Data
        {
            get
            {
                if (this.data == null)
                {
                    var items = this.loadedCountry;
                    this.data = items.ToAlphaGroups(x => x.CountryName);
                }
                return this.data;
            }
        }

        private CollectionViewSource collection;

        public CollectionViewSource Collection
        {
            get
            {
                if (this.collection == null)
                {
                    this.collection = new CollectionViewSource();
                    this.collection.Source = this.Data;
                    this.collection.IsSourceGrouped = true;
                }

                return this.collection;
            }
        }
    }

    public class Country
    {
        public string CountryName { get; set; }
    }

    #region JumpList

    public class JumpListGroup<T> : List<object>
    {
        public object Key { get; set; }

        public new IEnumerator<object> GetEnumerator()
        {
            return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
        }
    }

    public static class JumpListHelper
    {
        public static List<JumpListGroup<TSource>> ToAlphaGroups<TSource>(
            this IEnumerable<TSource> source, Func<TSource, string> selector)
        {
            var characterGroupings = new CharacterGroupings();

            var keys = characterGroupings.Where(x => x.Label.Any())
                .Select(x => x.Label)
                .ToDictionary(x => x);
            keys["..."] = "\uD83C\uDF10";

            var groupDictionary = keys.Select(x => new JumpListGroup<TSource>() { Key = x.Value })
                .ToDictionary(x => (string)x.Key);

            var query = from item in source
                        orderby selector(item)
                        select item;

            foreach (var item in query)
            {
                var sortValue = selector(item);
                groupDictionary[keys[characterGroupings.Lookup(sortValue)]].Add(item);
            }

            return groupDictionary.Select(x => x.Value).ToList();
        }
    }
    #endregion JumpList

}

Your MainPage.xaml page looks like:

<Page
    x:Class="SemanticZoomSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SemanticZoomSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter" />
        <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter" />

        <!--DATA TEMPLATES-->
        <DataTemplate x:Key="AlphaGroupHeaderTemplate">
            <TextBlock Text="{Binding Key}"
                       Foreground="{ThemeResource SystemControlBackgroundAccentBrush}"
                       FontSize="32"
                       FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                       FontWeight="Medium"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Margin="5.5,0,0,9.5" />
        </DataTemplate>

        <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">
            <Border Background ="Transparent"
                    BorderThickness="0"
                    Height="60"
                    Width="60"
                    HorizontalAlignment="Center"
                    Margin="0,0,1.5,1.5">
                <TextBlock Text="{Binding Group.Key}"
                       Foreground="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                       FontSize="22"
                       FontWeight="SemiBold"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Margin="1.5,0,0,1.5" />
            </Border>
        </DataTemplate>

        <!--Remove header seperator line in listView groupStyle -->
        <Style TargetType="ListViewHeaderItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="Padding" Value="6,8,12,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Bottom" />
            <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewHeaderItem">
                        <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="ContentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SemanticZoom HorizontalContentAlignment="Stretch"
                      HorizontalAlignment="Stretch">
            <SemanticZoom.ZoomedInView>
                <ListView x:Name="lstAlphaGroupHeader"
                          ItemsSource="{Binding CountryCollectionView}"
                          SelectionMode="Single"
                          HorizontalContentAlignment="Stretch">
                    <ListView.GroupStyle>
                        <GroupStyle HeaderTemplate="{StaticResource AlphaGroupHeaderTemplate}"
                                    HidesIfEmpty="True" />
                    </ListView.GroupStyle>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding CountryName}"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="grdAlphaJumpListPicker"
                          ItemsSource="{Binding CountryCollectionViewCollectionGroups}"
                          HorizontalAlignment="Center"
                          HorizontalContentAlignment="Stretch"
                          VerticalAlignment="Center"
                          ItemTemplate="{StaticResource AlphaJumpListPickerItemTemplate}">
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
    </Grid>
</Page>

Click run button to see zoom in the view.

 

 

Click group header to see zoom out view.

 

 

 If you have any queries, feel free to ask.