Contribute
.NET

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.
  1. public class JumpListGroup<T> : List<object>  
  2. {  
  3.       public object Key { get; set; }  
  4.   
  5.       public new IEnumerator<object> GetEnumerator()  
  6.       {  
  7.           return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();  
  8.       }  
  9. }  
  10.   
  11.   public static class JumpListHelper  
  12.   {  
  13.       public static List<JumpListGroup<TSource>> ToAlphaGroups<TSource>(  
  14.           this IEnumerable<TSource> source, Func<TSource, string> selector)  
  15.       {  
  16.           var characterGroupings = new CharacterGroupings();  
  17.   
  18.           var keys = characterGroupings.Where(x => x.Label.Any())  
  19.               .Select(x => x.Label)  
  20.               .ToDictionary(x => x);  
  21.           keys["..."] = "\uD83C\uDF10";  
  22.   
  23.           var groupDictionary = keys.Select(x => new JumpListGroup<TSource>() { Key = x.Value })  
  24.               .ToDictionary(x => (string)x.Key);  
  25.   
  26.           var query = from item in source  
  27.                       orderby selector(item)  
  28.                       select item;  
  29.   
  30.           foreach (var item in query)  
  31.           {  
  32.               var sortValue = selector(item);  
  33.               groupDictionary[keys[characterGroupings.Lookup(sortValue)]].Add(item);  
  34.           }  
  35.   
  36.           return groupDictionary.Select(x => x.Value).ToList();  
  37.       }  
  38.   }  
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: 
  1. public class CountryJumplist  
  2. {  
  3.     private ObservableCollection<Country> loadedCountry = new ObservableCollection<Country>();  
  4.   
  5.     public CountryJumplist(object country)  
  6.     {  
  7.         this.loadedCountry = country as ObservableCollection<Country>;  
  8.     }  
  9.   
  10.     private IList data;  
  11.   
  12.     public IList Data  
  13.     {  
  14.         get  
  15.         {  
  16.             if (this.data == null)  
  17.             {  
  18.                 var items = this.loadedCountry;  
  19.                 this.data = items.ToAlphaGroups(x => x.CountryName);  
  20.             }  
  21.             return this.data;  
  22.         }  
  23.     }  
  24.   
  25.     private CollectionViewSource collection;  
  26.   
  27.     public CollectionViewSource Collection  
  28.     {  
  29.         get  
  30.         {  
  31.             if (this.collection == null)  
  32.             {  
  33.                 this.collection = new CollectionViewSource();  
  34.                 this.collection.Source = this.Data;  
  35.                 this.collection.IsSourceGrouped = true;  
  36.             }  
  37.   
  38.             return this.collection;  
  39.         }  
  40.     }  
  41. }  
  42.   
  43. public class Country  
  44. {  
  45.     public string CountryName { get; set; }  
  46. }  
XAML Page
 
