Wensus Analytics

WinRT Step-by-Step Tutorial: MVVM + GridView + SemanticZoom

imageIn this WinRT tutorial we will build a single page application using the following building blocks:

  • XAML & C#
  • MVVM
  • Data binding
  • GridView
  • SemanticZoom –control

We will start from the scratch, using the “Blank application” template. Then we continue by creating the view model. After the view model is ready we will create the view by adding a page using the “Grouped Items Page” template. At last step we’re going to modify the page to support the SemanticZoom –control.

Update: Make sure to read about the GridView’s performance problems.

Update: The examples and source code has been updated to work with Windows 8 RTM.

1. Creating the project

Let’s start by creating a new application using the “Blank application” template. This template contains a single page, “BlankPage.xaml”, which we can delete. Our application will contain only one page and we’re going to add this as a last step, using the built-in “Grouped Items Page” template. This template contains the GridView which we’ll use to to implement the semantic zoom.

image

But before creating the view, we’ll need a view model.

2. Creating the view model

Add a C# class and name it “MoviesPageViewModel.cs”. This is going to be our view model and it’ll work as the DataContext for our view.

image

The models

Our application shows movies grouped by their categories. For this we’ll need a new class which represents a single movie. This class can be added to the MoviesPageViewModel:

public class Movie

    {

        public string Title { get; set; }

        public string Subtitle { get; set; }

        public string Image { get; set; }

        public string Category { get; set; }

    }

We also need a model which represents a single movie category:

public class MovieCategory
    {
        public string Title { get; set; }
        public List<Movie> Items { get; set; }
    }

The data

We’re not going to connect our application into the net, instead we’re using static data. The movie instances can be created inside the MoviePageViewModel’s constructor:

var movies = new List<Movie>
                             {
                                 new Movie {Title = "The Ewok Adventure", Category = "Adventure", Subtitle = "The Towani family civilian shuttlecraft crashes on the forest moon of Endor.", Image = "http://cf2.imgobject.com/t/p/w500/y6HdTlqgcZ6EdsKR1uP03WgBe0C.jpg"},
                                 new Movie {Title = "The In-Laws", Category = "Adventure", Subtitle = "In preparation for his daughter's wedding, dentist Sheldon ", Image = "http://cf2.imgobject.com/t/p/w500/9FlFW9zhuoOpS8frAFR9cCnJ6Sg.jpg"},
                                 new Movie {Title = "The Man Called Flintstone", Category = "Adventure", Subtitle = "In this feature-length film based on the Flintstones TV show", Image = "http://cf2.imgobject.com/t/p/w500/6qyVUkbDBuBOUVVplIDGaQf6jZL.jpg"},

                                 new Movie {Title = "Super Fuzz", Category = "Comedy", Subtitle = "Dave Speed is no ordinary Miami cop--he is an irradiated Miami cop ", Image = "http://cf2.imgobject.com/t/p/w500/bueVXkpCDPX0TlsWd3Uk7QKO3kD.jpg"},
                                 new Movie {Title = "The Knock Out Cop", Category = "Comedy", Subtitle = "This cop doesn't carry a gun - his fist is loaded!", Image = "http://cf2.imgobject.com/t/p/w500/mzlw8rHGUSDobS1MJgz8jXXPM06.jpg"},
                                 new Movie {Title = "Best Worst Movie", Category = "Comedy", Subtitle = "A look at the making of the film Troll 2 (1990) ", Image = "http://cf2.imgobject.com/t/p/w500/5LjbAjkPBUOD9N2QFPSuTyhomx4.jpg"},

                                 new Movie {Title = "The Last Unicorn", Category = "Fantasy", Subtitle = "A brave unicorn and a magician fight an evil king", Image = "http://cf2.imgobject.com/t/p/w500/iO6P5vV1TMwSuisZDtNBDNpOxwR.jpg"},
                                 new Movie {Title = "Blithe Spirit", Category = "Fantasy", Subtitle = "An English mystery novelist invites a medium", Image = "http://cf2.imgobject.com/t/p/w500/gwu4c10lpgHUrMqr9CBNq2FYTpN.jpg"},
                                 new Movie {Title = "Here Comes Mr. Jordan", Category = "Fantasy", Subtitle = "Boxer Joe Pendleton, flying to his next fight", Image = "http://cf2.imgobject.com/t/p/w500/9cnWl7inQVX6wznjYNmQmJXVD6J.jpg"},
                             };

Grouping the data

Then we can group the movies by their categories and create a “MovieCategory” instance for each category:

var moviesByCategories = movies.GroupBy(x => x.Category)
                .Select(x => new MovieCategory { Title = x.Key, Items = x.ToList() });

Publishing the data from the view model to the view

We’re going to use data binding to create the view. As we now have the movies in the format we want, we’ll only have to create a public property which the view can bind against. For this we’ll add a new property to the view model:

