WPF/C# Algorithm for resizing control using mouse with 8 different resize points? -

WPF/C# Algorithm for resizing control using mouse with 8 different resize points? -

wasn't sure how title this, have created cropping function cropping images , looks bit this:

at moment, user can move box (which border several kid borders) , draw new ones of size. can't do, allow user resize after drawn. has able resize in each direction see little square. this, thing can think of write mouseup, mousedown, , mousemove method each one.

my first question is, can simplified can eliminate having have 24 events achieving this?

my sec question is, if not, how go resizing it?

my current algorithm mean resizing parent border , changing (x,y) coordinates of on canvas, allow possibility of resizing past top point.

for example, if user resizing using bottom-most square, border have 0 height, go on going in direction. essentially, border have fixed top position until mouse extended beyond point, have fixed bottom position height increases upward. tested 1 square , it's starting seem more complicated worth completing.

this sample of current algorithm:

private void southcropborder_mousedown(object sender, mousebuttoneventargs e) { this.southcropborder.capturemouse(); } private void southcropborder_mouseup(object sender, mousebuttoneventargs e) { this.southcropborder.releasemousecapture(); } private void southcropborder_mousemove(object sender, mouseeventargs e) { if (e.leftbutton != mousebuttonstate.pressed) { return; } double y_1 = canvas.gettop(this.croppingborder); double y_2 = e.getposition(this.canvas1).y; double y_3 = y_2 - y_1; if (y_3 > 0) { this.croppingborder.height = y_2 - y_1; } else { if (y_3 != 0) { canvas.setbottom(this.croppingborder, y_1); this.croppingborder.height = y_3 * -1; } } }

and xaml:

<border x:name="croppingborder" cursor="sizeall" panel.zindex="1000" visibility="hidden" background="lightgray" width="0" height="0" borderthickness="1" borderbrush="black" opacity="0.6"> <grid> <grid.columndefinitions> <columndefinition width="34*"/> <columndefinition width="33*"/> <columndefinition width="33*"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="34*"/> <rowdefinition height="33*"/> <rowdefinition height="33*"/> </grid.rowdefinitions> <border x:name="northwestcropborder" background="gray" panel.zindex="1" cursor="sizenwse" grid.column="0" grid.row="0" horizontalalignment="left" verticalalignment="top" width="10" height="10" borderbrush="white" borderthickness="1" margin="-5,-5,0,0" mouseup="northwestcropborder_mouseup" mousedown="northwestcropborder_mousedown"/> <border x:name="northcropborder" background="gray" panel.zindex="1" cursor="sizens" grid.column="1" grid.row="0" horizontalalignment="center" verticalalignment="top" width="10" height="10" borderbrush="white" borderthickness="1" margin="0,-5,-5,0" mouseup="northcropborder_mouseup" mousedown="northcropborder_mousedown"/> <border x:name="northeastcropborder" background="gray" panel.zindex="1" cursor="sizenesw" grid.column="2" grid.row="0" horizontalalignment="right" verticalalignment="top" width="10" height="10" borderbrush="white" borderthickness="1" margin="0,-5,-5,0" mouseup="northeastcropborder_mouseup" mousedown="northeastcropborder_mousedown"/> <border x:name="westcropborder" background="gray" panel.zindex="1" cursor="sizewe" grid.column="0" grid.row="1" horizontalalignment="left" verticalalignment="center" width="10" height="10" borderbrush="white" borderthickness="1" margin="-5,0,0,0" mouseup="westcropborder_mouseup" mousedown="westcropborder_mousedown"/> <ellipse fill="gray" panel.zindex="1" cursor="arrow" grid.column="1" grid.row="1" horizontalalignment="center" verticalalignment="center" width="10" height="10" stroke="white" strokethickness="1" margin="0,0,-5,0"/> <border x:name="eastcropborder" background="gray" panel.zindex="1" cursor="sizewe" grid.column="2" grid.row="1" horizontalalignment="right" verticalalignment="center" width="10" height="10" borderbrush="white" borderthickness="1" margin="0,0,-5,0" mouseup="eastcropborder_mouseup" mousedown="eastcropborder_mousedown"/> <border x:name="southwestcropborder" background="gray" panel.zindex="1" cursor="sizenesw" grid.column="0" grid.row="2" horizontalalignment="left" verticalalignment="bottom" width="10" height="10" borderbrush="white" borderthickness="1" margin="0,0,-5,-5" mouseup="southwestcropborder_mouseup" mousedown="southwestcropborder_mousedown"/> <border x:name="southcropborder" background="gray" panel.zindex="1" cursor="sizens" grid.column="1" grid.row="2" horizontalalignment="center" verticalalignment="bottom" width="10" height="10" borderbrush="white" borderthickness="1" margin="0,0,-5,-5" mouseup="southcropborder_mouseup" mousedown="southcropborder_mousedown" mousemove="southcropborder_mousemove"/> <border x:name="southeastcropborder" background="gray" panel.zindex="1" cursor="sizenwse" grid.column="2" grid.row="2" horizontalalignment="right" verticalalignment="bottom" width="10" height="10" borderbrush="white" borderthickness="1" margin="0,0,-5,-5" mouseup="southeastcropborder_mouseup" mousedown="southeastcropborder_mousedown"/> <image x:name="croppingselectionimage" grid.columnspan="3" grid.rowspan="3" stretch="fill" mousedown="croppingselectionimage_mousedown" mousemove="croppingselectionimage_mousemove"/> </grid> </border>

at point, resizing fine , dandy until start trying extend beyond initial top position.

any thoughts?

update ok, came across this, makes more sense. still pondering how can made move in opposite side directions, well. have provided illustration image in photoshop exemplify i'm trying acheive:

note, how start @ bottom , move our way top (which photoshop can do). start here , update when find fix...

c# wpf image xaml resize