WPF snapping controls

Question

Hello everyone,

my current free-time project, in order to dive into WPF MVVM, is a "digital" copy of an old puzzle I used to play a lot in my childhood. It basically is a simple puzzle where one has to fill a given space with different kind of pieces so the whole space is filled. But with the extra twist of being in hexagonal space.

Just to illustrate, this is what it currently looks like in WPF:

So basically there is a number of predefined pieces(like the orange one above) which can be "plugged" into the given grid(the gray stuff above).

So the result might look something like this:

I want the user(probably only me^^) to be able to drag and drop the pieces into the grid. I want the dragging to look natural meaning having the correct offset while dragging depending on where the user clicked the piece.

Both grid and molecule are the same control, a custom hexagonal panel control derived from the WPF Panel class.

The problem is on how to do the "plugging in" and especially the "unplugging".

I have two ideas on how I might tackle this:

1. Just color the cells in the grid and hiding the original piece
   • Pro:
     • Zero cost perfect alignment of the cells
   • Cons:
     • Recreating the piece at the right spot with the correct mouse offset if dragging out, seems impossibly? hard to do
2. Snapping the piece to the grid and show it on top
   • Pro:
     • Dragging out is a simple dragging operation, just as dragging in
   • Disadvantage:
     • Somehow have to align the piece with the underlying grid, some kind of snapping
       
       

So which approach should I take? Even more important how can I even implement this in WPF? Especially using a clean MVVM way.


Thanks so much for your help! Any input is highly appreciated!

EDIT:
Thanks Aran, I thought so too.

But how do I actually implement this now?

• How can I actually get the coordinates?
• All the orange circles are linked, so how can I "move" or better "plug" them in as one piece?

Answer 1

Im inclined to go with the second idea. a simple snapping would just be to test if the centre point of the circle you are dragging is within some tolerance factor of a circle on the grid and if so snap them.