开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