public List<MovieCategory> Items { get; set; }

The property can be initialized after we have grouped the movies:

Items = moviesByCategories.ToList();

And that’s it. We now have the view model ready and it’s quite simple. The data is created inside the constructor and the view model only has one public property. The view can bind its GridView against this property in order to access the movies.

It’s important to notice that the view model’s public property contains grouped data. We want to display the data in a grouped format, where each movie category is displayed separately. This is why the property contains a list of data where every item has a title and a collection of child items.

The whole view model

Here’s how our MoviesPageViewModel.cs ended up looking:

using System.Collections.Generic;
using System.Linq;

namespace WinRT_MVVM_GridView_SemanticZoom
{
    public class MoviesPageViewModel
    {
        public List<MovieCategory> Items { get; set; }

        public MoviesPageViewModel()
        {
            var movies = new List<Movie>
                             {
                                 new Movie {Title = "The Ewok Adventure", Category = "Adventure", Subtitle = "The Towani family civilian shuttlecraft crashes on the forest moon of Endor.", Image = "http://cf2.imgobject.com/t/p/w500/y6HdTlqgcZ6EdsKR1uP03WgBe0C.jpg"},
                                 new Movie {Title = "The In-Laws", Category = "Adventure", Subtitle = "In preparation for his daughter's wedding, dentist Sheldon ", Image = "http://cf2.imgobject.com/t/p/w500/9FlFW9zhuoOpS8frAFR9cCnJ6Sg.jpg"},
                                 new Movie {Title = "The Man Called Flintstone", Category = "Adventure", Subtitle = "In this feature-length film based on the Flintstones TV show", Image = "http://cf2.imgobject.com/t/p/w500/6qyVUkbDBuBOUVVplIDGaQf6jZL.jpg"},

                                 new Movie {Title = "Super Fuzz", Category = "Comedy", Subtitle = "Dave Speed is no ordinary Miami cop--he is an irradiated Miami cop ", Image = "http://cf2.imgobject.com/t/p/w500/bueVXkpCDPX0TlsWd3Uk7QKO3kD.jpg"},
                                 new Movie {Title = "The Knock Out Cop", Category = "Comedy", Subtitle = "This cop doesn't carry a gun - his fist is loaded!", Image = "http://cf2.imgobject.com/t/p/w500/mzlw8rHGUSDobS1MJgz8jXXPM06.jpg"},
                                 new Movie {Title = "Best Worst Movie", Category = "Comedy", Subtitle = "A look at the making of the film Troll 2 (1990) ", Image = "http://cf2.imgobject.com/t/p/w500/5LjbAjkPBUOD9N2QFPSuTyhomx4.jpg"},

                                 new Movie {Title = "The Last Unicorn", Category = "Fantasy", Subtitle = "A brave unicorn and a magician fight an evil king", Image = "http://cf2.imgobject.com/t/p/w500/iO6P5vV1TMwSuisZDtNBDNpOxwR.jpg"},
                                 new Movie {Title = "Blithe Spirit", Category = "Fantasy", Subtitle = "An English mystery novelist invites a medium", Image = "http://cf2.imgobject.com/t/p/w500/gwu4c10lpgHUrMqr9CBNq2FYTpN.jpg"},
                                 new Movie {Title = "Here Comes Mr. Jordan", Category = "Fantasy", Subtitle = "Boxer Joe Pendleton, flying to his next fight", Image = "http://cf2.imgobject.com/t/p/w500/9cnWl7inQVX6wznjYNmQmJXVD6J.jpg"},
                             };

            var moviesByCategories = movies.GroupBy(x => x.Category)
                .Select(x => new MovieCategory { Title = x.Key, Items = x.ToList() });

            Items = moviesByCategories.ToList();
        }
    }

    public class Movie
    {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Image { get; set; }
        public string Category { get; set; }
    }

    public class MovieCategory
    {
        public string Title { get; set; }
        public List<Movie> Items { get; set; }
    }
}

3. Creating the view

imageNow that the view model is ready, we can focus on the view. Let’s start by adding a new page using the “Grouped Items Page” template. We can name the page “Movies.xaml”.  This page template comes with a GridView configured to show grouped data, so it’s an ideal place to start.

Configuring application’s start-up page

After adding the page, we must modify the app.xaml.cs so that the new page will be used as the first page of the application. To do this we can modify the OnLaunched-method:

protected override void OnLaunched(LaunchActivatedEventArgs args) 
{  
    &hellip;     
    if (!rootFrame.Navigate(typeof(Movies)))
    &hellip;
}

Creating the connection between the page and the view model

We now have the page (the view) and the view model. Next step is to create an instance of the view model and set it as the data context of the page. This can be done in the page’s constructor:

