彩票走势图

如何控制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@pclwef.cn

文章转载自:银光中国网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP