如何控制Silverlight带吸附效果的拖放控件的边界范围-控件新闻-慧都网

如何控制Silverlight带吸附效果的拖放控件的边界范围

转帖|其它|编辑：郝浩|2011-08-18 15:41:13.000|阅读 1018 次

概述：今天利用鼠标拖放行为MouseDragElementBehavior做了一个拖放控件的吸附效果, 可是拖放控件的边界总是能够超出浏览器界限. 虽然加了一些边界限制仍然不理想, 本想给Canvas或border加高度和宽度,但一加上吸附判断就出问题了, 希望大家帮忙看看.下面是效果和部分代码:

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

　　今天利用鼠标拖放行为MouseDragElementBehavior做了一个拖放控件的吸附效果, 可是拖放控件的边界总是能够超出浏览器界限. 虽然加了一些边界限制仍然不理想, 本想给Canvas或border加高度和宽度,但一加上吸附判断就出问题了, 希望大家帮忙看看.下面是效果和部分代码:

　　修改后的最终效果演示:

　　//space.silverlightchina.net/wnfc0729/UI/DragDropDemo/testpage.html

　　源代码:

<Grid x:Name="LayoutRoot" Background="White">
<Border Width="auto" Height="auto" BorderThickness="1" CornerRadius="8">
<Canvas x:Name="canvas1" Height="auto" Width="auto">

<Rectangle Canvas.Left="86" Canvas.Top="50"
Fill="#FF3BCC1D" Height="37" x:Name="rectangle1"

Stroke="Black" StrokeThickness="1"
Width= "50" RadiusX="2" RadiusY="2" />

<Rectangle Height="37" HorizontalAlignment="Stretch"

Margin="0" x:Name="rectangle2" Stroke="Black" StrokeThickness="1"
VerticalAlignment="Stretch" Width="50" Fill="#FFCC1D1D"
Canvas.Left="250" Canvas.Top="35" RadiusX="2" RadiusY="2" >

</Rectangle>
</Canvas>
</Border>
</Grid>
MouseDragElementBehavior dragBehavior =
new MouseDragElementBehavior();

public MainPage()
{
InitializeComponent();
dragBehavior.Attach(rectangle2); //为拖放控件绑定拖放行为

dragBehavior.DragBegun +=
new MouseEventHandler(dragBehavior_DragBegun);
//注册开始拖放的事件处理方法
dragBehavior.Dragging +=
new MouseEventHandler(dragBehavior_Dragging);
//注册拖放过程的事件处理方法
dragBehavior.DragFinished +=
new MouseEventHandler(dragBehavior_DragFinished);
//注册完成拖放事件处理方法
}

void dragBehavior_DragBegun(object sender, MouseEventArgs e)
{
// dragBehavior.ConstrainToParentBounds = true;
}

void dragBehavior_Dragging(object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior_temp =
sender as MouseDragElementBehavior;

//获取画布左上顶点坐标
double canvas1_left = Canvas.GetLeft(canvas1);
double canvas1_top = Canvas.GetTop(canvas1);

//限制拖放控件的移动范围

if(dragBehavior_temp.X <canvas1_left)
{
dragBehavior_temp.X = canvas1_left;
}

if (dragBehavior_temp.X > canvas1_left + canvas1.Width)
{
dragBehavior_temp.X = canvas1.Width;
}

if (dragBehavior_temp.Y < canvas1_top)
{
dragBehavior_temp.Y = canvas1_top;
}

if (dragBehavior_temp.Y > canvas1_top + canvas1.Height)
{
dragBehavior_temp.Y = canvas1.Height;
}

// dragBehavior_temp.Dragging -=
new MouseEventHandler(dragBehavior_Dragging);
}

