Windows Phone 8.1 SemanticZoom

Beer.cs

namespace BeerGroups.Core.Models
{
    public class Beer
    {
        public string Name { get; set; }
        public string Brewery { get; set; }
        public string Style { get; set; }
    }
}

MainPage.xaml

<Page
    x:Class="BeerGroups.WP8.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <UserControl.Resources>
        <CollectionViewSource x:Name="BeerCVS" 
                              IsSourceGrouped="True"
                              Source="{Binding BeerGroups}"/>
    </UserControl.Resources>
    
    <Grid>
        <SemanticZoom>
            <SemanticZoom.ZoomedInView>
                <ListView ItemsSource="{Binding Source={StaticResource BeerCVS}}"
                          Margin="12">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,10">
                                <TextBlock Text="{Binding Name}"/>
                                <TextBlock Text="{Binding Brewery}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="0,10" Background="DarkOrange">
                                        <TextBlock Text="{Binding Key}"
                                                   Foreground="White" Padding="12"/>
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid MaximumRowsOrColumns="3" 
                                                           Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </ListView.GroupStyle>
                </ListView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="ZoomedOutGridView"  Foreground="White"
                          ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                          Margin="12">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Group.Key}"
                                       Foreground="White"/>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid ItemWidth="200" ItemHeight="75" MaximumRowsOrColumns="2"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="Margin" Value="4" />
                            <Setter Property="Padding" Value="10" />
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="HorizontalContentAlignment" Value="Left" />
                            <Setter Property="VerticalContentAlignment" Value="Bottom" />
                        </Style>
                    </GridView.ItemContainerStyle>

                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
    </Grid>
</Page>

MainPage.xaml.cs

using BeerGroups.Core.ViewModels;

namespace BeerGroups.WP8
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }
        
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            DataContext = new MainViewModel();
            ZoomedOutGridView.ItemsSource = BeerCVS.View.CollectionGroups;
        }
    }
}

MainViewModel.cs

namespace BeerGroups.Core.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private IOrderedEnumerable<System.Linq.IGrouping<string, BeerGroups.Core.Models.Beer>>
            _beerGroups;

        public IOrderedEnumerable<System.Linq.IGrouping<string, BeerGroups.Core.Models.Beer>> BeerGroups
        {
            get { return _beerGroups; }
            set
            {
                _beerGroups = value;
                OnPropertyChanged();
            }
        }

        private List<Beer> _beer;

        public List<Beer> Beer
        {
            get { return _beer; }
            set
            {
                _beer = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }

        public MainViewModel()
        {
            Beer = new List<Beer>();

            #region Load up some dummy data

            for (var i = 0; i < 10; i++) // Add these 4 beers several times so there is plenty of data
            {
                Beer.Add(new Beer
                {
                    Name = "DreamWeaver Wheat",
                    Brewery = "Tröegs Brewing Company",
                    Style = "Hefeweizen"
                });

                Beer.Add(new Beer
                {
                    Name = "Weihenstephaner Hefeweissbier",
                    Brewery = "Bayerische Staatsbrauerei Weihenstephan",
                    Style = "Hefeweizen"
                });

                Beer.Add(new Beer
                {
                    Name = "Wiley's One-Eyed Wheat",
                    Brewery = "Bricktown Brewery",
                    Style = "American Pale Wheat Ale"
                });

                Beer.Add(new Beer
                {
                    Name = "Hefewiezen",
                    Brewery = "Phantom Canyon Brewing Company",
                    Style = "Hefeweizen"
                });
            }
            #endregion

            var result = from b in Beer
                        group b by b.Style
                        into g
                        orderby g.Key
                        select g;

            BeerGroups = result;
        }
    }
}