PivotViewer v2 dynamic collection AND deep zoom images

Question

I am using the PivotViewer v2 released with Silverlight 5. I've started to use the new data binding ability of the PivotViewer, binding directly to data objects that are passed down from the server, and using an ItemTemplate to display the objects in the PivotViewer.

With CXML, I could pre-generate the DZCs/DZIs for the pivot viewer (it's a JIT collection), but I can't figure out how to use Deep Zoom imaging + the new Pivotviewer with data binding. How can I display a deep zoom image in an item template for a collection that is data bound?

I've tried using the PivotViewerMultiSizeImage class (XAML below) and the PivotViewerMultiScaleSubImageHost class. My example below almost works: it displays an image, but seems to be stuck at the 100 pixel level - no Deep Zoom. I've also tried the MultiScaleImage control with DZIs, but no luck - it generates an OutOfMemory exception immediately.

Does anyone know how to get Deep Zoom capability with data binding in the new PivotViewer?

<pivot:PivotViewer.ItemTemplates>
<pivot:PivotViewerItemTemplate>

<pivot:PivotViewerMultiSizeImage Width="100" Height="100">
     <pivot:PivotViewerMultiSizeImage.Sources>
           <pivot:PivotViewerMultiSizeImageSource MaxHeight="100" MaxWidth="100" UriSource="{Binding Images[2]}" />
           <pivot:PivotViewerMultiSizeImageSource MaxHeight="300" MaxWidth="300" UriSource="{Binding Images[3]}" />
           <pivot:PivotViewerMultiSizeImageSource MaxHeight="500" MaxWidth="500" UriSource="{Binding Images[4]}" />
           <pivot:PivotViewerMultiSizeImageSource MaxHeight="700" MaxWidth="700" UriSource="{Binding Images[5]}" />
           <pivot:PivotViewerMultiSizeImageSource MaxHeight="20000" MaxWidth="20000" UriSource="{Binding Images[6]}" />
     </pivot:PivotViewerMultiSizeImage.Sources>
</pivot:PivotViewerMultiSizeImage> 

</pivot:PivotViewerItemTemplate>
</pivot:PivotViewer.ItemTemplates>

Answer 1

You're getting a 100x100 image because you are specifying this as the size of your control. Change the size of

<pivot:PivotViewerMultiSizeImage Width="100" Height="100">

to

<pivot:PivotViewerMultiSizeImage Width="2000" Height="2000">

or something big enough to cause the largest image to show. Also, I'm not sure if this matters or not, but I didn't put a MaxHeight/MaxWidth on my largest image.

This worked for me, thanks for halfway figuring this out because you lead me down the right path to getting deep zoom like functionality with databinding!

Answer 2

I've implemented binding to a collection of objects but am using a deep zoom collection for the images. I used the Excel tool but only gave it the path to the images (sorted by Name) and a name. I didn't use the cxml file, but did use all of the rest of the deep zoom image files. I added a property to the data objects in the collection, called Img. Img is the image number index in the image collection for that object (0 based). Then, my PivotViewer ItemTemplate binds to this property. The CollectionSource property is set to the path to my image collection xml file(it is named in the generated cxml).

            <Visualizer:MyPivotViewer x:Name="RedemptionPivot" >
                <Pivot:PivotViewer.ItemTemplates>
                    <Pivot:PivotViewerItemTemplate >
                        <Pivot:PivotViewerMultiScaleSubImageHost ImageId="{Binding Img}" CollectionSource="http://www.redemptionlive.com/Visualizer5/RedemptionCards_files/e3tbc2s0.4td.xml"/>
                    </Pivot:PivotViewerItemTemplate>
                </Pivot:PivotViewer.ItemTemplates>
                <Pivot:PivotViewer.PivotProperties>
                    <Pivot:PivotViewerStringProperty Id="Name" Options="CanFilter,CanSearchText" DisplayName="Name" Binding="{Binding Name}" />
                    <!--The rest of the properties go here-->
                </Pivot:PivotViewer.PivotProperties>
            </Visualizer:MyPivotViewer>