WPF流程圖制作系列相關基礎二

2019-11-14 15:44:29

字體：大中小

來源：轉載

供稿：網友

我們現在知道 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);            }        }