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.

score 0 · Accepted Answer · edited Jan 21 '17 at 03:03

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

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>

using observablecollection and cxml in 1 pivotviewer

1 Answers1