public Movies()
        {
            this.InitializeComponent();

            var viewModel = new MoviesPageViewModel();
            this.DataContext = viewModel;
        }

Binding the GridView to a correct property

As you may recall, we named the view model’s public property as “Items”. By default the grouped items page is bound to a property called “Groups”. To change this we can modify the CollectionViewSource declared in the beginning of the Movies.xaml:

<CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Items}"
            IsSourceGrouped="true"
            ItemsPath="Items"/>

Running the application the first time

Now that we have the view and the view model ready, we can run the application the first time:

image

And it actually looks pretty good! You may wonder how the view can display the movie poster, name and the description even though we haven’t created any data bindings between the items and the movies. The reason this works is because the default “Grouped Items Page” template defines the ItemTemplate like this:

image

The “Standard250x250ItemTemplate” is defined inside the CommonStandardStyles.xaml:

<DataTemplate x:Key="Standard250x250ItemTemplate">
        <Grid HorizontalAlignment="Left" Width="250" Height="250">
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding Image}" Stretch="UniformToFill"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
                <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

Here’s our Movie-class again:

public class Movie
    {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Image { get; set; }
        public string Category { get; set; }
    }

If you compare the item template against the movie-class, you can see that the template’s binding match the class’ properties.

Now we just need the SemanticZoom.

4. Adding the SemanticZoom –control

Semantic zoom is an UI concept defined by Microsoft like the following:

Semantic Zoom is a touch-optimized technique used by Metro style apps in Windows 8 Consumer Preview for presenting and navigating large sets of related data or content within a single view (such as a photo album, app list, or address book).

SemanticZoom then is a XAML-control which can be used to add the semantic zoom concept into a WinRT application. The SemanticZoom –control requires that we have two representations of the same data: The ZoomedInView and the ZoomedOutView. In our case the ZoomednView is already done because we can use the working GridView. But we need an another List which displays the data when the user zooms out using the Ctrl+Mousewheel. The SemanticZoom only supports the GridView and the ListView controls.

Replacing the ScrollViewer with SemanticZoom

The first and most important thing to do is to completely remove the ScrollViewer named “itemGridScrollViewer” from the Movies.xaml. The SemanticZoom control won’t work correctly if it’s inside the ScrollViewer.

Many people have problems getting the ZoomedOutView and ZoomedInView “in sync”. The usual problem is that when the item in ZoomedOutView is clicked, the ZoomedInView doesn’t scroll to the correct position. The reason for this problem usually is that the SemanticZoom –control is inside a ScrollViewer.

We can then replace the ScrollViewer with a SemanticZoom. Note that the Margin and Grid.Row properties should be copied from the ScrollViewer to the SemanticZoom:

<SemanticZoom x:Name="Zoom" Grid.Row="1" Margin="0,-3,0,0">
     <SemanticZoom.ZoomedInView>     
     </SemanticZoom.ZoomedInView>     
     <SemanticZoom.ZoomedOutView>     
     </SemanticZoom.ZoomedOutView> 
</SemanticZoom>

Creating the ZoomedInView

Creating the ZoomedInView is easy because we’ll already done that. We just need to move the “itemGridView” inside the ZoomedInView-section.

Creating the ZoomedOutView

We don’t have the ZoomedOutView ready but the following GridView can do the trick:

<GridView VerticalAlignment="Center" Margin="200 -200 0 0"> 
    <GridView.ItemTemplate> 
        <DataTemplate> 
            <StackPanel> 
                <TextBlock HorizontalAlignment="Center" 
                           Text="{Binding Group.Title}" 
                           Style="{StaticResource SubheaderTextStyle}" 
                           /> 
            </StackPanel> 
        </DataTemplate> 
    </GridView.ItemTemplate>

    <GridView.ItemContainerStyle> 
        <Style TargetType="GridViewItem"> 
            <Setter Property="Margin" Value="4" /> 
            <Setter Property="Padding" Value="5" /> 
            <Setter Property="HorizontalContentAlignment" Value="Left" /> 
            <Setter Property="VerticalContentAlignment" Value="Center" /> 
        </Style> 
    </GridView.ItemContainerStyle>

    <GridView.ItemsPanel> 
        <ItemsPanelTemplate> 
            <WrapGrid ItemWidth="400" ItemHeight="70" 
                      Orientation="Horizontal" VerticalChildrenAlignment="Center" MaximumRowsOrColumns="3"></WrapGrid> 
        </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
</GridView>
The most important things to notice:
  • The GridView’s ItemsSource isn’t set in the XAML
  • The TextBox’s data binding is set correctly to “Group.Title”. In this case the Title is bound against the MovieCategory-instances Title-property

The whole SemanticZoom XAML

Overall, this is how the SemanticZoom -control is defined in the XAML:

