silverlight-5.0cxml-collectionxml

using observablecollection and cxml in 1 pivotviewer


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.


Solution

    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>