一般的な方法を使用してコントロールをドラッグアンドドロップするにはどうすればよいですか？

Question

次のXAMLコードは、大きな親スタックパネル内に2つのスタックパネルを作成します。私は、親のbigStackパネル内の各小さなスタックパネルをドラッグできるようにしたいと思います。

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＃のバックエンド：

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 ; 


    } 

オリジナルコードは

私のニーズに合うように（明らかに誤って） here（オフィシャルマイクロソフトUWPのドキュメントを）見つけたが適応します

問題1

初めて1）ドラッグsmallStack1：OK

二度目の2）ドラッグsmallStack2は：元の位置に戻り

問題2

1）smallStack1を初めてドラッグ：OK

2）初めてsmallStack2をドラッグします。OK

3）再びsmallStacksのいずれかをドラッグ：私は

を達成するために願い事はなに

：元の位置に

を元に戻しますが、以下の.GIFで問題を確認することができます

一般的な方法でコントロールをドラッグします。なぜなら、私はbigStackパネル内にさらに多くのコントロールを動的に作成する予定だからです。

Answer 1

基本的には、アイテムをクリックするたびにTranslateTransformを再インスタンス化しています。そのため、アイテムを2回目にクリックすると、TranslateTransformの元の位置である0,0に戻ります。

これをより簡単に処理するには、これが私のやり方です。

1）私はsmallStackPanelさん

<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> 

に明示的なTranslateTransformを与えるだろうし、私は分離コードで行う必要があるすべては、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; 
} 

出力：

更新

コード

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

グッドラックからTranslateTransformを追加します。