用于 Silverlight 中拖放的 TranslateTransform

Posted

技术标签:

【中文标题】用于 Silverlight 中拖放的 TranslateTransform【英文标题】:TranslateTransform for drag and drop in Silverlight 【发布时间】:2011-01-30 12:05:07 【问题描述】:

我们正在尝试在 Silverlight (3) 中实现拖放。我们希望用户能够将元素从树视图拖到 UI 的另一部分。父元素是一个 Grid,我们一直在尝试使用 TranslateTransform 以及 MouseLeftButtonDown、MouseMove (等)事件,正如各种在线示例所推荐的那样。例如:

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

我们正在 IronPython 中执行此操作,但这应该或多或少无关紧要。拖动开始已正确启动,但我们拖动的项目出现在“错误”位置(从光标向右和向下偏移几百像素),我终生无法弄清楚原因。

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

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

拖动的项目跟随鼠标移动,但有相当大的偏移。知道我做错了什么以及如何纠正吗?

【问题讨论】:

【参考方案1】:

所以事实证明,我应该设置 Margin 而不是使用 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() 

【讨论】:

以上是关于用于 Silverlight 中拖放的 TranslateTransform的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 在表格中拖放(使用两个可拖放的函数)

在 HTML5 中拖放的 Javascript

在 HTML5 中拖放的 Javascript

在 Windows 中拖放的通知

在 Selenium WebDriver 中拖放的 JavaScript 解决方法

关于如何在 ASP.net 中拖放的建议