Adding semantic zoom to the LightSwitch pivot viewer.

Introduction

This post is part of a series on the usage of the Silverlight pivot viewer in LightSwitch.

In this post, we add semantic zoom to our movie pivot viewer sample. You will see that this is pretty simple.

What is semantic zoom?

Well, it’s the ability to visualize data in a semantically different way depending on the zoom level. In general you will want to see more details when you zoom in.

This is our view zoomed out:

But when we zoom in, you’ll see that the morphology of the card changes to another level of detail:

In my basic movie example, I simply added some dummy text in this new template, but there is room for improvement

How?

It’s terribly easy. Simply add a second (or third) PivotViewerItemTemplate and specify a MaxWidth property, which acts as kind of indication when to jump to the other template.

<pivot:PivotViewer.ItemTemplates>
                <pivot:PivotViewerItemTemplate MaxWidth="300">
                    <Border Width="300" Height="300" Background="{Binding MovieCategory.DisplayColor, Converter={StaticResource BackgroundConverter}}" >
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding MovieName}" 
                            FontSize="30"
                            FontWeight="Bold"
                            Foreground="White"
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" />
                            <TextBlock Text="{Binding MovieCategory.CategoryName}" 
                            FontSize="30"
                            FontWeight="Bold"
                            Foreground="White"
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" />
                        </StackPanel>
                    </Border>
                </pivot:PivotViewerItemTemplate>

                <pivot:PivotViewerItemTemplate >
                    <Grid Width="800" Height="800" Background="LightGray">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Fill="{Binding MovieCategory.DisplayColor, Converter={StaticResource BackgroundConverter}}"/>
                        <StackPanel Orientation="Vertical" Grid.Column="1">
                            <TextBlock Text="{Binding MovieName}" FontSize="30" FontWeight="Bold"   />
                            <TextBlock  TextWrapping="Wrap" FontSize="40" TextOptions.TextFormattingMode="Display"  Text="Probably the most exciting semantic zoom you ever saw  
                                        Here we have a lot of very interesting information
                                       regarding this movie,in such a way we can nicely fill this card... 
                                        Use all your xaml skills to get here a very nice layout.
                                       "></TextBlock>
                        <TextBlock Text="{Binding ReleaseDate}" FontSize="20"  />
                        </StackPanel>
                    </Grid>
                </pivot:PivotViewerItemTemplate>
            </pivot:PivotViewer.ItemTemplates>

What’s next?

In the next post I will cover adorners which is a bit more involved.