如何在 Silverlight 中拖放“框”

Posted 2023-05-08

【中文标题】如何在 Silverlight 中拖放“框”

【英文标题】：How to drag and drop a "box" in silverlight

【发布时间】：2013-06-04 19:00:10

【问题描述】：

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

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

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

【参考方案1】：

这是一个示例，灵感来自 https://***.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;
            
        
    

【参考方案2】：

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

【讨论】：

但是对于椭圆或矩形等形状我可以做到，但是对于这种“自定义”形状我不能

为什么不将自定义形状添加到画布或网格之类的东西上

我已经解决了这个问题，谢谢你的帮助 :D 顺便说一句，我有一个新问题，看看 :)) ***.com/questions/17047624/…