Follow Me on Instagram Subscribe via RSS Feed

PivotViewer Basics : Semantic Zoom

November 29, 2011

Continuing with the series on PivotViewer, the next new feature to look at is the concept of semantic zoom.  “So what is semantic zoom” you ask?  Semantic zoom is showing different visual information at different zoom levels.  In the case of PivotViewer, the trading card image will change based on how large the trading card is on the screen.

I have had several people ask me why you would want to change the trading card as the size changed.  If you think of the normal PivotViewer interaction, you begin with seeing a lot of items on the screen at a relatively small size.  The amount of information that you can provide at that level is very small.  In fact, typically you are only able to provide one or possibly two pieces of information effectively (where most of the time it is just one).  Once you start filtering the data, the number of visible cards gets smaller and, as a result, the size of each card gets larger.  This gives you the opportunity to effectively display more information to the user.  Once the user selects a trading card then majority of the PivotViewer screen real estate is filled with the selected item.  This gives you the best chance of displaying detail information to the user.  As you can begin to see, as the user gets closer to the individual trading card, you can effectively show them more information.  This is semantic zoom.

To get a better feel of semantic zoom, let’s look at an example.  The image below shows 3 different trading cards of a stock demo that the PivotViewer team worked on.  At the smallest level, we are only showing two pieces on information: the stock name and if the stock is up or down for the day (green = up).  As the card size begins to get larger, we can show additional information.  Once the user zooms in to only showing a couple of items, we can show even more information. 

pv_semantic

Multiple ItemTemplates

In our first post of this series, Client-side Collections, we created a PivotViewer collection that uses a single template.  This is the type of collections that you saw in the SL4 PivotViewer, a single trading card image regardless of size.  Our examples in this post will build on the last, so make sure you have a working version from the last post or go grab the source code : PVB01_ClientSideCreation.zip

image

In that post we defined our PivotViewerItemTemplate and assigned it to our PivotViewer, like this:

pViewer.ItemTemplates = new PivotViewerItemTemplateCollection()
    {
        (PivotViewerItemTemplate) Resources["DemoTemplate"]
    };

You might notice that the ItemTemplates property takes a collection of item templates.  This is the mechanism that we will use to implement our semantic zoom.

Before we add a new template, we need to make a small modification to our original template.  The PivotViewerItemTemplate has a property, MaxWidth.  This allows you to define the maximum size that the trading card will be displayed.  If you zoom in to an item and it is larger than this MaxWidth the template will no longer be used.  In our example, let’s set the original template to a MaxWidth of 300px.

<pivot:PivotViewerItemTemplate x:Key="DemoTemplate"
    MaxWidth="300">
    <Border Width="300" Height="300"
            Background="{Binding Color,
                    Converter={StaticResource colorConverter}}">
        <TextBlock Text="{Binding ShortName}" FontSize="20"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>
</pivot:PivotViewerItemTemplate>

If you run the example as is, you will notice that once you zoom in where the trading card is more than 300px in width, the cards will disappear.  Let’s fix this by adding another template.  Our new template will show more information, thus being more effective at providing information to our users.  Here is what our new template looks like:

<pivot:PivotViewerItemTemplate x:Key="DemoTemplate2">
    <Grid Width="800" Height="800" Background="LightGray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="{Binding Color, 
            Converter={StaticResource colorConverter}}"/>
        <TextBlock Text="{Binding ShortName}" FontSize="100"
            FontWeight="Bold"
            Grid.Column="1"
            HorizontalAlignment="Center" 
            VerticalAlignment="Center" />
        <TextBlock Text="{Binding Stamp}"
            FontSize="40"
            Margin="0,0,0,30"
            Grid.Column="1"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Center"/>
    </Grid> 
</pivot:PivotViewerItemTemplate>

While not the most complex example, it will serve to get the point across.  To add the additional template to our PivotViewer, we need to adjust our ItemTemplates assignment.

pViewer.ItemTemplates = new PivotViewerItemTemplateCollection()
        {
            (PivotViewerItemTemplate) Resources["DemoTemplate"],
            (PivotViewerItemTemplate) Resources["DemoTemplate2"]
        };

It is important to make sure you watch the order in which you add your templates.  When rendering a template, PivotViewer will look at the first template on the list.  If the size is greater than the MaxWidth of that template, it moves on to the next one.  This continues until it runs out of templates, which is what happened in our previous example.

For our example above, PivotViewer will use the first (original) template until the size of the trading card is greater than 300px.  Then it will use the new template.  The cool thing about PivotViewer is that it reverts back to the smaller template when you zoom back out.  Here is a screenshot of what our new template looks like:

image

Now you can design your collections to take advantage of semantic zoom and enhance the user’s experience. 

You can download the code here : PVB02_SemanticZoom.zip

Next Post…

Our next example will demonstrate the use of dynamic trading cards.

Series Navigation<< PivotViewer Basics : Client-side CollectionsPivotViewer Basics : Dynamic Collections >>

Leave a Reply