我们现在知道 thumb ，可以让用户自行拖动其在 canvas上移动，在这个而基础上 我们可以试着往流程图方向靠近一下。
我们知道，流程图，都是一个一个的流程块，然后用线连起来的，这一个一个的流程块可能会有各种各样的形状， 比如长方形，菱形
这很简单 ，只需要设置 thumb使用不同的控件模板就ok.
在 界面上 放置了多个 thumb之后， 每一个都是需要响应dragDelta事件 才可以实现拖动的， 这样的话 就基本要给每一个thumb写上各自的 dragDelta处理方法。 如果这样子，那代码就开始臃肿了。
所以 针对可以拖动的滑块，可以开发子类 如下：
publicclassMoveThumb :Thumb
{publicMoveThumb()
{this.DragDelta +=MoveThumb_DragDelta;
}publicvoidMoveThumb_DragDelta(objectsender, DragDeltaEventArgs e)
{
Thumb myThumb=(Thumb )sender;doublenTop = Canvas .GetTop(myThumb) +e.VerticalChange;doublenLeft = Canvas .GetLeft(myThumb) +e.HorizontalChange;
Canvas.SetTop(myThumb, nTop);
Canvas.SetLeft(myThumb, nLeft);
}
}
前台
<Window.Resources><ControlTemplatex :Key="rec"><RectangleFill="Gray"Width="70"Height="50"></Rectangle></ControlTemplate><ControlTemplatex :Key="ell"><EllipseFill="Gray"Width="70"Height="70"></Ellipse></ControlTemplate></Window.Resources><Grid><CanvasBackground="AliceBlue"HorizontalAlignment="Left"Height="412"Margin="10,10,0,0"VerticalAlignment="Top"Width="522"><local:MoveThumb Canvas.Left="50"Canvas.Top="50"Template="{StaticResource rec}"></local: MoveThumb><local:MoveThumb Canvas.Left="140"Canvas.Top="50"Template="{StaticResource ell}"></local: MoveThumb><local:MoveThumb Canvas.Left="250"Canvas.Top="50"Template="{StaticResource ell}"></local: MoveThumb></Canvas></Grid>
效果如下
是的，我们现在的这些滑块 都可以在画布上滑动了。但是 上面代码的的写法有不好的地方在于，thumb块不是内容控件，他是不可以在内部放东西的。而我们的这一系列功能是为了给以后的流程图做铺垫， 而流程图的块里面 到时候是需要实际放上我们的activity活动来作为执行的。所以我们应该 换一种写法思路来实现目前的这个效果。
我们应该改造成 让界面上的都是内容控件，而这些内容控件的controlTemplate则使用上面开发的 MoveThumb。这样一来 代码还是要有不少变动的。
页面元素变为
<ContentControlCanvas.Left="50"Canvas.Top="50"Template="{StaticResource thumbItemTemplate}"><EllipseWidth="50"Height="50"Fill="OrangeRed"IsHitTestVisible="False"></Ellipse></ContentControl>
<ControlTemplatex :Key="rawThumbTemplate"TargetType="Thumb"><RectangleFill="Transparent"></Rectangle></ControlTemplate><ControlTemplatex :Key="thumbItemTemplate"TargetType="ContentControl"><GridDataContext="{Binding RelativeSource ={RelativeSource TemplatedParent}}"><!--这里的放置顺序还是有讲究的--><local:MoveThumb Template="{ StaticResource rawThumbTemplate}"Cursor="SizeAll"></local:MoveThumb><ContentPResenterContent="{TemplateBinding Content}"></ContentPresenter></Grid></ControlTemplate>
注意到 我们这边绑定了 模板中 MoveThumb的datacontext为使用这个模板的元素，这样moveThumb代码修改如下
publicvoidMoveThumb_DragDelta(objectsender, DragDeltaEventArgs e)
{
Control item=this.DataContextasControl;if(item!=null)
{doubleleft =Canvas.GetLeft(item);doubletop =Canvas.GetTop(item);
Canvas.SetTop(item,top+e.VerticalChange);
Canvas.SetLeft(item,left+e.HorizontalChange);
}
}
就可以通过 DataContext获取 实际需要在画板上位移的元素。 运行出来的效果是一样的。只不过我们界面上的元素成为了 contentControl，这样子以后 像其内部放东西 就成为可能。