Which Component should I use?

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?

Thanks

---

MarcinMR

Answer 1

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

Answer 2

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?

---

MarcinMR

Answer 3

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

Answer 4

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#?

---

MarcinMR

Answer 5

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 حميد نوربخش