WPF流程圖制作相關基礎一
需求是要通過wpf開發流程圖,這個流程圖是用戶自行拖動配置。
使用過流程圖的話,應該大體能想象出流程圖拖動配置的樣子。這里主要會涉及到的技術知識點就是 wpf拖動相關的知識。
但其實,wpf拖動是有幾種不同的實現思路的
方案一 通過相應 鼠標的 mousedown mousemove mouseup等事件 來讓 流程圖標跟着 進行移動。
方案二 wpf自帶有鼠標拖動事件,但是這個拖動 主要是注重於 將信息 從一個地方 通過拖動這個動作復制到另一個地方。 而不是 我們所指的 純粹的元素在 畫板上發生位移。
方案三 也是我們的重點。 WPF 在system.windows.control.primitive 命名空間下 有一個專門的類叫做 Thumb 來提供實現在畫板上拖動位移。
這個thumb控件是個偏 基礎層次的控件,可以用來構建其他的控件。 就我們手頭的visual stdio 當我們將鼠標滑輪向下滑的時候 右邊的 滑塊就會出現,我們可以拖動這個滑塊。
我們可以觀察到 ,通過拖動這個滑塊,左邊所展示的代碼也會相應的移動。
Thumb的核心事件有:
DragStarted——當你在它滑塊上面按下鼠標左鍵,開始拖動時發生;
DragDelta——只要你的拖動仍在操作(沒松開鼠標左鍵),它就會不斷地發生;
DragCompleted——不用說,這個肯定是在拖動操作結束后發生。
我們用一個簡單示例來做個測驗,主要就是 拖動滑塊的時候,在 標簽上顯示 滑塊的位置坐標。
前台界面
<Grid > <Canvas Name ="g" Background="AliceBlue" HorizontalAlignment="Left" Height="100" Margin="41,72,0,0" VerticalAlignment="Top" Width="151"> <Thumb Canvas.Top ="2" Canvas.Left="2" Width="35" Height="35" DragDelta="Thumb_DragDelta"
DragStarted="Thumb_DragStarted" DragCompleted="Thumb_DragCompleted"></ Thumb> <TextBlock Canvas.Top ="2" Canvas.Left="2" x:Name ="tt" FontSize="24" ></TextBlock> </Canvas> </Grid>
后台事件響應代碼
private void Thumb_DragDelta( object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e) { Thumb myThumb = (Thumb )sender; double nTop = Canvas .GetTop(myThumb) + e.VerticalChange; double nLeft = Canvas .GetLeft(myThumb) + e.HorizontalChange; Canvas.SetTop(myThumb, nTop); Canvas.SetLeft(myThumb, nLeft); tt.Text = "Top:" + nTop.ToString() + "\nLeft:" + nLeft.ToString(); } private void Thumb_DragStarted(object sender, DragStartedEventArgs e) { tt.Text = "哈哈 這個玩意可以拖" ; } private void Thumb_DragCompleted(object sender, DragCompletedEventArgs e) { tt.Text = "終於拖結束了" ; }
thumb控件原本的樣子 只是個灰頭土臉的塊狀。
我們當然可以通過controlTemplate來設置他的面容,這個在話題之外。
效果如下
