Windows 8 App: "Snapping" Drag and Drop for Card Game

Question

After trying to use the following snippet to move cards (Images right now) around I was not satisfied with the result.

Card.ManipulationDelta += (o, args) => {
    var dragableItem = o as Image;
    if (dragableItem == null) return;
    var translateTransform = dragableItem.RenderTransform as TranslateTransform;

    if (translateTransform == null) return;
    translateTransform.X += args.Delta.Translation.X;
    translateTransform.Y += args.Delta.Translation.Y;
};
Card.RenderTransform = new TranslateTransform();

The control had a funny behavior to be accelerated and would move / slide a bit after "dropping" it. Although cool I do not want this behavior and therefore changed my mind: what I am looking for is a solution to define specific areas for one active card, a bench for a few more cards and stacks for the deck, such that one can freely drag one card but it can only be dropped if it is above these certain areas otherwise it will get back to the area designated for the hand cards.

What could I try to implement this desired behavior?

Answer 1

I think you and I are in the same boat, I'm working on a Metro card game application and I'm not relly happy with what I've found as far as Drag and Drop goes. My inital approach was going to be to have a grid \ stackpanel or other underlying framework that the user could drag a card image ( acually a custom control ) over and then the image would snap to that framework when the user let go. I have not yet found a suitable way to obtain this behavior however because it seems like drag-drop of controls from one parent to another is not supported in Metro.

As far as your question goes, the sliding effect that you are refering to is most likely intertia, You can disable this by not setting the TranslateInertia mode, for example

    Ellipse el = new Ellipse();
    el.Fill = new SolidColorBrush(Windows.UI.Colors.Magenta);
    el.ManipulationMode = (ManipulationModes.All ^ MainipulationModes.TranslateInteria);

    //more code to add your ManipulationDelta handler etc.

You can also gain some control over the Interia by adding a handler for MainipulationInertiaStarting, though just setting e.Handled = true in the handler does not disable interia entirely for me as others have suggested.

I'd love to hear back from you and see what approach you've come up with for snapping cards, at this point I'm considering just using a large Canvas object and writing my own customer handlers for mouse moved to get card objects to be draggable and then snap into a row or other location on the playing board.

Cheers,

James