WPF Flowchart Production Series related basic Two

Now that we know the thumb, we can let the user drag it on the canvas to move on, on the basis of which we can try to approach the direction of the flowchart. We know that the flowchart, is a process block, and then connected with the line, this one of the process block may have a variety of shapes, such as rectangles, diamonds this is very simple, only need to set the thumb to use a different control template is OK. After placing more than one thumb on the interface, each one is required to respond to the DragDelta event before it can be dragged, so it is essential that each thumb be written with its own DragDelta method. If that's the case, the code will start to get bloated. So for sliders that can be dragged, you can develop subclasses such as:

 Public classMovethumb:thumb { PublicMovethumb () { This. DragDelta + =Movethumb_dragdelta; }         Public voidMovethumb_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); }           }

Front desk

    <window.resources>        <ControlTemplatex:key= "Rec">            <RectangleFill= "Gray"Width= "The "Height= " the"></Rectangle>        </ControlTemplate>        <ControlTemplatex:key= "ell">            <EllipseFill= "Gray"Width= "The "Height= "The "></Ellipse>        </ControlTemplate>    </window.resources>    <Grid>        <CanvasBackground= "AliceBlue"HorizontalAlignment= "Left"Height= "412"Margin= "10,10,0,0"VerticalAlignment= "Top"Width= "522">            <Local:Movethumb Canvas.Left= " the"Canvas.Top= " the"Template="{StaticResource Rec}"></Local:movethumb>            <Local:Movethumb Canvas.Left= "$"Canvas.Top= " the"Template="{StaticResource ell}"></Local:movethumb>            <Local:Movethumb Canvas.Left= "+"Canvas.Top= " the"Template="{StaticResource ell}"></Local:movethumb>        </Canvas>    </Grid>

The effect is as follows Yes, we can now slide the sliders on the canvas. But the bad thing about the code above is that the thumb block is not a content control, and he can't put things inside. And we have this series of functions is to pave the flow of the future, and the flowchart of the block in the time it is necessary to actually put our activity activities to act as the implementation. So we should change the way of thinking to achieve the current effect. We should change the interface to be content controls, and the ControlTemplate of these content controls uses the Movethumb developed above. So the code still has a lot of changes. The page element becomes

  <ContentControlCanvas.Left= " the"Canvas.Top= " the"Template="{StaticResource Thumbitemtemplate}">                <EllipseWidth= " the"Height= " the"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}}">                <!--the order of placement here is still fastidious. -                <Local:Movethumb Template="{StaticResource Rawthumbtemplate}"Cursor= "Sizeall"></Local:movethumb>                <ContentPresenterContent="{TemplateBinding Content}"></ContentPresenter>                           </Grid>        </ControlTemplate>

Notice that we've bound the Movethumb DataContext in the template to the elements that use this template, so the Movethumb code is modified as follows

  Public voidMovethumb_dragdelta (Objectsender, DragDeltaEventArgs e) {Control Item= This. DataContext asControl; if(item!=NULL)            {                Doubleleft =canvas.getleft (item); Doubletop =canvas.gettop (item); Canvas.settop (Item,top+E.verticalchange); Canvas.setleft (Item,left+E.horizontalchange); }        }

You can get the elements that actually need to be displaced on the artboard by DataContext. The effect of running out is the same. It's just that the elements on our interface become ContentControl, and it's possible to put something inside like that later.

WPF Flowchart Production Series related basic Two