void dragBehavior_DragFinished(object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior_temp =
sender as MouseDragElementBehavior;

//获取移入对象的画布坐标
double rectangle1_left = Canvas.GetLeft(rectangle1);
double rectangle1_top = Canvas.GetTop(rectangle1);

//判断移入对象的范围
if (
(dragBehavior_temp.X > (rectangle1_left - rectangle1.Width) &&

dragBehavior_temp.X < (rectangle1_left + rectangle1.Width))
&& (dragBehavior_temp.Y > (rectangle1_top - rectangle1.Height)
&& dragBehavior_temp.Y <(rectangle1_top + rectangle1.Height))
)
{

//图形吸附到移入对象
dragBehavior_temp.X = rectangle1_left;
dragBehavior_temp.Y = rectangle1_top;

//吸附后失去拖放行为绑定,并注销拖放完成事件
//dragBehavior_temp.Detach();
//dragBehavior_temp.DragFinished -=
new MouseEventHandler(dragBehavior_DragFinished);
}
else
{

　　请教了Q群的朋友, 找到问题了, 主要是设置Canvas高宽后没有改布局(水平和垂直都还是stretch延伸) ,使得画布没有靠在浏览器窗口的左上方. 将水平垂直对齐改为left和top就ok了. 修改后的效果见一楼的链接.

　　边界控制还是用前面的办法 dragBehavior.ConstrainToParentBounds = true;

　　修改后的代码如下:

(后台代码添加Microsoft.Expression.Interactivity和System.Windows.Interactivity的引用)

<Grid x:Name="LayoutRoot" Background="White">
<Border Width="auto" Height="auto" BorderThickness="1" CornerRadius="8">
<Canvas x:Name="canvas1" Height="300"

Width="400" Background="#FFE0E0E0"
HorizontalAlignment="Left" VerticalAlignment="Top">

<Rectangle Canvas.Left="126" Canvas.Top="92"

Fill="#FF3BCC1D" Height="50" x:Name="rectangle1" Stroke="Black"
StrokeThickness= "1" Width="100" RadiusX="2" RadiusY="2" />
<Rectangle Height="50" HorizontalAlignment="Stretch"
Margin="0" x:Name="rectangle2" Stroke="Black" StrokeThickness="1"
VerticalAlignment= "Stretch" Width="100" Fill="#FFCC1D1D" Canvas.Left="240"
Canvas.Top="220" RadiusX="2" RadiusY="2" >

</Rectangle>
</Canvas>
</Border>
</Grid>
MouseDragElementBehavior dragBehavior =
new MouseDragElementBehavior();

public MainPage()
{
InitializeComponent();
dragBehavior.Attach(rectangle2); //为拖放控件绑定拖放行为

dragBehavior.DragBegun +=
new MouseEventHandler(dragBehavior_DragBegun);
//注册开始拖放的事件处理方法
dragBehavior.Dragging +=
new MouseEventHandler(dragBehavior_Dragging);
//注册拖放过程的事件处理方法
dragBehavior.DragFinished +=
new MouseEventHandler(dragBehavior_DragFinished);
//注册完成拖放事件处理方法

}

void dragBehavior_DragBegun(object sender, MouseEventArgs e)
{
dragBehavior.ConstrainToParentBounds = true;

//限制拖放控件不超出父容器的边界
}

void dragBehavior_Dragging(object sender, MouseEventArgs e)
{
}

void dragBehavior_DragFinished(object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior_temp =
sender as MouseDragElementBehavior;

//获取被吸附对象的画布坐标
double rectangle1_left = Canvas.GetLeft(rectangle1);
double rectangle1_top = Canvas.GetTop(rectangle1);

//判断吸附的范围
if (
(dragBehavior_temp.X > (rectangle1_left - rectangle1.Width) &&
dragBehavior_temp.X < (rectangle1_left + rectangle1.Width))
&& (dragBehavior_temp.Y > (rectangle1_top - rectangle1.Height) &&
dragBehavior_temp.Y <(rectangle1_top + rectangle1.Height))
)
{

//图形吸附到对象中
dragBehavior_temp.X = rectangle1_left;
dragBehavior_temp.Y = rectangle1_top;

//吸附后失去拖放行为绑定,并注销拖放完成事件
//dragBehavior_temp.Detach();
//dragBehavior_temp.DragFinished -=
new MouseEventHandler(dragBehavior_DragFinished);
}
else
{

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自：银光中国网

上一篇：慧都免费公开课：工作流产品对比Bizflow VS Skelta 下一篇：如何妥善处理WebBrowser对Javascript的错误问题