Last year I was working on Cineworld app for Windows 8. Having use LongListSelector I wanted to ensure that I can transfer the look and feel. However I was fighting multiple battles – the first one is that while LongListSelector is a single control, SemanticZoom control itself contains ZoomInView and ZoomedOutView. These are independent of each other and most examples then to show settings data to zoomed in view and then zoomed out view referring to zoomed in view. It gets messy – maybe I am just slow but it was not intuitive and took me ages.
While mucking around, I came across this post and from there, kept trying till I got what I wanted.
<Page.Resources>
<CollectionViewSource x:Name="cvsFilms" IsSourceGrouped="true" />
<!-- Zoomed out templates and selectors -->
<DataTemplate x:Key="GroupTemplate">
<Border Margin="6" Width="75" Height="75" Background="Black" >
<TextBlock Text="{Binding Name}" Foreground="White" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</DataTemplate>
<DataTemplate x:Key="EmptyGroupTemplate">
<Border Margin="6" Width="75" Height="75" BorderBrush="Black" BorderThickness="1" Background="LightGray">
<TextBlock Text="{Binding Name}" Foreground="Black" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</DataTemplate>
<local:EmptyOrFullSelector
x:Key="FilmGroupEmptyOrFullSelector"
Empty="{StaticResource EmptyGroupTemplate}"
Full="{StaticResource GroupTemplate}" />
<DataTemplate x:Key="GroupHeaderTemplate">
<Border Margin="20, 20, 0, 0" Width="75" Height="75" Background="Black" Tapped="Grid_Tapped">
<TextBlock Text="{Binding Key}" Foreground="White" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</DataTemplate>
<DataTemplate x:Key="GroupItemTemplate">
<Border Margin="14, 20, 0, 0">
<Grid Height="350" Width="185" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="{Binding PosterUrl}" Height="278" Width="185" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="UniformToFill"/>
<TextBlock Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Title}" HorizontalAlignment="Center" FontFamily="Segoe UI" />
</Grid>
</Border>
</DataTemplate>
</Page.Resources>
<SemanticZoom x:Name="semanticZoom" Background="White" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch">
<SemanticZoom.ZoomedOutView>
<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False" HorizontalAlignment="Center" ItemTemplateSelector="{StaticResource FilmGroupEmptyOrFullSelector}" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Background="LightGray" MaximumRowsOrColumns="9" VerticalChildrenAlignment="Center" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView x:Name="gvZoomedInFilms" ItemsSource="{Binding Source={StaticResource cvsFilms}}" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ItemTemplate="{StaticResource GroupItemTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource GroupHeaderTemplate}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
List<GroupInfoList<object>> dataLetter = null;
public ListFilms()
{
this.InitializeComponent();
FilmData cd = new FilmData(App.Films);
dataLetter = cd.GroupsByLetter;
cvsFilms.Source = dataLetter;
gvZoomedInFilms.SelectionChanged -= gvZoomedIn_SelectionChanged;
gvZoomedInFilms.SelectedItem = null;
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cd.FilmHeaders; gvZoomedInFilms.SelectionChanged += gvZoomedIn_SelectionChanged;
semanticZoom.ViewChangeStarted -= semanticZoom_ViewChangeStarted;
semanticZoom.ViewChangeStarted += semanticZoom_ViewChangeStarted;
}
void semanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
if (e.SourceItem == null)
return;
if (e.SourceItem.Item.GetType() == typeof(HeaderItem))
{
HeaderItem hi = (HeaderItem)e.SourceItem.Item;
var group = dataLetter.Find(d => ((char)d.Key) == hi.Name);
if (group != null)
e.DestinationItem = new SemanticZoomLocation() { Item = group };
}
}
// FilmData looks like this
private List<GroupInfoList<object>> groupsByLetter = null;
public List<GroupInfoList<object>> GroupsByLetter
{
get
{
if (groupsByLetter == null)
{
groupsByLetter = new List<GroupInfoList<object>>();
var query = from item in Collection
orderby ((FilmInfo)item).Title
group item by ((FilmInfo)item).HeaderChar into g
select new { GroupName = g.Key, Items = g };
foreach (var g in query)
{
GroupInfoList<object> info = new GroupInfoList<object>();
info.Key = g.GroupName;
foreach (var item in g.Items)
{
info.Add(item);
}
groupsByLetter.Add(info);
}
}
return groupsByLetter;
}
}
List<HeaderItem> filmHeaders = null;
public List<HeaderItem> FilmHeaders
{
get
{
if (filmHeaders == null)
{
filmHeaders = new List<HeaderItem>();
char c = '#';
filmHeaders.Add(new HeaderItem() { Name = '#', IsEnabled = this.GroupsByLetter.Exists(k => ((char)k.Key) == c) });
for (int i = 65; i <= 90; i++)
{
c = (char)i;
if (this.GroupsByLetter.Exists(k => ((char)k.Key) == c))
filmHeaders.Add(new HeaderItem() { Name = c, IsEnabled = true });
else
filmHeaders.Add(new HeaderItem() { Name = c, IsEnabled = false });
}
}
return filmHeaders;
}
}
I think that’s about it. Its been 6 months now and I think I am going to change how it looks 
some stuff will remain as it is, others will have to change
