none
Image control: How to draw lines on an Image control and make them stick to the image?

    Question

  • I have an Image control, inside a Canvas.

    I'm giving the user the option to draw lines on the image, by controlling the Mouse events.

    When the user is in the "Draw Line Mode" I reserve the MouseLeftButtonDown, MouseMove, and MouseLeftButtonUp for drawing the lines.

    Otherwise I handle the image dragging inside the canvas, and also with the MouseWheel event, I handle the Zoom-in/out of the image.

    My problem is that my lines are not suck to the image, so when I have drawn some lines, and I drag the image to left/right/up/down, or zoom-in/out, the lines stay in their position, and won't move or get zoomed-in/out with the image.

    My question is "What's the best way to make the lines stick to the Image control, without rendering a layer over the Image control?" (Because I need to move the lines after they are drawn, and don't want to have them like a layer over my Image.)

    Thanks,

    Mahdieh,

    Friday, May 17, 2019 3:54 PM

All replies

  • If you want to move around a load of things you put them in a container - a bag or a box etc.

    Same with controls.

    An image is just a picture, it can't contain things.

    You could use a writeablebitmap and draw lines into that.

    But this would be more flexible if you have a container - a panel - you put the image in and then add lines to that.

    Then you move the panel round and everything moves.

    You could use a grid or a canvas.

    And you probably don't need an image if you have either.

    Both have a background property which is  Brush.

    WPF has several different brushes, one is an ImageBrush.

    Putting that together:

    <Canvas>
        <Canvas Name="ImageCanvas"
          Height="200" Width="300">
          <Canvas.Background>
            <ImageBrush ImageSource="Images\Something.jpg" />
          </Canvas.Background>
        </Canvas>
    </Canvas>

    You can then put whatever your lines are into ImageCanvas.

    If you add these to ImageCanvas.Children then the z-order increases as you add them in so each will be "on top" of the previous.

    If you really wanted to retain the image you could put that into ImageCanvas first and then the lines will appear above it. And be visible.

     


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    Saturday, May 18, 2019 2:28 PM
    Moderator
  • Hey Andy,

    Thanks for getting back to me.
    Actually my xaml is like this:

    <Canvas ClipToBounds="True"
    x:Name="ImageCanvas"
    MouseLeftButtonDown="_imageCanvas_MouseLeftButtonDown"
    MouseLeftButtonUp="_imageCanvas_MouseLeftButtonUp"
    MouseMove="_imageCanvas_MouseMove"
    KeyDown="ImageCanvas_OnKeyDown">
    <!-- The main image -->
    <Image x:Name="ImageControl"
    Source="{Binding ImageSource}"
    Canvas.Left="{Binding ImageRect.X}"
    Canvas.Top="{Binding ImageRect.Y}"
    Width="{Binding ImageRect.Width, Mode=TwoWay}"
    Height="{Binding ImageRect.Height, Mode=TwoWay}"
    Visibility="{Binding ImageVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
    KeyDown="ImageCanvas_OnKeyDown" />
    

    I can't have the image as the canvas background brush, since I'm controling so many other things with that "ImageControl" itself.

    Wednesday, May 22, 2019 3:05 PM
  •  Please read the last sentence of my post again - it covers this.



    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    Wednesday, May 22, 2019 3:12 PM
    Moderator