<SemanticZoom x:Name="Zoom" Grid.Row="1" Margin="0,-3,0,0"> 
    <SemanticZoom.ZoomedInView> 
        <GridView 
        x:Name="itemGridView" 
        AutomationProperties.AutomationId="ItemGridView" 
        AutomationProperties.Name="Grouped Items" 
        Margin="116,0,40,46" 
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}">

            <GridView.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <VirtualizingStackPanel Orientation="Horizontal"/> 
                </ItemsPanelTemplate> 
            </GridView.ItemsPanel> 
            <GridView.GroupStyle> 
                <GroupStyle> 
                    <GroupStyle.HeaderTemplate> 
                        <DataTemplate> 
                            <Grid Margin="1,0,0,6"> 
                                <Button 
                                AutomationProperties.Name="Group Title" 
                                Content="{Binding Title}" 
                                Style="{StaticResource TextButtonStyle}"/> 
                            </Grid> 
                        </DataTemplate> 
                    </GroupStyle.HeaderTemplate> 
                    <GroupStyle.Panel> 
                        <ItemsPanelTemplate> 
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> 
                        </ItemsPanelTemplate> 
                    </GroupStyle.Panel> 
                </GroupStyle> 
            </GridView.GroupStyle> 
        </GridView> 
    </SemanticZoom.ZoomedInView> 
    <SemanticZoom.ZoomedOutView> 
        <GridView VerticalAlignment="Center" Margin="200 -200 0 0"> 
            <GridView.ItemTemplate> 
                <DataTemplate> 
                    <StackPanel> 
                        <TextBlock HorizontalAlignment="Center" 
                                   Text="{Binding Group.Title}" 
                                   Style="{StaticResource SubheaderTextStyle}" 
                                   /> 
                    </StackPanel> 
                </DataTemplate> 
            </GridView.ItemTemplate>

            <GridView.ItemContainerStyle> 
                <Style TargetType="GridViewItem"> 
                    <Setter Property="Margin" Value="4" /> 
                    <Setter Property="Padding" Value="5" /> 
                    <Setter Property="HorizontalContentAlignment" Value="Left" /> 
                    <Setter Property="VerticalContentAlignment" Value="Center" /> 
                </Style> 
            </GridView.ItemContainerStyle>

            <GridView.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <WrapGrid ItemWidth="400" ItemHeight="70" 
                              Orientation="Horizontal" VerticalChildrenAlignment="Center" MaximumRowsOrColumns="3"></WrapGrid> 
                </ItemsPanelTemplate> 
            </GridView.ItemsPanel> 
        </GridView> 
    </SemanticZoom.ZoomedOutView> 
</SemanticZoom>

 

Configuring the ZoomedOutView’s ItemsSource:

The last step before running the app is to modify the Movies.xaml.cs. In this file we must define how the ListView inside the ZoomedOutView gets its data. We can add the required code to OnNavigatedTo-method:

protected override void OnNavigatedTo(NavigationEventArgs e)

        {
            var collectionGroups = groupedItemsViewSource.View.CollectionGroups;
            ((ListViewBase)this.Zoom.ZoomedOutView).ItemsSource = collectionGroups;
        }

Running the complete application

Our application is ready. The front page looks identical to the previous version:

image

But if you use the Ctrl+Mousewheel, you can see the semantic zoom in action:

image

The source code

This tutorial’s source code is available from the GitHub.

Links

  • Kumar Ravi

    Well, It’s awesome. Did it in VB. But I am unable to get events fired from the items. :(

    • http://mikaelkoskinen.net/ Mikael Koskinen

      Do you mean the events like ItemClicked? If so, you must set the GridView’s IsItemClickEnabled to true. Also, you can try setting the ItemSelectionMode to None.

  • Anthony Butcher

    From within the groups for the semantic zoom, can you access the groups Items information, such as how many items are within that group. For my semantic zoom I’d like to show this beside the Key for the group.

  • http://tallulahcantu.wordpress.com/2012/11/06/developers-are-switching-to-the-c-platform-for-better-performance/ AileenHarrell

    I agree From within the categories for the semantic zoom capability, can you accessibility the categories Products details, such as how many products are within that team. For my semantic zoom capability I’d like to demonstrate this beside the Key for the team.

  • nilmobile

    Thank you for the great example. Is there a way I can get the Parent Group object(ie MovieCategory) when a Movie is selected?

  • karas

    Good day ,
    What will be my code if the data is coming from xml file? and i’m planning to use linq or what just to pass the data from xml to List collection?

  • mmahdi

    thanks for the very useful tutorial

  • Kevin

    I think you meant to say ‘In this file we must define how the GridView inside the ZoomedOutView gets its data’ rather than ‘In this file we must define how the ListView inside the ZoomedOutView gets its data’. It works since both the GridView and the ListView have the same base class ListViewBase.

  • Kevin

    Great article by the way. Very nicely done.

  • sarabjit

    thanks.. very helpful ..