Custom VePushPin Wpf

Sep 29, 2010 at 3:45 AM

Hi. Does anyone know what must I do in order to add a VePushPin with a custom image i want? I have go through the Discussions board but i can't find any explain. And I tried using the example of the databindingsample.

Sep 29, 2010 at 3:53 AM


Did you see this thread?

DataBindingSample shows how to create a custom pushpin by deriving from VEPushPin. If you look at CustomPushPin.xaml in the Themes folder, you'll see the custom control template. You can modify that as you want in order to display or bind to your image.

Sep 29, 2010 at 6:01 PM

Hi joshb,

I tried followed the CustomPushPin.xaml examples. As I am still very new to wpf, I would like to clarify some problem I faced. In this case would be, I would want to set the PushPin with a custom image randomly. As in the image file name can be retrieve from a database where it has many different images. For my case where should i put the filename of the image file? What I had think is that it cannot be in CustomPushPin.xaml as it is a Template. Should I do a data binding at the mainwindow? And I only have one template to follow and all i need is to just change the image file name randomly. Do I still need the templateselector?

Sep 29, 2010 at 6:12 PM

Hi weisomething,

Thanks for the clarification.

In order to do what you want, I would recommend the following:

* Add a DependencyProperty called ImageURI which is of type URI to CustomPushPin.cs
* Modify CustomPushPin.xaml to display an Image and bind the Source to the ImageURI DP you added
* Modify GetAnchorOffset() as necessary in CustomPushPin.cs so the center of the pushpin is where you want it.

This gives you a PushPin that will use an image instead of the provided PushPin graphics.

Now you can use the example in DataBindingSample for setting up binding from the map to a collection of business objects:
* Modify the business object to contain a URI property and then initialize the collection with data from your database.
* Modify one of the DataTemplates to use your new pushpin and bind the ImageURI property to the property name from your business object.
* Remove the template selector and ItemTemplateSelector property from the map and reference your new DataTemplate.

That should get you started in the right direction. If you have trouble with syntax for binding, there are a lot of WPF data binding tutorials out there. All of that applies to InfoStrat.VE as well.

Sep 29, 2010 at 6:31 PM

Thanks for the fast response. I will try it again =).

Sep 29, 2010 at 7:01 PM
Edited Sep 30, 2010 at 3:23 AM

Hi. I got it working! The following will be the examples:

In CustomPushPin.cs:

#region ImageURI DP

public BitmapImage Source
        string strURI = (string)GetValue(CustomPushPin.ImageURIProperty);
                return new BitmapImage(new Uri(strURI));
    set { SetValue(CustomPushPin.ImageURIProperty, value); }

public static readonly DependencyProperty ImageURIProperty =
            DependencyProperty.Register("ImageURI", typeof(BitmapImage), typeof(CustomPushPin), new UIPropertyMetadata(null));


protected override Point GetAnchorOffset()
    return new Point(this.ActualWidth / 2, this.ActualHeight);

In CustomPushPin.xaml at "HERE"<Button Name="PART_button" .......> HERE </Button> Add in:

    <Image Source="{TemplateBinding ImageURI}"/>

In your main program:

1. Create an object of your custom pin

2. Set your source link

And you are good to go =).