[Silverlight] MouseDragElementBehavior取得物件移動後位置

2010-10-18

10975
0
2010-10-23

Silverlight 在3.0之後的版本中加入了Behavior功能，而其中如果要讓使用者可以拖曳物件的話，Blend就有內建的一個MouseDragElementBehavior可以直接使用，最近在開發Silverlight時我也使用到MouseDragElementBehavior來讓使用者可以拖曳物件，不過當要取出移動後物件的Canvas.Left與Canvas.Top值時，發現到在一般情況下要取出這兩個值時我們會用GetValue()這種方法，但是執行後發現GetValue()並沒有辦法取出套用MouseDragElementBehavior移動後的物件的Canvas.Left與Canvas.Top，即使我們拖曳移動後，取出的值依舊是原本移動前的值，所以就試了別的方式來取得這兩個值:

先在Blend中設定好物件與介面，中間綠色矩形是我們要取得Canvas.Left與Canvas.Top值的物件，按下按鈕則可以取得值，介面XAML檔如下:

<Canvas x:Name="LayoutRoot" Background="#FFCEF4F5">
		<Rectangle x:Name="TestObject" Fill="#FF4EFF00" Height="60" Canvas.Left="77" Stroke="Black" Canvas.Top="55" Width="150"/>
		<Button Content="取得物件位置的值" Height="35" Canvas.Left="137" Canvas.Top="304" Width="102" Click="Button_Click"/>
		<TextBlock x:Name="LeftValue" Height="35" Canvas.Left="34" TextWrapping="Wrap" Canvas.Top="215" Width="112" Text="Left值"/>
		<TextBlock x:Name="TopValue" Height="35" Canvas.Left="34" TextWrapping="Wrap" Canvas.Top="254" Width="112" Text="Top值"/>
		<TextBlock Height="24" Canvas.Left="34" TextWrapping="Wrap" Text="GetValue方法(無法取出移動後的值):" Canvas.Top="187" Width="205"/>
		<TextBlock Height="19" Canvas.Left="294" TextWrapping="Wrap" Text="可以取出的移動後值的方法:" Canvas.Top="187" Width="155"/>
		<TextBlock x:Name="LeftValue1" Height="35" Canvas.Left="294" TextWrapping="Wrap" Canvas.Top="215" Width="276" Text="Left值"/>
		<TextBlock x:Name="TopValue1" Height="35" Canvas.Left="294" TextWrapping="Wrap" Canvas.Top="254" Width="276" Text="Top值"/>
</Canvas>

程式的部分如下，首先我們用程式套用MouseDragElementBehavior到物件上，而按鈕的事件則列了兩種取值的方式，一種是一般使用GetValue()方法，這是無法正確取出值，另一種則是取得MouseDragElementBehavior的X與Y屬性，這是可以正確得到Canvas.Left與Canvas.Top的值

要先記得引用Microsoft.Expression.Interactivity.Layout 與 System.Windows.Interactivity

using System.Windows;
using System.Windows.Controls;
using Microsoft.Expression.Interactivity.Layout;
using System.Windows.Interactivity;

namespace MouseDragBehavior
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
            //用程式套用MouseDragElementBehavior到物件上
            MouseDragElementBehavior DragBehavior = new MouseDragElementBehavior();
            Interaction.GetBehaviors(TestObject).Add(DragBehavior);
		}

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //一般情況使用的GetValue()方法，無法正確取得套用MouseDragElementBehavior物件移動後的值
            LeftValue.Text = "Left值:" + TestObject.GetValue(Canvas.LeftProperty).ToString();
            TopValue.Text = "Top值:" + TestObject.GetValue(Canvas.TopProperty).ToString();

            //取得MouseDragElementBehavior的X與Y值，可以正確取得物件移動後的值
            MouseDragElementBehavior m1 = Interaction.GetBehaviors(TestObject)[0] as MouseDragElementBehavior;
            LeftValue1.Text = "Left值:" + m1.X.ToString();
            TopValue1.Text = "Top值:" + m1.Y.ToString();
        }
	}
}

移動前的畫面，用MouseDragElementBehavior的X與Y這種方法在移動前，是NaN值，因此不是一個數字

移動後再用這兩種方法取出值，可以看到GetValue()方法無法正確取得移動後的值

程式碼下載

Silverlight

回首頁