CODEWITHSUNDEEP
c#wpfdrawing
Yochai Timmer
Yochai Timmer

Reputation: 49251

Draw scaled picture over an Image

I have a WPF image, and I'm trying to draw something on it (Lets say a smiley, 2 blue circles for eyes and and a red ellipse for the mouth). I've made a small Rectangle over the image, and made it stretched.

<Grid Name="mGrid">
    <Rectangle Height="0" HorizontalAlignment="Stretch" Stretch="Fill" Name="mImageFrame"  VerticalAlignment="Stretch" Width="0" />
</Grid >

I used a DrawingBrush to draw the circles in the rectangle.
Obviously this is wrong, because I have 2 problems:
1. The DrawingBrush seems to have a different scale. It will scale according to the largest item it's drawing.
2. I can only use one brush color.

So, how can I somehow draw over an image so it keeps the same proportions ?
And how can I use a different color for each shape ?

Upvotes: 2

Views: 965

Answers (2)

Clemens
Clemens

Reputation: 128060

You can put Shapes on a Canvas that overlays the Image, and put the whole thing in a Viewbox. This requires that you define absolute coordinates by either setting the Image's Stretch property to None (and thus force the Image size to that of its Source bitmap) or explicitly set is Width or Height.

<Viewbox>
    <Grid>
        <Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
               Stretch="None"/>
        <Canvas>
            <Ellipse Canvas.Left="420" Canvas.Top="480"
                     Fill="Red" Width="100" Height="100"/>
            ... more shapes here ...
        </Canvas>
    </Grid>
</Viewbox>

Upvotes: 2

Sheridan
Sheridan

Reputation: 69959

One solution would be to put both the drawing and the Image into a ViewBox control. You can find out more about the Viewbox from the Viewbox Class page at MSDN. Basically, it provides the same stretching capabilities as the Image control.

You may also like to view the Shapes and Basic Drawing in WPF Overview page at MSDN.

Upvotes: 0

Related Questions