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; }
  5. public new IEnumerator<object> GetEnumerator()
  6. {
  7. return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
  8. }
  9. }
  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();
  18. var keys = characterGroupings.Where(x => x.Label.Any())
  19. .Select(x => x.Label)
  20. .ToDictionary(x => x);
  21. keys["..."] = "\uD83C\uDF10";
  23. var groupDictionary = keys.Select(x => new JumpListGroup<TSource>() { Key = x.Value })
  24. .ToDictionary(x => (string)x.Key);
  26. var query = from item in source
  27. orderby selector(item)
  28. select item;
  30. foreach (var item in query)
  31. {
  32. var sortValue = selector(item);
  33. groupDictionary[keys[characterGroupings.Lookup(sortValue)]].Add(item);
  34. }
  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>();
  5. public CountryJumplist(object country)
  6. {
  7. this.loadedCountry = country as ObservableCollection<Country>;
  8. }
  10. private IList data;
  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. }
  25. private CollectionViewSource collection;
  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. }
  38. return this.collection;
  39. }
  40. }
  41. }
  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" />
  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>
  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>
  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>
  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. }
  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" });
  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;
  19. namespace SemanticZoomSample
  20. {
  21. public sealed partial class MainPage : Page
  22. {
  23. public MainPage()
  24. {
  25. this.InitializeComponent();
  26. }
  28. protected override void OnNavigatedTo(NavigationEventArgs e)
  29. {
  30. base.OnNavigatedTo(e);
  31. LoadJumpList();
  32. }
  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" });
  77. CountryJumplist countryJumpList = new CountryJumplist(CountryList);
  78. lstAlphaGroupHeader.ItemsSource = countryJumpList.Collection.View;
  79. grdAlphaJumpListPicker.ItemsSource = countryJumpList.Collection.View.CollectionGroups;
  80. }
  81. }
  83. public class CountryJumplist
  84. {
  85. private ObservableCollection<Country> loadedCountry = new ObservableCollection<Country>();
  87. public CountryJumplist(object country)
  88. {
  89. this.loadedCountry = country as ObservableCollection<Country>;
  90. }
  92. private IList data;
  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. }
  107. private CollectionViewSource collection;
  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. }
  120. return this.collection;
  121. }
  122. }
  123. }
  125. public class Country
  126. {
  127. public string CountryName { get; set; }
  128. }
  130. #region JumpList
  132. public class JumpListGroup<T> : List<object>
  133. {
  134. public object Key { get; set; }
  136. public new IEnumerator<object> GetEnumerator()
  137. {
  138. return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
  139. }
  140. }
  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();
  149. var keys = characterGroupings.Where(x => x.Label.Any())
  150. .Select(x => x.Label)
  151. .ToDictionary(x => x);
  152. keys["..."] = "\uD83C\uDF10";
  154. var groupDictionary = keys.Select(x => new JumpListGroup<TSource>() { Key = x.Value })
  155. .ToDictionary(x => (string)x.Key);
  157. var query = from item in source
  158. orderby selector(item)
  159. select item;
  161. foreach (var item in query)
  162. {
  163. var sortValue = selector(item);
  164. groupDictionary[keys[characterGroupings.Lookup(sortValue)]].Add(item);
  165. }
  167. return groupDictionary.Select(x => x.Value).ToList();
  168. }
  169. }
  170. #endregion JumpList
  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">
  10. <Page.Resources>
  11. <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter" />
  12. <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter" />
  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>
  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>
  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>
  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.