Custom pushpins and templating images
This is probably something simple but I am tearing my hair out at the moment.
I want to display pushpins on a map from a model. So I have created a template for the pushpins
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="Resources/Pushpins/img.png" Stretch="Fill"/>
</Grid>
</ControlTemplate>
Then use it to a binded collection as follows:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}" Template="{StaticResource PushpinTemplate}" />
开发者_运维技巧 </DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
But what I want to be able to do is change the image source via a binding but am not sure how I go about doing this. What I was intending to do was to use a converter to change the image depending on an id within the collection if that alters the best way to do this.
Edit:
I got a little further:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}"/>
<m:Pushpin.Template>
<ControlTemplate>
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding Type,Converter={StaticResource ImageConverter}}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</m:Pushpin.Template>
</m:Pushpin>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
If I move the pushpin template into the </phone:PhoneApplicationPage.Resources>
section then it fails. I am not sure why. I guess now I am trying to get to grips with my uinderstanding of how this all works
Just add the binding to the ControlTemplate
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding ImageUri}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
I would recommend a ImageUri (of type Uri) property that reflects what image to display, rather than using a converter. But a converter might also work, the bindings are done in the same way.
精彩评论