PivotViewer V2 Series, Part 4: Tradecards

by jasonrshaver 3. November 2011 09:52

Other articles in the PivotViewer V2 Series:

  • Part 1: Intro
  • Part 2: Creating a Project
  • Part 3: Receiving OData
  • Part 4: Trade Cards
  • Part 5: Pivot Panel
  • Part 6: Links and Interactions
  • Part 7: Pivot Properties
  • Part 8: Multi-facacited Pivot Properties
  • Part 9: Large Data Sets
  • Part 10: Teaching Your Users
  • Part 11: Exposing Your Own Data
  • Part 12: Advanced Sorting
  • Part 13: Advanced Trade Cards
  • Part 14: Working with Excel

This entry builds upon the previous parts.  You can jump right to this point by downloading the following ZIP file, PivotViewerSeries_Part3.zip.

Creating Visuals

So, we have data put into the PivotViewer, but we are missing some exciting visuals.  To create all of the visuals you will see here, we just need to make some changes to MainPage.xaml’s PivotViewer control.

Trade Cards

The visuals each data item in a collection is call a “Trade Card”.  One of the exciting features for PivotViewer 2.0 is that trade cards can be much more dynamic than the previous CXML method of the past.  For example, we can show different trade cards depending on how zoomed in we are.  Or we can show more information as needed. 

Creating a Trade Card

First we need to create a default trade card for our Netflix data.  To do this, we are just going to create a new DataTemplate and attaching it to our PivotViewer control:

  1. <pivot:PivotViewer ItemsSource="{Binding Titles}">
  2.     <pivot:PivotViewer.ItemTemplates>
  3.         <pivot:PivotViewerItemTemplate>
  4.             <Border BorderBrush="Black" BorderThickness="1">
  5.                 <Image Source="{Binding Path=BoxArt.SmallUrl
  6.                             , Converter={StaticResource ImageConverter}
  7.                             , Mode=OneTime}"
  8.                        Width="65" Height="89" />
  9.             </Border>
  10.         </pivot:PivotViewerItemTemplate>
  11.     </pivot:PivotViewer.ItemTemplates>
  12. </pivot:PivotViewer>

And we will also need to add the ImageConverter that will take our image’s URL string and convert it to a Uri object:

  1. using System;
  2. using System.Globalization;
  3. using System.Windows.Data;
  4. using System.Windows.Media;
  5. using System.Windows.Media.Imaging;
  6.  
  7. namespace PivotViewerSeries.Silverlight
  8. {
  9.     public class ImageConverter : IValueConverter
  10.     {
  11.         public object Convert(object value
  12.             , Type targetType
  13.             , object parameter
  14.             , CultureInfo culture)
  15.         {
  16.             ImageSource Output = null;
  17.             if (value != null)
  18.                 Output = new BitmapImage(new Uri(value.ToString()));
  19.             else
  20.                 Output = new BitmapImage();
  21.             return Output;
  22.         }
  23.  
  24.         public object ConvertBack(object value
  25.             , Type targetType
  26.             , object parameter
  27.             , CultureInfo culture)
  28.         {
  29.             throw new NotImplementedException();
  30.         }
  31.     }
  32. }

And finally, reference that converter in our App.xaml:

  1. <Application.Resources>
  2.     <vm:ViewModelLocator x:Key="Locator"
  3.                         d:IsDataSource="True" />
  4.     <this:ImageConverter x:Key="ImageConverter" />
  5. </Application.Resources>

Now when we run our application, we will get the following result.  Be aware, that depending on your connection, it may take a bit for data to load from Netflix and for the images to download.

image

Using Multiple Trade Cards

To use different trade cards at different zoom levels, we can add more PivotViewerItemTemplate objects to the ItemTemplates collection, setting the MaxWidth property each time to tell the object how wide a template can go before showing the next larger one. 

It is important that the aspect ratio for each trade card must be the same, otherwise you will start to see some weird sizing issues. 

