How to get correct position of DrawingImage in WPF

Question

I have the code:

<Canvas>
    <Image Canvas.Left="0" Canvas.Top="0">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black" Thickness="1" />
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <LineGeometry StartPoint="50,50" EndPoint="100,50">
                            </LineGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
</Canvas>

I hope it can be a line start from 50,50 to 100,50, but finally it starts with 0,0 to 50,0 I seems StartPoint in GeometryDrawing makes no sense? Does anyone know the solution? I don't want to modify Canvas.Left and Canvas.Top.

Why are you using a DrawingImage instead of shapes? Drawing a `Line` control would be so much simpler. — Clemens, Jul 18 '13 at 09:16
@Clemens well that's just an abstract code, I know shape is much more simple but I need to draw millions of lines on the screen with real time control, that's for a CAD soft, shape is slow. — Enzojz, Jul 18 '13 at 09:19
Then you should take a look at how to draw in the visual layer. Start reading [WPF Graphics Rendering Overview](http://msdn.microsoft.com/en-us/library/ms748373.aspx) and [Using DrawingVisual Objects](http://msdn.microsoft.com/en-us/library/ms742254.aspx). — Clemens, Jul 18 '13 at 09:21
Thank you your solution looks interesting but I hope to get directly help from here... — Enzojz, Jul 18 '13 at 09:32

score 2 · Accepted Answer · answered Jul 18 '13 at 10:34

Apparently a DrawingImage is adjusted to the bounds of the actually drawn geometry. To get around that, you may replace the LineGeometry by a PathGeometry that contains the point (0,0), but does not draw it:

<GeometryDrawing.Geometry>
    <PathGeometry>
        <PathFigure StartPoint="0,0">
            <LineSegment Point="50,50" IsStroked="False"/>
            <LineSegment Point="100,50"/>
        </PathFigure>
    </PathGeometry>
</GeometryDrawing.Geometry>

Note that StartPoint="0,0" is the default value. It's just here for clarity.

score 0 · Answer 2 · answered Jan 16 '14 at 16:42

I have had good results by drawing a rectangle geometry with a transparent brush around everything. You could do this composing both (rectangle and path) inside a DrawingGroup.

<Canvas>
    <Image Canvas.Left="0" Canvas.Top="0">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>

                    <DrawingGroup>

                    <GeometryDrawing Brush="Transparent"/>
                         <RectangleGeometry>
                             <!-- here you create a rectangle with desired bounds -->
                         </RectangleGeometry>
                    </GeometryDrawing>

                    <GeometryDrawing>
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black" Thickness="1" />
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <LineGeometry StartPoint="50,50" EndPoint="100,50">
                            </LineGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                    </DrawingGroup>

                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
</Canvas>

How to get correct position of DrawingImage in WPF

2 Answers2