今天利用鼠標拖放行為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@fc6vip.cn
文章轉載自:銀光中國網