Add the code, given below, in your XAML page.
  1. <Page.Resources>  
  2.        <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter" />  
  3.        <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter" />  
  4.   
  5.        <!--DATA TEMPLATES-->  
  6.        <DataTemplate x:Key="AlphaGroupHeaderTemplate">  
  7.            <TextBlock Text="{Binding Key}"  
  8.                       Foreground="{ThemeResource SystemControlBackgroundAccentBrush}"  
  9.                       FontSize="32"  
  10.                       FontFamily="{StaticResource PhoneFontFamilySemiLight}"  
  11.                       FontWeight="Medium"                       
  12.                       HorizontalAlignment="Left"  
  13.                       VerticalAlignment="Bottom"  
  14.                       Margin="5.5,0,0,9.5" />  
  15.        </DataTemplate>  
  16.   
  17.        <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">  
  18.            <Border Background ="Transparent"  
  19.                    BorderThickness="0"  
  20.                    Height="60"  
  21.                    Width="60"  
  22.                    HorizontalAlignment="Center"  
  23.                    Margin="0,0,1.5,1.5">  
  24.                <TextBlock Text="{Binding Group.Key}"  
  25.                       Foreground="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"  
  26.                       FontSize="22"  
  27.                       FontWeight="SemiBold"                         
  28.                       HorizontalAlignment="Center"  
  29.                       VerticalAlignment="Center"  
  30.                       Margin="1.5,0,0,1.5" />  
  31.            </Border>  
  32.        </DataTemplate>  
  33.   
  34.        <!--Remove header seperator line in listView groupStyle -->  
  35.        <Style TargetType="ListViewHeaderItem">  
  36.            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />  
  37.            <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />  
  38.            <Setter Property="Background" Value="Transparent" />  
  39.            <Setter Property="Margin" Value="0,0,0,0"/>  
  40.            <Setter Property="Padding" Value="6,8,12,0"/>  
  41.            <Setter Property="HorizontalContentAlignment" Value="Left" />  
  42.            <Setter Property="VerticalContentAlignment" Value="Bottom" />  
  43.            <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>  
  44.            <Setter Property="UseSystemFocusVisuals" Value="True" />  
  45.            <Setter Property="Template">  
  46.                <Setter.Value>  
  47.                    <ControlTemplate TargetType="ListViewHeaderItem">  
  48.                        <StackPanel Background="{TemplateBinding Background}"  
  49.                            BorderBrush="{TemplateBinding BorderBrush}"  
  50.                            BorderThickness="{TemplateBinding BorderThickness}">  
  51.                            <ContentPresenter x:Name="ContentPresenter"  
  52.                                      Margin="{TemplateBinding Padding}"  
  53.                                      Content="{TemplateBinding Content}"  
  54.                                      ContentTemplate="{TemplateBinding ContentTemplate}"  
  55.                                      ContentTransitions="{TemplateBinding ContentTransitions}"  
  56.                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
  57.                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>  
  58.                        </StackPanel>  
  59.                    </ControlTemplate>  
  60.                </Setter.Value>  
  61.            </Setter>  
  62.        </Style>  
  63.    </Page.Resources>  
  64.   
  65.    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  66.        <SemanticZoom HorizontalContentAlignment="Stretch"   
  67.                      HorizontalAlignment="Stretch">  
  68.            <SemanticZoom.ZoomedInView>  
  69.                <ListView x:Name="lstAlphaGroupHeader"   
  70.                          ItemsSource="{Binding CountryCollectionView}"   
  71.                          SelectionMode="Single"                            
  72.                          HorizontalContentAlignment="Stretch">  
  73.                    <ListView.GroupStyle>  
  74.                        <GroupStyle HeaderTemplate="{StaticResource AlphaGroupHeaderTemplate}"                                      
  75.                                    HidesIfEmpty="True" />  
  76.                    </ListView.GroupStyle>  
  77.                    <ListView.ItemTemplate>  
  78.                        <DataTemplate>  
  79.                            <TextBlock Text="{Binding CountryName}"/>  
  80.                        </DataTemplate>  
  81.                    </ListView.ItemTemplate>  
  82.                </ListView>  
  83.            </SemanticZoom.ZoomedInView>  
  84.            <SemanticZoom.ZoomedOutView>  
  85.                <GridView x:Name="grdAlphaJumpListPicker"   
  86.                          ItemsSource="{Binding CountryCollectionViewCollectionGroups}"                             
  87.                          HorizontalAlignment="Center"  
  88.                          HorizontalContentAlignment="Stretch"  
  89.                          VerticalAlignment="Center"  
  90.                          ItemTemplate="{StaticResource AlphaJumpListPickerItemTemplate}">  
  91.                </GridView>  
  92.            </SemanticZoom.ZoomedOutView>  
  93.        </SemanticZoom>  
  94.    </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. 
  1. protected override void OnNavigatedTo(NavigationEventArgs e)  
  2. {  
  3.     base.OnNavigatedTo(e);  
  4.     LoadJumpList();  
  5. }  
  6.   
  7. public void LoadJumpList()  
  8. {  
  9.     ObservableCollection<Country> CountryList = new ObservableCollection<Country>();  
  10.     CountryList.Add(new Country() { CountryName = "Afghanistan" });  
  11.     CountryList.Add(new Country() { CountryName = "Australia" });  
  12.     CountryList.Add(new Country() { CountryName = "Austria" });  
  13.     CountryList.Add(new Country() { CountryName = "Bahrain" });  
  14.     CountryList.Add(new Country() { CountryName = "Bangladesh" });  
  15.     CountryList.Add(new Country() { CountryName = "Belgium" });  
  16.     CountryList.Add(new Country() { CountryName = "Brazil" });  
  17.     CountryList.Add(new Country() { CountryName = "Canada" });  
  18.     CountryList.Add(new Country() { CountryName = "Costa Rica" });  
  19.     CountryList.Add(new Country() { CountryName = "Denmark" });  
  20.     CountryList.Add(new Country() { CountryName = "Egypt" });  
  21.     CountryList.Add(new Country() { CountryName = "Ethiopia" });  
  22.     CountryList.Add(new Country() { CountryName = "Finland" });  
  23.     CountryList.Add(new Country() { CountryName = "France" });  
  24.     CountryList.Add(new Country() { CountryName = "Germany" });  
  25.     CountryList.Add(new Country() { CountryName = "Greece" });  
  26.     CountryList.Add(new Country() { CountryName = "Hungary" });  
  27.     CountryList.Add(new Country() { CountryName = "Iceland" });  
  28.     CountryList.Add(new Country() { CountryName = "India" });  
  29.     CountryList.Add(new Country() { CountryName = "Ireland" });  
  30.     CountryList.Add(new Country() { CountryName = "Italy" });  
  31.     CountryList.Add(new Country() { CountryName = "Japan" });  
  32.     CountryList.Add(new Country() { CountryName = "Kenya" });  
  33.     CountryList.Add(new Country() { CountryName = "Luxembourg" });  
  34.     CountryList.Add(new Country() { CountryName = "Malaysia" });  
  35.     CountryList.Add(new Country() { CountryName = "Netherlands" });  
  36.     CountryList.Add(new Country() { CountryName = "New Zealand" });  
  37.     CountryList.Add(new Country() { CountryName = "Oman" });  
  38.     CountryList.Add(new Country() { CountryName = "Pakistan" });  
  39.     CountryList.Add(new Country() { CountryName = "Qatar" });  
  40.     CountryList.Add(new Country() { CountryName = "Russia" });  
  41.     CountryList.Add(new Country() { CountryName = "Singapore" });  
  42.     CountryList.Add(new Country() { CountryName = "South Africa" });  
  43.     CountryList.Add(new Country() { CountryName = "Thailand" });  
  44.     CountryList.Add(new Country() { CountryName = "United Kingdom (UK)" });  
  45.     CountryList.Add(new Country() { CountryName = "United States of America (USA)" });  
  46.     CountryList.Add(new Country() { CountryName = "Vietnam" });  
  47.     CountryList.Add(new Country() { CountryName = "Yemen" });  
  48.     CountryList.Add(new Country() { CountryName = "Zimbabwe" });  
  49.   
  50.     CountryJumplist countryJumpList = new CountryJumplist(CountryList);  
  51.     lstAlphaGroupHeader.ItemsSource = countryJumpList.Collection.View;  
  52.     grdAlphaJumpListPicker.ItemsSource = countryJumpList.Collection.View.CollectionGroups;  
  53. }  
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:
  1. using System;  
  2. using System.Collections;  
  3. using System.Collections.Generic;  
  4. using System.Collections.ObjectModel;  
  5. using System.IO;  
  6. using System.Linq;  
  7. using System.Runtime.InteropServices.WindowsRuntime;  
  8. using Windows.Foundation;  
  9. using Windows.Foundation.Collections;  
  10. using Windows.Globalization.Collation;  
  11. using Windows.UI.Xaml;  
  12. using Windows.UI.Xaml.Controls;  
  13. using Windows.UI.Xaml.Controls.Primitives;  
  14. using Windows.UI.Xaml.Data;  
  15. using Windows.UI.Xaml.Input;  
  16. using Windows.UI.Xaml.Media;  
  17. using Windows.UI.Xaml.Navigation;
  18.   
  19. namespace SemanticZoomSample  
  20. { 
  21.     public sealed partial class MainPage : Page  
  22.     {  
  23.         public MainPage()  
  24.         {  
  25.             this.InitializeComponent();  
  26.         }  
  27.   
  28.         protected override void OnNavigatedTo(NavigationEventArgs e)  
  29.         {  
  30.             base.OnNavigatedTo(e);  
  31.             LoadJumpList();  
  32.         }  
  33.   
  34.         public void LoadJumpList()  
  35.         {  
  36.             ObservableCollection<Country> CountryList = new ObservableCollection<Country>();  
  37.             CountryList.Add(new Country() { CountryName = "Afghanistan" });  
  38.             CountryList.Add(new Country() { CountryName = "Australia" });  
  39.             CountryList.Add(new Country() { CountryName = "Austria" });  
  40.             CountryList.Add(new Country() { CountryName = "Bahrain" });  
  41.             CountryList.Add(new Country() { CountryName = "Bangladesh" });  
  42.             CountryList.Add(new Country() { CountryName = "Belgium" });  
  43.             CountryList.Add(new Country() { CountryName = "Brazil" });  
  44.             CountryList.Add(new Country() { CountryName = "Canada" });  
  45.             CountryList.Add(new Country() { CountryName = "Costa Rica" });  
  46.             CountryList.Add(new Country() { CountryName = "Denmark" });  
  47.             CountryList.Add(new Country() { CountryName = "Egypt" });  
  48.             CountryList.Add(new Country() { CountryName = "Ethiopia" });  
  49.             CountryList.Add(new Country() { CountryName = "Finland" });  
  50.             CountryList.Add(new Country() { CountryName = "France" });  
  51.             CountryList.Add(new Country() { CountryName = "Germany" });  
  52.             CountryList.Add(new Country() { CountryName = "Greece" });  
  53.             CountryList.Add(new Country() { CountryName = "Hungary" });  
  54.             CountryList.Add(new Country() { CountryName = "Iceland" });  
  55.             CountryList.Add(new Country() { CountryName = "India" });  
  56.             CountryList.Add(new Country() { CountryName = "Ireland" });  
  57.             CountryList.Add(new Country() { CountryName = "Italy" });  
  58.             CountryList.Add(new Country() { CountryName = "Japan" });  
  59.             CountryList.Add(new Country() { CountryName = "Kenya" });  
  60.             CountryList.Add(new Country() { CountryName = "Luxembourg" });  
  61.             CountryList.Add(new Country() { CountryName = "Malaysia" });  
  62.             CountryList.Add(new Country() { CountryName = "Netherlands" });  
  63.             CountryList.Add(new Country() { CountryName = "New Zealand" });  
  64.             CountryList.Add(new Country() { CountryName = "Oman" });  
  65.             CountryList.Add(new Country() { CountryName = "Pakistan" });  
  66.             CountryList.Add(new Country() { CountryName = "Qatar" });  
  67.             CountryList.Add(new Country() { CountryName = "Russia" });  
  68.             CountryList.Add(new Country() { CountryName = "Singapore" });  
  69.             CountryList.Add(new Country() { CountryName = "South Africa" });  
  70.             CountryList.Add(new Country() { CountryName = "Thailand" });  
  71.             CountryList.Add(new Country() { CountryName = "United Kingdom (UK)" });  
  72.             CountryList.Add(new Country() { CountryName = "United States of America (USA)" });  
  73.             CountryList.Add(new Country() { CountryName = "Vietnam" });  
  74.             CountryList.Add(new Country() { CountryName = "Yemen" });  
  75.             CountryList.Add(new Country() { CountryName = "Zimbabwe" });  
  76.   
  77.             CountryJumplist countryJumpList = new CountryJumplist(CountryList);  
  78.             lstAlphaGroupHeader.ItemsSource = countryJumpList.Collection.View;  
  79.             grdAlphaJumpListPicker.ItemsSource = countryJumpList.Collection.View.CollectionGroups;  
  80.         }  
  81.     }  
  82.    
  83.     public class CountryJumplist  
  84.     {  
  85.         private ObservableCollection<Country> loadedCountry = new ObservableCollection<Country>();  
  86.   
  87.         public CountryJumplist(object country)  
  88.         {  
  89.             this.loadedCountry = country as ObservableCollection<Country>;  
  90.         }  
  91.   
  92.         private IList data;  
  93.   
  94.         public IList Data  
  95.         {  
  96.             get  
  97.             {  
  98.                 if (this.data == null)  
  99.                 {  
  100.                     var items = this.loadedCountry;  
  101.                     this.data = items.ToAlphaGroups(x => x.CountryName);  
  102.                 }  
  103.                 return this.data;  
  104.             }  
  105.         }  
  106.   
  107.         private CollectionViewSource collection;  
  108.   
  109.         public CollectionViewSource Collection  
  110.         {  
  111.             get  
  112.             {  
  113.                 if (this.collection == null)  
  114.                 {  
  115.                     this.collection = new CollectionViewSource();  
  116.                     this.collection.Source = this.Data;  
  117.                     this.collection.IsSourceGrouped = true;  
  118.                 }  
  119.   
  120.                 return this.collection;  
  121.             }  
  122.         }  
  123.     }  
  124.   
  125.     public class Country  
  126.     {  
  127.         public string CountryName { get; set; }  
  128.     }  
  129.  
  130.     #region JumpList  
  131.   
  132.     public class JumpListGroup<T> : List<object>  
  133.     {  
  134.         public object Key { get; set; }  
  135.   
  136.         public new IEnumerator<object> GetEnumerator()  
  137.         {  
  138.             return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();  
  139.         }  
  140.     }  
  141.   
  142.     public static class JumpListHelper  
  143.     {  
  144.         public static List<JumpListGroup<TSource>> ToAlphaGroups<TSource>(  
  145.             this IEnumerable<TSource> source, Func<TSource, string> selector)  
  146.         {  
  147.             var characterGroupings = new CharacterGroupings();  
  148.   
  149.             var keys = characterGroupings.Where(x => x.Label.Any())  
  150.                 .Select(x => x.Label)  
  151.                 .ToDictionary(x => x);  
  152.             keys["..."] = "\uD83C\uDF10";  
  153.   
  154.             var groupDictionary = keys.Select(x => new JumpListGroup<TSource>() { Key = x.Value })  
  155.                 .ToDictionary(x => (string)x.Key);  
  156.   
  157.             var query = from item in source  
  158.                         orderby selector(item)  
  159.                         select item;  
  160.   
  161.             foreach (var item in query)  
  162.             {  
  163.                 var sortValue = selector(item);  
  164.                 groupDictionary[keys[characterGroupings.Lookup(sortValue)]].Add(item);  
  165.             }  
  166.   
  167.             return groupDictionary.Select(x => x.Value).ToList();  
  168.         }  
  169.     }  
  170.     #endregion JumpList  
  171.   
  172. }  
