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.
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>