TranslateTransform用于在Silverlight中拖放 [英] TranslateTransform for drag and drop in Silverlight

问题描述

我们试图在Silverlight（3）中实现拖放。我们希望用户能够将元素从树形视图拖动到UI的另一部分。父元素是一个网格，我们一直在尝试使用一个TranslateTransform以及MouseLeftButtonDown，MouseMove（等）事件，如各种在线示例所推荐的。例如：

http://www.85turns.com/2008/08/13/drag-and-drop-silverlight-example/

我们正在IronPython这样做，但这应该或多或少无关紧要。拖动启动正确启动，但是我们拖动的项目出现在错误位置（从光标右侧和向下偏移了几百个像素），我无法为我的生活找出原因。 / p>

基本xaml：

 < Grid x：Name =layout_root > 
< Grid.RowDefinitions> 
< RowDefinition /> 
< RowDefinition Height =120/> 
< /Grid.RowDefinitions> 
< Border x：Name =dragBackground =LightGrayWidth =40Height =15
 Visibility =CollapsedCanvas.ZIndex =10> 
< Border.RenderTransform> 
< TranslateTransform x：Name =transformX =0Y =0/> 
< /Border.RenderTransform> 
< TextBlock x：Name =dragTextTextAlignment =Center
 Foreground =GrayText =foo/> 
< / Border> 
 ... 
< / Grid> 
  

startDrag方法由MouseLeftButtonDown事件触发（在TreeViewItem.Header中的TextBlock上）。 onDrag由MouseMove触发。在以下代码中，self.root是Application.Current.RootVisual（来自app.xaml的顶级UI元素）：

  def startDrag （self，sender，event）：
 self.root.drag.Visibility = Visibility.Visible 
 self.root.dragText.Text = sender.Text 
 position = event.GetPosition（self。 root.drag.Parent）
 
 self.root.drag.transform.X = position.X 
 self.root.drag.transform.Y = position.Y 
 
 self.root.CaptureMouse（）
 self._captured = True 
 
 def onDrag（self，sender，event）：
 if self._captured：
 position = event.GetPosition（self.root.drag.Parent）
 self.root.drag.transform.X = position.X 
 self.root.drag.transform.Y = position.Y 
  

拖动的项目跟随鼠标移动，但是相当大的偏移。任何想法我做错什么和如何纠正？

解决方案

所以原来我应该设置保证金而不是使用TranslateTransform：

  def startDrag（self，sender，event）：
 self.root.drag.Visibility = Visibility.Visible 
 self.root.dragText.Text = sender.Text 
 
 self.root.CaptureMouse（）
 self._captured = True 
 self.root .MouseLeftButtonUp + = self.stopDrag 
 self.root.MouseLeave + = self.stopDrag 
 self.onDrag（sender，event）
 
 def onDrag（self，sender，event） ：
 if self._captured：
 position = event.GetPosition（self.root.layout_root）
 self.root.drag.Margin = Thickness（position.X，position.Y，0， 0）
 self.root.drag.UpdateLayout（）
  

We're trying to implement drag and drop in Silverlight (3). We want users to be able to drag elements from a treeview onto another part of a UI. The parent element is a Grid, and we've been trying to use a TranslateTransform along with the MouseLeftButtonDown, MouseMove (etc) events, as recommended by various online examples. For example:

http://www.85turns.com/2008/08/13/drag-and-drop-silverlight-example/

We're doing this in IronPython, but that should be more or less irrelevant. The drag start is correctly initiated, but the item we are dragging appears in the 'wrong' location (offset a few hundred pixels to the right and down from the cursor) and I can't for the life of me work out why.

Basic xaml:

<Grid x:Name="layout_root">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="120"/>
    </Grid.RowDefinitions>
    <Border x:Name="drag" Background="LightGray" Width="40" Height="15"
     Visibility="Collapsed" Canvas.ZIndex="10">
        <Border.RenderTransform>
            <TranslateTransform x:Name="transform" X="0" Y="0" />
        </Border.RenderTransform>            
        <TextBlock x:Name="dragText" TextAlignment="Center"
         Foreground="Gray" Text="foo" />
    </Border>
    ...
</Grid>

The startDrag method is triggered by the MouseLeftButtonDown event (on a TextBlock in a TreeViewItem.Header). onDrag is triggered by MouseMove. In the following code self.root is Application.Current.RootVisual (top level UI element from app.xaml):

def startDrag(self, sender, event):
    self.root.drag.Visibility = Visibility.Visible
    self.root.dragText.Text = sender.Text
    position = event.GetPosition(self.root.drag.Parent)

    self.root.drag.transform.X = position.X
    self.root.drag.transform.Y = position.Y

    self.root.CaptureMouse()
    self._captured = True

def onDrag(self, sender, event):
    if self._captured:
        position = event.GetPosition(self.root.drag.Parent)
        self.root.drag.transform.X = position.X
        self.root.drag.transform.Y = position.Y

The dragged item follows the mouse move, but is offset considerably. Any idea what I am doing wrong and how to correct it?

解决方案

So it turns out that I should have been setting the Margin instead of using TranslateTransform:

def startDrag(self, sender, event):
    self.root.drag.Visibility = Visibility.Visible
    self.root.dragText.Text = sender.Text

    self.root.CaptureMouse()
    self._captured = True
    self.root.MouseLeftButtonUp += self.stopDrag
    self.root.MouseLeave += self.stopDrag
    self.onDrag(sender, event)

def onDrag(self, sender, event):
    if self._captured:
        position = event.GetPosition(self.root.layout_root)
        self.root.drag.Margin = Thickness(position.X, position.Y, 0, 0)
        self.root.drag.UpdateLayout() 

这篇关于TranslateTransform用于在Silverlight中拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！