Canvas中鼠標獲取元素並拖動技術

Silverlight拖動，需要Canvas。

Canvas管網定義：

定義一個區域，在該區域中可以使用相對於該區域的坐標顯式定位子元素。

XAML

<Canvas ...> oneOrMoreUIElements </Canvas> -or- <Canvas .../> 

XAML 值

 

值	描述
oneOrMoreUIElements	從 UIElement 對象派生的以下對象元素中的一個或多個：Border (Silverlight 2)、Canvas、Ellipse、Glyphs、Grid (Silverlight 2)、Image、InkPresenter、Line、MediaElement、PasswordBox (Silverlight 2)、Path、Polygon、Polyline、Rectangle、Shape、StackPanel (Silverlight 2)、TextBlock、TextBox (Silverlight 2)。 當腳本在運行時訪問 Children 屬性時，此處定義的對象元素將成為 Children 集合的成員。

 

Canvas作用：

在 Silverlight 的 JavaScript API 中，Canvas 對象通常為 XAML 的根元素，此 XAML 為 Silverlight 插件的 Source 屬性。

Canvas 可以包含子元素，這些子元素呈現在 Canvas 區域中。 每個子元素都必須為一個 UIElement。 在 XAML 中，將子元素聲明為充當 Canvas 對象元素的內部 XML 的對象元素。

在腳本中，可以通過獲取由 Children 屬性訪問的集合來操作 Canvas 子對象的集合。

由於 Canvas 為 UIElement 類型，因此可以嵌套 Canvas 元素。

很多情況下，Canvas 僅僅用作其他對象的容器，而沒有任何可見屬性。 如果滿足下面的一個或多個條件，Canvas 即不可見：

• Height 屬性等於 0。

• Width 屬性等於 0。

• Background 屬性等於 null。

• Opacity 屬性等於 0。

• Visibility 屬性等於 Collapsed。

• Canvas 的某個上級對象不可見。

在 Silverlight 的 JavaScript API 中，鍵盤事件僅對根元素或可設定焦點的控件（TextBox、PasswordBox）可用。 Canvas 是一個典型的根元素，所以通常是具有鍵事件處理的公共對象。

學習實現一個拖動對象效果：

我們在xaml文件中的根元素放置一個Canvas，在Canvas的子元素中放置一個Rectangle

要想實現拖動，我們需要做的事情有：

• 1，當鼠標在該對象上邊按下時，獲取到該元素，並標記鼠標已經按下；
• 2，當已經標記為按下，且還未釋放鼠標之前，有任何拖動我們都要把選中的對象的位置坐變動；
• 3，當鼠標釋放，當鼠標釋放的時候，我們需要把標記鼠標已按下的標記取消，同時釋放鼠標。

從上邊的分析知道，我們需要一些賦值的標記，和鼠標位置跟蹤標記元素：

鼠標按下事件：

鼠標移動事件：

鼠標釋放事件：