Display an Image with an overlaid polygon

Question

This seems simple, but it's not working for me. I'd like to display an image from my DB, and overlay a polygon from the same DB, using the same coordinate system.

<Image Name="imgColl" Stretch="Fill" MaxWidth="190" MinHeight="70">
    <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <ImageDrawing ImageSource="{Binding ImageData}" Rect="0,0,590,590"/>
                    <GeometryDrawing Geometry="{Binding Coordinates, StringFormat=M\{0\}}">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="4" LineJoin="Bevel" Brush="OrangeRed"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>

I find that I have to specify the Rect on the ImageDrawing object. This is unfortunate because the images I'm loading are of different sizes. But if I don't specify the Rect, the image doesn't appear when running the app. If I make the image big enough (as in the example), the image does appear, and it gets resized to fit my control, but the polygon coordinate system doesn't seem to match.

Also, I've used StringFormat to put an M in front of the Geometry specification, so that it comes out like this: "M50,50,12,50,30,30,30,100,100,100". If I specify that explicitly, the polygon appears, but if I bind it with the same string, the polygon doesn't appear.

Not sure if those two problems are related to one another--I'll have to re-evaluate when either of the two is fixed. Thanks for any guidance you have to offer!

Answer 1

The StringFormat setting of the binding is ignored here, since the target type of the binding is not a string, but a Geometry.

The string returned by your Coordinates property is implicitly converted into a Geometry, because Geometry has a [TypeConverterAttribute(typeof(GeometryConverter))] attribute setting, but the StringFormat won't be applied . You will need to add a binding Converter.

For the other problem concerning ImageDrawing.Rect: as far as i've understood ImageDrawing, you always have to specify the drawing rectangle, it is Rect.Empty by default. Maybe you can also bind the Rect property to some property of your data object.

Anyway, wouldn't it be a lot simpler to define something like this, in order to maintain a common coordinate system for image and polygon?

<Viewbox MaxWidth="190" MinHeight="70">
    <Canvas>
        <Image Stretch="None" Source="{Binding ImageData}" />
        <Path Stroke="OrangeRed" StrokeThickness="4" StrokeLineJoin="Bevel"
              Data="{Binding Coordinates}" />
    </Canvas>
</Viewbox>