Visual Model

While trying to implement the ImageMarkerSeries we ran into some problems when trying to put an LoadedImageSurface peg into a CompositionSpriteShape hole, and got InvalidOperationException. For some unknown reason, that composition object does not accept that type of brush, only "color" brushes like solid and gradient.

This was unfortunate; the only other candidate is to "move up" the hierarchy and use Visual subclasses instead. Our friend SpriteVisual can accept the LoadedImageSurface but it has a different API than its composition counterpart.

At first we tried the TransformMatrix manipulations in place for CompositionSpriteShape but this just did not work out. So we needed a fresh start.

A New Hope

Fortunately there's more than one way to get the Linear Algebra to come out, and we put it all to the test here! Instead of relying on the "container" components to "do the math" we pushed it all the way down into the composition animation system!

Here are the key features:

• Use Identity matrix for all Visual elements, including the ContainerVisual.
• Global CompositionPropertySet for transforms etc.
  • ModelX (Vector3) the model X components taken from the Matrix3x2 we already maintain.
  • ModelY the model Y components.
  • ProjX and ProjY the projection matrix counterparts.
  • MarkerWidth (Scalar) from the series property (in category axis units).
  • AspectRatio (Scalar) from the image's actual dimensions when loaded.
• Animations to drive the model and projection components.
  • Separate Vector3KeyframeAnimation for each matrix "column" (4).
• Per-item CompositionPropertySet for local values.
  • Position is the current position in model coordinates.
  • Everything else comes from the "global" property set.
• Animations to drive each item's Offset and Size in XAML (px) units.
  • Offset is ExpressionAnimation with "standard" MP transformation using values in the two property sets.
  • Size is ExpressionAnimation using the AspectRatio and MarkerWidth to size the image's rectangle.