如何拖放“盒子”在silverlight [英] How to drag and drop a "box" in silverlight

问题描述

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

这是我如何做框的代码

XAML：

 < Canvas> 
< Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =Auto/> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
< TextBox Text ={Binding Header，UpdateSourceTrigger = PropertyChanged}
 BorderBrush =BlackBorderThickness =1Canvas.Left =41Canvas.Top =10Width = 97/> 
< TextBox Text ={Binding Text，UpdateSourceTrigger = PropertyChanged}
 TextWrapping =Wrap
 VerticalScrollBarVisibility =Auto
 AcceptsReturn =True
 BorderBrush =BlackBorderThickness =1Grid.Row =1Canvas.Left =41Canvas.Top =39Height =53Width =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 =另一个框，
 Text =...，
 // BorderBrush = Brushes.Black， 
 BorderThickness = new Thickness（1），
 Margin = new Thickness（10）
}）; 
} 
  

解决方案

这是一个示例，灵感源于 https://stackoverflow.com/a/1495486/145757 （感谢 Corey ），稍微改编，简化（无额外的布尔值）和增强（考虑利润），以供我们使用-case：

首先我修改了这个框，让它有一个专门的拖动区域：

 < UserControl x：Class =WpfApplication1.MyB ox
 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 =300d：DesignWidth =300> 
< Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =Auto/> 
< RowDefinition Height =Auto/> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
< TextBlock Text =拖我/> 
< TextBox Text ={Binding Header，UpdateSourceTrigger = PropertyChanged}
 BorderBrush =BlackBorderThickness =1Margin =2Grid.Row =1/> 
< TextBox Text ={Binding Text，UpdateSourceTrigger = PropertyChanged}
 TextWrapping =Wrap
 VerticalScrollBarVisibility =Auto
 AcceptsReturn =True
 BorderBrush =BlackBorderThickness =1Margin =2Grid.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 =MainWindowHeight =350Width =525
 xmlns：local =clr-名称空间：WpfApplication1\" > 
< Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =*/> 
< RowDefinition Height =Auto/> 
< /Grid.RowDefinitions> 
< Canvas x：Name =panel> 
< / Canvas> 
< Button Content =AddGrid.Row =1Grid.Column =0Click =Button_Click/> 
< / Grid> 
< / Window> 
  

拖放引擎在代码隐藏中：

 使用System.Windows; 
使用System.Windows.Media; 
使用System.Windows.Input; 
使用System.Windows.Controls; 
 
命名空间WpfApplication1 
 {
 public partial class MainWindow：Window 
 {
 public MainWindow（）
 {
 InitializeComponent（） ; 
} 
 
 private void Button_Click（object sender，RoutedEventArgs e）
 {
 MyBox box = new MyBox 
 {
标题=另一个框
文本=...，
 BorderBrush = Brushes.Black，
 BorderThickness =新厚度（1），
边距=新厚度（10）
}; 
 
 box.MouseLeftButtonDown + = Box_MouseLeftButtonDown; 
 box.MouseLeftButtonUp + = Box_MouseLeftButtonUp; 
 box.MouseMove + = Box_MouseMove; 
 
 panel.Children.Add（box）; 
} 
 
私人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（面板）; 
 
 draggedBox.RenderTransform = draggedBox.RenderTransform？新的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; 
} 
} 
} 
} 
  

I have a created a box like this and now i'm trying to drag and drop the box, with rectangles and other objects I did it, but with this I don't know how to do.

Here is the code of how I did the box

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>

The c# code:

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

And this is the code for adding another box:

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

解决方案

Here is a sample, inspired from https://stackoverflow.com/a/1495486/145757 (thanks Corey), slightly adapted, simplified (no additional boolean) and enhanced (take margins into account) for our use-case:

First I've modified the box so that it has a dedicated drag area:

<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 slightly modified:

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

And the drag-and-drop engine is in the code-behind:

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

这篇关于如何拖放“盒子”在silverlight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！