你的位置:首页 > ASP.net教程

[ASP.net教程]WPF流程图制作系列相关基础二


   我们现在知道 thumb ,可以让用户自行拖动其在 canvas上移动,在这个而基础上 我们可以试着往流程图方向靠近一下。
我们知道,流程图,都是一个一个的流程块,然后用线连起来的,这一个一个的流程块可能会有各种各样的形状, 比如长方形,菱形
这很简单 ,只需要设置 thumb使用不同的控件模板就ok.
 
在 界面上 放置了多个 thumb之后, 每一个都是需要响应dragDelta事件 才可以实现拖动的, 这样的话 就基本要给每一个thumb写上各自的 dragDelta处理方法。 如果这样子,那代码就开始臃肿了。
所以 针对可以拖动的滑块,可以开发子类 如下:
 
public class MoveThumb :Thumb  {    public MoveThumb()    {      this.DragDelta += MoveThumb_DragDelta;    }    public void MoveThumb_DragDelta(object sender, 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);    }      }

前台

  <Window.Resources>    <ControlTemplate x :Key="rec">      <Rectangle Fill ="Gray" Width="70" Height="50"></ Rectangle>    </ControlTemplate>    <ControlTemplate x :Key="ell">      <Ellipse Fill ="Gray" Width="70" Height="70"></ Ellipse>    </ControlTemplate>  </Window.Resources >  <Grid >    <Canvas Background ="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。这样一来 代码还是要有不少变动的。
页面元素变为
 <ContentControl Canvas.Left ="50" Canvas.Top="50" Template="{StaticResource thumbItemTemplate}">        <Ellipse Width ="50" Height="50" Fill="OrangeRed" IsHitTestVisible="False"></ Ellipse>      </ContentControl>

 <ControlTemplate x :Key="rawThumbTemplate" TargetType="Thumb">      <Rectangle Fill ="Transparent"></Rectangle>    </ControlTemplate>    <ControlTemplate x :Key="thumbItemTemplate" TargetType="ContentControl">      <Grid DataContext ="{Binding RelativeSource ={RelativeSource TemplatedParent}}">        <!--这里的放置顺序还是有讲究的-->        <local: MoveThumb Template="{ StaticResource rawThumbTemplate}" Cursor="SizeAll"></ local:MoveThumb >        <ContentPresenter Content ="{TemplateBinding Content}"></ContentPresenter>              </Grid>    </ControlTemplate>

注意到 我们这边绑定了 模板中 MoveThumb的datacontext为使用这个模板的元素,这样moveThumb代码修改如下
 public void MoveThumb_DragDelta( object sender, DragDeltaEventArgs e)    {      Control item = this.DataContext as Control;      if(item!= null)      {        double left = Canvas.GetLeft(item);        double top = Canvas.GetTop(item);        Canvas.SetTop(item,top+e.VerticalChange);        Canvas.SetLeft(item,left+e.HorizontalChange);      }    }

就可以通过 DataContext获取 实际需要在画板上位移的元素。 运行出来的效果是一样的。只不过我们界面上的元素成为了 contentControl,这样子以后 像其内部放东西 就成为可能。