如何在 Silverlight 中拖放“框”

Question

我已经创建了一个这样的盒子，现在我正在尝试拖放带有矩形和其他对象的盒子，但我不知道该怎么做。

这是我如何制作盒子的代码

XAML：

<Canvas>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Header,UpdateSourceTrigger=PropertyChanged}"
             BorderBrush="Black" BorderThickness="1" Canvas.Left="41" Canvas.Top="10" Width="97" />
        <TextBox Text="{Binding Text,UpdateSourceTrigger=PropertyChanged}"
             TextWrapping="Wrap"
             VerticalScrollBarVisibility="Auto"
             AcceptsReturn="True"
             BorderBrush="Black" BorderThickness="1" Grid.Row="1" Canvas.Left="41" Canvas.Top="39" Height="53" Width="97" />
    </Grid>
</Canvas>

c#代码：

public partial class MyBox : UserControl
{
    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(MyBox),null);
    public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Content", typeof(string), typeof(MyBox),null);

    public string Header
    {
        get { return GetValue(HeaderProperty) as string; }
        set { SetValue(HeaderProperty, value); }
    }

    public string Text
    {
        get { return GetValue(TextProperty) as string; }
        set { SetValue(TextProperty, value); }
    }

    public MyBox()
    {
        InitializeComponent();
        this.DataContext = this;    
    }

这是添加另一个框的代码：

private void Button_Click(object sender, RoutedEventArgs e)
{
    panel.Children.Add(new MyBox
    {
        //LayoutRoot.Children.Add(new MyBox  {
        Header = "Another box",
        Text = "...",
        //    BorderBrush = Brushes.Black,
        BorderThickness = new Thickness(1),
        Margin = new Thickness(10)
    });
}

Answer 1

这是一个示例，灵感来自 https://stackoverflow.com/a/1495486/145757（感谢 Corey），针对我们的用例稍作调整、简化（没有额外的布尔值）和增强（考虑边距）：

首先我修改了盒子，让它有一个专用的拖动区域：

<UserControl x:Class="WpfApplication1.MyBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="Drag me" />
        <TextBox Text="{Binding Header,UpdateSourceTrigger=PropertyChanged}"
                 BorderBrush="Black" BorderThickness="1" Margin="2" Grid.Row="1" />
        <TextBox Text="{Binding Text,UpdateSourceTrigger=PropertyChanged}"
                 TextWrapping="Wrap"
                 VerticalScrollBarVisibility="Auto"
                 AcceptsReturn="True"
                 BorderBrush="Black" BorderThickness="1" Margin="2" Grid.Row="2" />
    </Grid>
</UserControl>

MainWindow XAML 稍作修改：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Canvas x:Name="panel">
        </Canvas>
        <Button Content="Add" Grid.Row="1" Grid.Column="0" Click="Button_Click" />
    </Grid>
</Window>

并且拖放引擎在代码隐藏中：

using System.Windows;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MyBox box = new MyBox
            {
                Header = "Another box",
                Text = "...",
                BorderBrush = Brushes.Black,
                BorderThickness = new Thickness(1),
                Margin = new Thickness(10)
            };

            box.MouseLeftButtonDown += Box_MouseLeftButtonDown;
            box.MouseLeftButtonUp += Box_MouseLeftButtonUp;
            box.MouseMove += Box_MouseMove;

            panel.Children.Add(box);
        }

        private MyBox draggedBox;
        private Point clickPosition;

        private void Box_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            draggedBox = sender as MyBox;
            clickPosition = e.GetPosition(draggedBox);
            draggedBox.CaptureMouse();
        }

        private void Box_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            draggedBox.ReleaseMouseCapture();
            draggedBox = null;
        }

        private void Box_MouseMove(object sender, MouseEventArgs e)
        {
            if (draggedBox != null)
            {
                Point currentPosition = e.GetPosition(panel);

                draggedBox.RenderTransform = draggedBox.RenderTransform ?? new TranslateTransform();

                TranslateTransform transform = draggedBox.RenderTransform as TranslateTransform;

                transform.X = currentPosition.X - clickPosition.X - draggedBox.Margin.Left;
                transform.Y = currentPosition.Y - clickPosition.Y - draggedBox.Margin.Right;
            }
        }
    }
}

Answer 2

看看混合交互行为。不久前我做了一个样本http://invokeit.wordpress.com/2012/02/10/wp7-drag-drop-example/