Question

I want to animate a “car” dot on a Bing map. I can easily draw multiple dots as the item travels around, but I want to have a single dot move around per car.

XAML

    <m:Map Name="myMap" Grid.Row="2" MouseClick="myMap_MouseClick" UseInertia="True">
    <m:MapLayer x:Name="carLayer" />
    </m:Map>

Some code:

private void AddCarDot(double latitude, double longitude)
{
    Ellipse point = new Ellipse();
    point.Width = 15;
    point.Height = 15;
    point.Fill = new SolidColorBrush(Colors.Blue);
    point.Opacity = 0.65;
    Location location = new Location(latitude, longitude);
    MapLayer.SetPosition(point, location);
    MapLayer.SetPositionOrigin(point, PositionOrigin.Center);

    carLayer.Children.Add(point);
}

private void cmbCar_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(cmbCar.SelectedItem != null)
            {
                Binding binding = new Binding("CarLocation");
                binding.Source = cmbCar.SelectedItem;
                binding.Mode = BindingMode.OneWay;
                carLayer.SetBinding(MapLayer.PositionProperty, binding);
            }
        }

The CarLocation is a property on the Car object of type Location.
However that does not work and I’m not quite sure how to get the “car” to move around the map. Can someone point me in the right direction?

Answer 1

Well you’re question kind gets cloudly when a mysterious “taxiLayer” appears positively gets muddy when you want set a binding on it instead of the “point” (which I guess represents a car).

What needs to happen is you are using the MapLayer.Position dependency property as an attached property. When the UIElement to which this is attached is a child of a MapLayer map layer knows how to layout it.

So the question is how would assign a binding to this property so that when the value of the bound object changes the position is updated. I’m going to make an assumption the Elipse created in the earlier part of the code is available as field I’ll call car. Then the code might look something like this:-

private Elipse AddCarDot(object source)
{
    Ellipse point = new Ellipse();
    point.Width = 15;
    point.Height = 15;
    point.Fill = new SolidColorBrush(Colors.Blue);
    point.Opacity = 0.65;
    MapLayer.SetPositionOrigin(point, PositionOrigin.Center);
    point.SetBinding(MapLayer.PositionProperty, new Binding("CarLocation") {Source = source});
    carLayer.Children.Add(point);
}

private void cmbCar_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if(cmbCar.SelectedItem != null)
    {
        AddCarDot(cmbCar);
    }
}

Now assuming you object that has a CarLocation property implement INotifyPropertyChanged so the binding can be alerted when CarLocation changes the dot will move appropriately.