Silverlight Pivot and CxmlCollectionSource: getting individual item URL

Question

I have a CXML file describing a Pivot collection with a number of objects. Each object is described by a tag like:

<I Id="0" N="0" Source="tiles/684.xml">
  <Size Width="2604" Height="3140"/>
</I>

I load the CXML using a CxmlCollectionSource that I connect to a PivotViewer control. This all works fine.

Now I want to display the image that corresponds to any of the objects in the collection outside of the PivotViewer. I have added a MultiScaleImage control to my app to do that. It has a Source property that accepts URLs to DeepZoom XML files (i.e. to the files referenced by the Source attribute in the CXML).

But I don't know how to get that value because there does not seem to be any way to retrieve it via either PivotViewerItem or the CxmlCollectionSource. PivotViewerItem has a VisualImageId property, which is an index into the item collection, but that does not help much, since I cannot get from that ID to the Source attribute.

Again, the final objective is simply to display an image that corresponds to an object in a Pivot collection. If there is a better/easier way to do that, I would love to hear it!

score 0 · Answer 1 · answered Jan 09 '13 at 00:07

Not much documentation behind it, but here is how you bind to the image source, in your item templates:

<pivot:PivotViewerItemTemplate x:Key="smallTemplate" MaxWidth="300">
        <pivot:PivotViewerMultiScaleSubImageHost VerticalAlignment="Top" CollectionSource="{Binding [VisualCollectionSource][0] }" ImageId="{Binding [VisualImageId][0]}"/>
    </pivot:PivotViewerItemTemplate>
<pivot:PivotViewerItemTemplate x:Key="largeTemplate">
    <Grid Width="900" Height="1000" Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <pivot:PivotViewerMultiScaleSubImageHost  CollectionSource="{Binding [VisualCollectionSource][0] }" ImageId="{Binding [VisualImageId][0]}"/>
        <Grid Margin="20" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding [Name][0]}" FontSize="28" TextWrapping="Wrap"/>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding [Description][0]}" FontSize="20" TextWrapping="Wrap" Margin="0,20, 0, 0"/>
                <StackPanel Orientation="Vertical" Margin="20,20,20,0" Grid.Column="1" Width="300">
                    <TextBlock Text="Speakers" FontSize="24"/>
                    <ListBox ItemsSource="{Binding [Speakers]}" FontSize="22"/>
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</pivot:PivotViewerItemTemplate>

Note you'll probably only need the "smallTemplate" above, unless you are adding something fancy to the trade card. You'll need to set the template in your code behind:

pv.ItemTemplates = new PivotViewerItemTemplateCollection()
            {
                (PivotViewerItemTemplate) Resources["smallTemplate"],
                (PivotViewerItemTemplate) Resources["largeTemplate"]
            };

Silverlight Pivot and CxmlCollectionSource: getting individual item URL

1 Answers1