How To Use Semantic Zoom In Windows 10 UWP App

In Windows 10 using a Semantic Zoom control is a way to visualize a data set using different levels of meaning and easily switch between them. It effectively allows the user to use zoomout and zoomin view of the data by alphabetic grouping or summarizing the data in some way.

If you have a long list view then user can be able to jump particular to a item instead of continuing to scroll. For the user it can provide an easy and intuitive way to traverse the data with the higher groupings providing a shortcut into the list.

Let’s see the steps.

Create new Windows 10 UWP app and go to your design view.

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

We need to enable the zooming.

List your items in inside the Zoomedinview and grouped item in zoomedoutview like the following code.

<Page.DataContext>
<local:MainViewModel></local:MainViewModel>
</Page.DataContext>
<Page.Resources>
<CollectionViewSource x:Name="Collection" IsSourceGrouped="true" ItemsPath="Items" Source="{Binding Groups}" />
</Page.Resources>

Add the view model and collection view source to get the list of data.

Set a GroupStyle using a GroupStyleSelector conditional logic.

<SemanticZoom x:Name="semanticZoom" ScrollViewer.ZoomMode="Enabled">
<SemanticZoom.ZoomedOutView>
<ListView Margin="5">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Background="#FF3680D8">
<TextBlock Text="{Binding Group.Name }" Foreground="White" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<ListView ItemsSource="{Binding Source={StaticResource Collection}}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Grid Height="70" Margin="0,0,10,0" Width="370">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.8*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="{Binding Title}" VerticalAlignment="Center" Foreground="Black" FontSize="20"></TextBlock>
</Grid>
</StackPanel>
<Line X1="0" Y1="2" X2="600" Y2="2" Stroke="Gray" StrokeThickness="1" Margin="0,0,0,5" Grid.ColumnSpan="3" VerticalAlignment="Bottom" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Name}' Foreground="Gray" FontSize="25" Margin="5" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>

Now go to your code behind page and write the following code.

internal class SampleDataGroup
{
public string Name
{
get;
set;
}
public List < SampleData > Items
{
get;
set;
}
}
internal class SampleData
{
public SampleData(string title)
{
Title = title;
}
public string Title
{
get;
private set;
}
}
internal class SampleDataGenerator
{
private static List < SampleData > _data;
public static List < SampleDataGroup > GetGroupedData()
{
if (_data == null)
GenerateData();
return _data.GroupBy(d => d.Title.Split(' ')[0],
(key, items) => new SampleDataGroup()
{
Name = key, Items = items.ToList()
}).ToList();
}

List your data and grouped the items. Here I create dummy list of items.

Bind the items and also group header.

private static void GenerateData()
{
_data = new List < SampleData > ();
_data.Add(new SampleData("A C#"));
_data.Add(new SampleData("A XAML"));
_data.Add(new SampleData("A Java"));
_data.Add(new SampleData("A Windows"));
_data.Add(new SampleData("A Android"));
_data.Add(new SampleData("A 06"));
_data.Add(new SampleData("A 07"));
_data.Add(new SampleData("B 01"));
_data.Add(new SampleData("B 02"));
_data.Add(new SampleData("B 03"));
_data.Add(new SampleData("B 04"));
_data.Add(new SampleData("Item3 01"));
_data.Add(new SampleData("Item3 02"));
_data.Add(new SampleData("Item3 03"));
_data.Add(new SampleData("Item3 04"));
_data.Add(new SampleData("Item3 05"));
_data.Add(new SampleData("Item3 06"));
_data.Add(new SampleData("Item3 01"));
_data.Add(new SampleData("Item3 02"));
_data.Add(new SampleData("Item3 03"));
_data.Add(new SampleData("Item3 04"));
_data.Add(new SampleData("Item3 05"));
_data.Add(new SampleData("Item3 06"));
_data.Add(new SampleData("Item3 07"));
_data.Add(new SampleData("Item3 08"));
_data.Add(new SampleData("Item3 09"));
_data.Add(new SampleData("Item3 10"));
_data.Add(new SampleData("Group5 01"));
_data.Add(new SampleData("Group5 02"));
_data.Add(new SampleData("Group5 03"));
_data.Add(new SampleData("Group6 01"));
_data.Add(new SampleData("Group6 02"));
_data.Add(new SampleData("Group6 03"));
_data.Add(new SampleData("Group7 01"));
_data.Add(new SampleData("Group7 02"));
_data.Add(new SampleData("Group7 03"));
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var collectionGroups = Collection.View.CollectionGroups;
((ListViewBase) this.semanticZoom.ZoomedOutView).ItemsSource = collectionGroups;
}

Tapping any of the group headers takes you to the zoomed out view, then selecting a group jumps you back to the right item in the zoomed in view.

Now run the app and see the expected output like the following screen.

app

Source Code

8 Comments

Join the conversation! Your thoughts help the community grow.

Paula Scholz9y ago
You will find a far more comprehensive tutorial and GitHub implementation for Windows 10 here: https://swifter.github.io/GroupInfoList/semanticzoom_web.htm and https://github.com/Swifter/GroupInfoListhttps://github.com/Swifter/GroupInfoList
Glenn Webster10y ago
Many thanks for your work - an excellent tutorial. A question - I want to be able to click on for example Item3 08 and for this to take me to a different page. Would you be able to do an odd tutorial for this functionality?
Munesh Sharma10y ago
good one
Gowtham Rajamanickam10y ago
very good article
Vignesh Mani10y ago
good
Thiruppathi R10y ago
Nice..
Munesh Sharma10y ago
good one
Kuppurasu Nagaraj10y ago
Nice Sharing..