First, lets update our small trade card with the MaxWidth:

  1. <!-- Small Trade Card -->
  2. <pivot:PivotViewerItemTemplate MaxWidth="100">
  3.     <Image Source="{Binding Path=BoxArt.SmallUrl
  4.               ,Converter={StaticResource ImageConverter}}"
  5.        Width="65" Height="89" />
  6. </pivot:PivotViewerItemTemplate>

And create a new medium sized trade card that includes the movie title:

  1. <!-- Medium Trade Card -->
  2. <pivot:PivotViewerItemTemplate MaxWidth="500">
  3.     <Border BorderBrush="Black" BorderThickness="0">
  4.         <StackPanel Orientation="Vertical">
  5.             <TextBlock Text="{Binding Name}"
  6.                       Width="176"
  7.                       FontSize="14"
  8.                       FontWeight="Bold"
  9.                       TextWrapping="Wrap"
  10.                       HorizontalAlignment="Center"/>
  11.             <Image Source="{Binding Path=BoxArt.MediumUrl
  12.               ,Converter={StaticResource ImageConverter}}"
  13.        Width="176" Height="240" />
  14.         </StackPanel>
  15.     </Border>
  16. </pivot:PivotViewerItemTemplate>

Which, when zoomed in enough will look like this:

image

And finally, lets create a large trade card that can give us some more information:

  1. <!-- Large Trade Card -->
  2. <pivot:PivotViewerItemTemplate>
  3.                             <Viewbox Width="1200" Height="1636" MinHeight="1636" MinWidth="1200">
  4.     <Grid Width="600" Height="818" >
  5.         <Grid.RowDefinitions>
  6.             <RowDefinition Height="614" />
  7.             <RowDefinition Height="204" />
  8.         </Grid.RowDefinitions>
  9.         <Grid.ColumnDefinitions>
  10.             <ColumnDefinition Width="450" />
  11.             <ColumnDefinition Width="150" />
  12.         </Grid.ColumnDefinitions>
  13.         <Image Grid.Row="0"
  14.               Grid.Column="0"
  15.               Source="{Binding Path=BoxArt.LargeUrl
  16.               ,Converter={StaticResource ImageConverter}}"
  17.               Width="450" Height="614" />
  18.         <StackPanel Grid.Row="0"
  19.                    Grid.Column="1"
  20.                    Orientation="Vertical"
  21.                    Margin="2">
  22.             <TextBlock Text="{Binding Rating
  23.                             , StringFormat='MPAA Rating: {0}'}" />
  24.             <TextBlock Text="{Binding AverageRating
  25.                             , StringFormat='NetFlix Rating: {0} / 5'}" />
  26.             <TextBlock Text="{Binding ReleaseYear
  27.                             , StringFormat='Release Year: {0}'}" />
  28.             <TextBlock Text="{Binding Runtime
  29.                             , StringFormat='Length: {0} seconds'}" />                                    
  30.         </StackPanel>
  31.         <StackPanel Grid.Row="1"
  32.                    Grid.Column="0"
  33.                    Grid.ColumnSpan="2"
  34.                    Orientation="Vertical"
  35.                    Margin="10">
  36.             <TextBlock Text="{Binding Name}"
  37.                       FontSize="36"
  38.                       FontWeight="Bold"
  39.                       TextWrapping="Wrap"/>
  40.             <TextBlock Text="{Binding Synopsis}"
  41.                       FontSize="16"
  42.                       TextWrapping="Wrap"/>
  43.         </StackPanel>
  44.         </Grid>
  45.     </Viewbox>
  46. </pivot:PivotViewerItemTemplate>

Which results in something like the following:

image

If you find your project ‘skipping’ a template, it is likely that your templates are too close in size to each other.  For PivotViewer to take the time to optimize and repaint all the cards, it need to make sure it is worth it, and a 50 or 100 pixel change is viewed as not being worth wild. 

Tags: , ,

Blog

Submit to DotNetKicks...
Permalink | Comments (0)

About the author

I am a software developer working for Microsoft in Redmond, WA.  In addition, my wife and I own TTXOnline, what is likely the 3rd largest table tennis store in the US.

Month List

Page List