Your MainPage.xaml page looks like:
  1. <Page  
  2.     x:Class="SemanticZoomSample.MainPage"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:SemanticZoomSample"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d">  
  9.   
  10.     <Page.Resources>  
  11.         <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter" />  
  12.         <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter" />  
  13.   
  14.         <!--DATA TEMPLATES-->  
  15.         <DataTemplate x:Key="AlphaGroupHeaderTemplate">  
  16.             <TextBlock Text="{Binding Key}"  
  17.                        Foreground="{ThemeResource SystemControlBackgroundAccentBrush}"  
  18.                        FontSize="32"  
  19.                        FontFamily="{StaticResource PhoneFontFamilySemiLight}"  
  20.                        FontWeight="Medium"                       
  21.                        HorizontalAlignment="Left"  
  22.                        VerticalAlignment="Bottom"  
  23.                        Margin="5.5,0,0,9.5" />  
  24.         </DataTemplate>  
  25.   
  26.         <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">  
  27.             <Border Background ="Transparent"  
  28.                     BorderThickness="0"  
  29.                     Height="60"  
  30.                     Width="60"  
  31.                     HorizontalAlignment="Center"  
  32.                     Margin="0,0,1.5,1.5">  
  33.                 <TextBlock Text="{Binding Group.Key}"  
  34.                        Foreground="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"  
  35.                        FontSize="22"  
  36.                        FontWeight="SemiBold"                         
  37.                        HorizontalAlignment="Center"  
  38.                        VerticalAlignment="Center"  
  39.                        Margin="1.5,0,0,1.5" />  
  40.             </Border>  
  41.         </DataTemplate>  
  42.   
  43.         <!--Remove header seperator line in listView groupStyle -->  
  44.         <Style TargetType="ListViewHeaderItem">  
  45.             <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />  
  46.             <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />  
  47.             <Setter Property="Background" Value="Transparent" />  
  48.             <Setter Property="Margin" Value="0,0,0,0"/>  
  49.             <Setter Property="Padding" Value="6,8,12,0"/>  
  50.             <Setter Property="HorizontalContentAlignment" Value="Left" />  
  51.             <Setter Property="VerticalContentAlignment" Value="Bottom" />  
  52.             <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>  
  53.             <Setter Property="UseSystemFocusVisuals" Value="True" />  
  54.             <Setter Property="Template">  
  55.                 <Setter.Value>  
  56.                     <ControlTemplate TargetType="ListViewHeaderItem">  
  57.                         <StackPanel Background="{TemplateBinding Background}"  
  58.                             BorderBrush="{TemplateBinding BorderBrush}"  
  59.                             BorderThickness="{TemplateBinding BorderThickness}">  
  60.                             <ContentPresenter x:Name="ContentPresenter"  
  61.                                       Margin="{TemplateBinding Padding}"  
  62.                                       Content="{TemplateBinding Content}"  
  63.                                       ContentTemplate="{TemplateBinding ContentTemplate}"  
  64.                                       ContentTransitions="{TemplateBinding ContentTransitions}"  
  65.                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
  66.                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>  
  67.                         </StackPanel>  
  68.                     </ControlTemplate>  
  69.                 </Setter.Value>  
  70.             </Setter>  
  71.         </Style>  
  72.     </Page.Resources>  
  73.   
  74.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  75.         <SemanticZoom HorizontalContentAlignment="Stretch"   
  76.                       HorizontalAlignment="Stretch">  
  77.             <SemanticZoom.ZoomedInView>  
  78.                 <ListView x:Name="lstAlphaGroupHeader"   
  79.                           ItemsSource="{Binding CountryCollectionView}"   
  80.                           SelectionMode="Single"                            
  81.                           HorizontalContentAlignment="Stretch">  
  82.                     <ListView.GroupStyle>  
  83.                         <GroupStyle HeaderTemplate="{StaticResource AlphaGroupHeaderTemplate}"                                      
  84.                                     HidesIfEmpty="True" />  
  85.                     </ListView.GroupStyle>  
  86.                     <ListView.ItemTemplate>  
  87.                         <DataTemplate>  
  88.                             <TextBlock Text="{Binding CountryName}"/>  
  89.                         </DataTemplate>  
  90.                     </ListView.ItemTemplate>  
  91.                 </ListView>  
  92.             </SemanticZoom.ZoomedInView>  
  93.             <SemanticZoom.ZoomedOutView>  
  94.                 <GridView x:Name="grdAlphaJumpListPicker"   
  95.                           ItemsSource="{Binding CountryCollectionViewCollectionGroups}"                             
  96.                           HorizontalAlignment="Center"  
  97.                           HorizontalContentAlignment="Stretch"  
  98.                           VerticalAlignment="Center"  
  99.                           ItemTemplate="{StaticResource AlphaJumpListPickerItemTemplate}">  
  100.                 </GridView>  
  101.             </SemanticZoom.ZoomedOutView>  
  102.         </SemanticZoom>  
  103.     </Grid>  
  104. </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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs