using observablecollection and cxml in 1 pivotviewer

Question

I am new to pivotviewer and also to silverlight. I have created a observablecollection which has
the properties

public string StaffName { get; set; }
   public string Location {get;set;}

using a method BuildCollection() I bind it to mainpage.xaml in the following manner:

<pivot:PivotViewer x:Name="pViewer">
  <pivot:PivotViewer.ItemTemplates>
    <pivot:PivotViewerItemTemplate MaxWidth="300">
      <Border Width="300" Height="300" 

        <TextBlock Text="{Binding StaffName}" 
                        FontSize="90"
                        FontWeight="Bold"
                        Foreground="White"
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center" />
      </Border>
    </pivot:PivotViewerItemTemplate>
  </pivot:PivotViewer.ItemTemplates>
</pivot:PivotViewer>

Now I want to bind the CXML file cities.cxml which resides in the clientbin which has the images and also the property called Location. I want to create a link between the collection and the cxml so that when i deepzoom the collection which shows the staffname it should fade into the image of the city which is in the cxml collection. for ex Location is london in observable collection I should be deepzoom it to the image of london from the cxml file. Can anyone help in achieving this? Thanks.

Answer 1

1. First the observable collection was bound. Here I added a property called img in the observable collection which represents the image index in the xml file

2. I bound the xml file to another template and in the subimagehost I bound the img index therefore on deepzooming the observable collection I got the image also

   <pivot:PivotViewerItemTemplate>
               <Grid Width="800" Height="800" Background="LightGray"  MaxWidth="800">
   
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="200"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <Rectangle Fill="{Binding StaffName,  Converter={StaticResource xconv}}"/>
                   <pivot:PivotViewerMultiScaleSubImageHost CollectionSource="http://localhost:65535/ClientBin/Map_files/wr5bbwrn.dre.xml" ImageId="{Binding  img}" >
   
   
                   </pivot:PivotViewerMultiScaleSubImageHost>
   
                                          <TextBlock Text="{Binding Vehicle}"
                       FontSize="40"
                       Margin="150,200,150,150"
                       Grid.Column="1"
                       VerticalAlignment="Bottom"
                       HorizontalAlignment="Center"/>
               </Grid>
           </pivot:PivotViewerItemTemplate>