Which Component should I use? RRS feed

  • Question

  • Hi to all,

    I'm very new to C# and WPF, but I thought that jumping in would be the best way to learn.  I need to display a jpeg image and then need to be able to draw/render circles on that image, preferably on a different layer (I'm coming from a Java background). What I mean, is that I want these circles to be visible to the user with the image in the background, and I want to enable the user to move them on the image, and do all this without affecting the image itself.  

    What I'm interesting in writing, is a piece of software that takes an image with dots on it, and identifies these dots.  I don't want to use any third party imaging tools, as I think I can develop the algorithm on my own, but I need to know which component I can use to display that image, and to then render these circles on it?



    Wednesday, September 16, 2015 3:49 PM


All replies

  • What you want to use is the Image control placed inside either a grid or a canvas.  You would then add the circles as children of the grid/canvas but ensure that they are on top.  WPF doesn't really have the concept of a layer but the zorder property will allow multiple controls to be present and control the visibility (or layer) they are on.

    Lloyd Sheen

    Wednesday, September 16, 2015 4:47 PM
  • So even though I add an Image component ON TOP of the Canvas component, I will be able to get the "circles" I place on the Canvas to display on top of my image in my Image Component?

    Also, do I have to worry about placing scroll bars, or will the Image component insert these for larger images?


    Wednesday, September 16, 2015 5:06 PM
  • Components can be "layered" in WPF but coding the layers is up to you.

    If you want scrollbars you need to put the components in a panel (Gird and Canvas are Panels) which handles the scrollbars when the contents of the panel exceeds the size of the panel.  

    Lloyd Sheen

    Wednesday, September 16, 2015 5:43 PM
  • Just to repeat, I have an image that has dots that I want to load into my viewer and then render around the dots a circle when they have been identified.  Amongst other things I think I will require that the canvas and image component must align with their top left corners (so that I can render these circles easily and correctly).

    1) To accomplish this I thought I would do the following (Would this work and would it be recommended?)

    > is to mean "on top of" ie bottom > top

    A new Window > Canvas on the entire Window > ScrollViewer on the entire Canvas > Image component (it may be smaller than the bottom canvas because of the scrollbars) > A canvas again (on which I render and move the circles) (A second canvas because I hope it will be as large as and aligned with the Image component underneath).  Would this be recommended?

    2)To accomplish the effect of moving a circle (if my code doesn't place it correctly on the image) in Java I would have to write a second thread that perpetually calls the Graphics component (every ~1 millisecond) of the canvas and re-draws the canvas contents (all the circles in their proper locations).  Will it work similarly in C#?


    Wednesday, September 16, 2015 7:04 PM
  • MarcinMR,

    Josh Smith has a nice DragCanvas explained in CodeProject http://www.codeproject.com/Articles/15354/Dragging-Elements-in-a-Canvas

    I have modified and use it and lets you add items, change their Z-Index, etc. Take a look, might help you.

    noorbakhsh حميد نوربخش

    Wednesday, September 16, 2015 10:37 PM