Tipp: how to animate a MapPolygon object?

[Bernd Welter]

Hi there,

in the recent weeks I used some of my self-developed clients which are based on the xServer.NET control.
Some parties saw that I animate the MapPolygon objects and they asked me how to achieve this.

sample - click to see the animation

Well - here's what you'd have to do (I assume that you already know how to display a static polygon and just want to add the animation) :

• Include required namespaces System.Windows.Media and System.Windows.Media.Animation

  Code: Select all

  using System.Windows.Media;
  using System.Windows.Media.Animation;

• Define global objects of type System.Windows.Media.Animation.Storyboard and System.Windows.Media.Animation.DoubleAnimation

  Code: Select all

  DoubleAnimation animation = new DoubleAnimation()
  {
       From = 4,
       To = 0,
       Duration = TimeSpan.FromMilliseconds(1500),
       FillBehavior = FillBehavior.HoldEnd,
       RepeatBehavior = RepeatBehavior.Forever
  };
  Storyboard storyboard = new Storyboard();

• Constructor Form(): Add the animation to the storyboard

  Code: Select all

  storyboard.Children.Add(animation);
  Storyboard.SetTargetProperty(animation, new System.Windows.PropertyPath("(Line.StrokeDashOffset)"));

• Later in the source when you build the objects: Create the polygon object and set some of the properties which are needed for the animation:
• how to create a proper point collection in xServer2

  Code: Select all

  Polyline polyline = (Polyline)response.polyline.plain;
  
  System.Windows.Point[] arrPoints 
  = polyline.polyline.Select(p => new System.Windows.Point(p.x, p.y)).ToArray();
  
  PointCollection pc = new System.Windows.Media.PointCollection(arrPoints);

• how to create a proper point collection in Developer (using Newtonsoft and Net Topology Suite)

  Code: Select all

  JsonSerializer serializer = GeoJsonSerializer.Create();
  JsonTextReader jsonReader = new JsonTextReader(new StringReader(routeResponse.Polyline));
  
  NetTopologySuite.Geometries.Geometry geometry
   = serializer.Deserialize<NetTopologySuite.Geometries.Geometry>(jsonReader);
  
  System.Windows.Point[] arrPoints
   = geometry.Coordinates.Select(p => new System.Windows.Point(p.X, p.Y)).ToArray();
  
  PointCollection pc = new PointCollection(arrPoints);

• and use the point collection

  Code: Select all

  // now use the point collection
  MapPolyline mp = new MapPolyline()
  {
    Points = pc,
    MapStrokeThickness = LINEWIDTH,
    Stroke = System.Windows.Media.Brushes.Blue,
    Opacity = 0.5,
    ScaleFactor = 0.1,
    StrokeLineJoin = PenLineJoin.Round,
    StrokeStartLineCap = PenLineCap.Round,
    StrokeEndLineCap = PenLineCap.Round,
    StrokeDashCap = PenLineCap.Triangle,
    StrokeDashArray = new DoubleCollection { 2, 2 },
    IsHitTestVisible = false,
    ToolTip = "Route"
  };

• Connect the polygon object to the storyboard's animation and start the animation:

  Code: Select all

  Storyboard.SetTarget(animation, mp);
  storyboard.Begin();

Of course you can find further fancy samples on Oliver's github...

Best regards,
Bernd