WPF流程图制作系列相关基础一

WPF流程图制作系列相关基础⼀
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来设置他的⾯容，这个在话题之外。

效果如下。