I'm building an application for users to create game terrain using hex tiles. I have a tree view with the various tile types and have successfully managed to load the images that I want to use (png's) into the tree as the node images.
I have used the code from here http://www.codeproject.com/Articles/14948/Hexagonal-grid-for-games-and-other-projects-Part as a basis for my project, although I have expanded it to allow for corner, and both "types" of half hexes.
What I want to accomplish is to drag a tile type from the Tile Catalogue tree view onto the hex grid drawn, and for that image to snap to the grid and align itself correctly. I imagine that the actual image to be drawn on the grid will end up being loaded separately as the treeview images are obviously very small versions of the original images.
Now I know there's a whole heap of items in there that I don't know how to do as yet but the first in the list is the drag and drop. All the searching I've done has turned up drag and drop examples for dragging within the treeview, or from one control to another and I'm not sure that those examples are relevant.
Can someone point me in the right direction to begin playing with this myself or give an example I could base what I need to do on?
Related
We have images created off a a high resolution scanner for showing defects on glass products. Our C# application is used by clients to manage defects. Many customers are having difficulties translating the image properties like actual length provided. I am working with a base image with a canvas on top. I also have a grid with a list of properties which when selected, I want to show a visual on how to translate the selection by say, drawing a line on the canvas in a manner that depicts the translation.
It turns out that the requirement was misconstrued and what was needed was creating simulations on separate images that I had to create and load. Next time I will try to think outside the box.
I am adding an unknown amount of images to a canvas at runtime via code behind but I suspect they are laying on top of each other so only 1 image is visible.
I am converting multiple page PDF's into jpg images with ghostscript and wish to add them to a canvas in a vertical sequential row inside a scroll viewer.
Currently I am just rolling through a for loop generating each jpg and adding it to the canvas with canvas.children.add()
Is there a common way to ensure elements added to a canvas do not overlap? Or a common method people use to make sure children.add places the element in the right position?
I am thinking inside my for loop I will need to see what else exists on the canvas and add the heights together and palace my new image at the correct position but I am not sure how this is done. Is anyone able to steer me in the right direction?
You could use a StackPanel instead of the Canvas and add the images in there. The StackPanel will then place the images next to each other (or one under another, depending on its Orientation).
Is there any other way to do a multitouch drag and drop operation in WPF other than using SurfaceDragDrop? I'm currently using this as reference: http://msdn.microsoft.com/en-us/library/ee957380.aspx
The problem I have with SurfaceDragDrop:
It converts everything into a scatter item, which looks somewhat weird in my application context
The width and height of the dragged item seems to depend on where it's being dragged from - I can only drag it from a rather small area, but I need a bigger preview. Specifying the source as something bigger (i.e. the parent element) results either in a element thats too big or (/and) an element that's not under the touchpoint
This question already exists:
Closed 10 years ago.
Possible Duplicate:
Click and drag image to image grid?
I have a few image boxes in my form and I was wondering how can I would place a grid across the form that have a bunch of lines so the whole grid is a bunch of 64 x 64 squares. I need it so I can select an image and place it onto a specific square using the mouse and be able to go through the whole grid and check for example how many of one specific image is on the grid. To give you a better idea of what I'm doing is that I have a few image boxs which contain different 64 x 64 images. There is another image box that shows the image I clicked on last, which is like a brush because whenever you left click a box in the grid it pastes it into that specific box in the grid. I also need it so I can right click the box and delete the image in the box the mouse is over. Finally I need to be able to read all the images in the box and output it into a file that I can later open. I'm using it to create land in a game, which the program will output the needed texture and and where ground level is for the boxs which make up the whole terrain. What I need to know is what kind of thing should I do to be able to do this? I've been trying the past few hours on how I make the boxs and how to know where the mouse is and stuff and I'm completely stuck. A simple idea would be helpful. I actually don't know what control(s) I should use for this so an idea that doesn't involve any grid controls is still very helpful.
I don't know if it's the best possible idea, but you could use FlowLayoutPanel with WrapContent set to true and FlowDirection = LeftToRight. I dont know about Drag&Drop operation though (never done it with FlowLayoutPanel, buth there are some nice tutorials out there).
You can track your mouse position using mouse events. If you don't want to do that:
You can get absolute position at any time using:
Point currentPos = System.Windows.Forms.Cursor.Position;
Then, to get relative position on your (current) control:
Point relativeLoc = this.PointToClient(currentPos)
... and then, to get control over which your mouse is on FlowLaoutPanel:
Control c = flowLayoutPanel1.GetChildAtPoint(relativeLoc);
I need to display images on top of each other. This can either be a composite\layered image or separate images. This will typically be a larger image with smaller images on top. With the composite\layered approach the smaller images would each need to be a separate (and accessible) layer. With the separate images approach the smaller images are on top with a transparent background. With either approach the smaller images must be accessible i.e. can be moved (dragged) or deleted. The app needs to display these images together (as if it was one image) and keep track of the coordinates (position) of the smaller images.
The current (proof-of-concept) solution has a PictureBox control that displays the large image and a treeview. Nodes are dragged from the treeview to the picture box and rendered using the graphics DrawString or DrawImage methods – these draw the smaller images. The problem is that once the smaller image is drawn I cannot get back to it as a separate graphics object. The picture box “sees” it as part of the current image.
I need to do this in C# (WinForms or WPF). And the image type must be a common and open format i.e. not proprietary. Preferably no 3rd party controls.
Any suggestions\guidance?
WPF would be the technology of my choice for this project.
Drag & Drop way nicer, without flickering, better concept
Rendering directly on HW, way smoother for image manipulation
General idea of the implementation:
MVVM pattern
ViewModel holding your layer information
ItemsControl bound to the collection of Small overlay Images holding a DataTemplate which visualizes the images thour custom UserControl based on a Thumb (for drag & drop functionality) displayes the small images on top.
Easy to add functionality to drag, edit, hide each small image seperately.
The problem is that once the smaller image is drawn I cannot get back
to it as a separate graphics object. The picture box “sees” it as part
of the current image.
That behaviour is perfectly normal. GDI drawing does not work with objects. To do what you are asking, you need to track any event that can cause a change in the final image and when such an event occur, you need to draw the whole image from the begining, including the first image (assigning the background image, I guess).
May be create picture box per image. The transparent background will give the effect of single image.