Move a button from point A to point B using XAML/C#

Question

Generally speaking what's the way to move (animate, transform, whatever words; no matter) a button from point A (by user click as a source) to point B (by user click as a target) in C#/XAML ? (Imagine a board game such as like Chess in order to move a piece from A to B ).

I'm working on a project with the following specifications:

My methodology is MVVM : so I've created a custom button (derived from ButtonBase ) to simulate a piece which is assigned by a delegate command (to move) for each cell in a grid as well as dependency properties and INotification for events. Not to mentions that I've never used from Canvas and Panel in this case. I also used from StoryBoard which is called from within dependency object to trigger the animation.

Having said that I'm looking for a way to move a button from A to B by user click. Keep in mind I know about Transform to move an object however how could be it possible to specify a source (by first click) and then specify the To to target (by next click) and how to manage the back and forth events?

Answer 1

For any kind of animations keeping MVVM concept clear you should use Storyboards and Animations . And if you really want to move your button in space - use Canvas . Within Canvas you can create awesome animations.
Simple example:

<Canvas>
    <Button Canvas.Left="1" Width="100" Height="100" Content="Flying button..">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation                                
                        Storyboard.TargetProperty="(Canvas.Left)"
                        From="1.0" To="100.0" Duration="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Canvas>

And result: