How can I drag and drop controls using a common method?

Question

I have the following XAML code, which creates two stack panels within a big parent Stack Panel. I would like to be able to drag each small stack panel within the parent bigStack panel.

XAML

<StackPanel BorderThickness="1" BorderBrush="Black" x:Name="bigStack">
        <StackPanel x:Name="smallStack1" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" ManipulationStarting="objectManipulationStarting">
            <TextBlock Text="John Doe"/>
            <TextBlock Text="CEO"/>
        </StackPanel>
        <StackPanel x:Name="smallStack2" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" ManipulationStarting="objectManipulationStarting">
            <TextBlock Text="Jane Doe"/>
            <TextBlock Text="CTO"/>
        </StackPanel>
</StackPanel>

C# backend:

private TranslateTransform dragtranslation ;

private void objectManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        dragtranslation.X += e.Delta.Translation.X;
        dragtranslation.Y += e.Delta.Translation.Y;

    }

private void objectManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
    {
       var stackDragged = e.OriginalSource as StackPanel;

        dragtranslation = new TranslateTransform();
        stackDragged.RenderTransform = this.dragtranslation ;


    }

Original Code found here (Official Microsoft UWP Documentation) but adapted (obviously wrongly) to suit my needs

PROBLEM 1

1) Drag smallStack1 for the first time: OK

2) Drag smallStack2 for the second time: Reverts back to the original position

PROBLEM 2

1) Drag smallStack1 for the first time: OK

2) Drag smallStack2 for the first time: OK

3) Drag either of the smallStacks again: Reverts back to the original position

You can check the problems in the .gif below:

WHAT I WISH TO ACCOMPLISH

Drag the controls using a common method, because I plan to dynamically create more controls inside the bigStack panel.

Answer 1

You are basically reinstantiating TranslateTransform everytime you click on an Item. That is the reason why when you click on the item second time, it navigates back to 0,0 which is the original position for TranslateTransform.

To Handle this in a easier way, this is what I would do.

1) I would give explicit TranslateTransform to the smallStackPanel's

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel BorderThickness="1" BorderBrush="Black" x:Name="bigStack">
        <StackPanel x:Name="smallStack1" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" >
            <StackPanel.RenderTransform>
                <TranslateTransform />
            </StackPanel.RenderTransform>
            <TextBlock Text="John Doe"/>
            <TextBlock Text="CEO"/>
        </StackPanel>
        <StackPanel x:Name="smallStack2" ManipulationMode="All" ManipulationDelta="objectManipulationDelta" >
            <StackPanel.RenderTransform>
                <TranslateTransform />
            </StackPanel.RenderTransform>
            <TextBlock Text="Jane Doe"/>
            <TextBlock Text="CTO"/>
        </StackPanel>
    </StackPanel>
</Grid>

And then all i need to do in codebehind is handle ManipulationDelta.

private void objectManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var stackDragged = e.OriginalSource as StackPanel;
    (stackDragged.RenderTransform as TranslateTransform).X += e.Delta.Translation.X;
    (stackDragged.RenderTransform as TranslateTransform).Y += e.Delta.Translation.Y;
}

Output:

Update

To add TranslateTransform from Code

StackPanel sp = new StackPanel();
sp.RenderTransform = new TranslateTransform();

Good Luck.