Continue to the WPF -- thumb control

 

This control is not easy to introduce. It is also a rough sentence on msdn. It is something that can be dragged by users. However, you will find that when you drag the control, it does not respond, that is, This item does not perform any operations by default. It depends on where it does nothing unless you kick your feet. In addition, this control is like a Sifang duck. When you kick it, it will take a step forward. If you don't kick it, it will be there again, and nothing will be done. Let's explain it with an example. However, let's talk about important things first. Thumb has several core events related to dragging. What is it? Right, that is, the slider in our common scroll bar, that is, the separator we can drag in the grid, that is, the small things used to change the window size by dragging in the lower right corner of the window. Thumb core events include: Dragstarted -- occurs when you press the left mouse button on it to start dragging; Dragdelta-as long as your drag is still in operation (left mouse button is not released), it will happen continuously; Dragcompleted -- Needless to say, this must have occurred after the drag operation. How can we use these three events? As you can imagine, when you start to drag the control, it turns gray and changes the position of the control during the drag process (as mentioned above, it does not take any action by default, so it needs to be manually processed ), after the process is completed, the appearance is restored, so that the three events have passed. However, in this example, I used the trigger of the control template, which is more convenient. See the demo

Put thumb in a canvas, because it is the only control that is absolutely positioned. Then we define a template for thumb to make thumb more beautiful.

<Window. resources> <controltemplate X: Key = "CT" targettype = "{X: Type thumb}"> <grid X: Name = "BG"> <grid. background> <lineargradientbrush startpoint = "0.2, 0" endpoint = "0.77, 0.9 "> <gradientstop color =" # aa0311 "offset =" 0.1 "/> <gradientstop color =" # cccccc "offset =" 0.62 "/> <gradientstop color =" # 82c3ff "offset =" 0.89 "/> </lineargradientbrush> </grid. background> </GRID> <controltemplate. triggers> <trigger property = "isdragging" value = "true"> <setter targetname = "BG" property = "background" value = "gray"/> </trigger> </ controltemplate. triggers> </controltemplate> </window. resources> <canvas X: Name = "G" width = "300" Height = "300" margin = ""> <thumb canvas. top = "0" canvas. left = "0" width = "35" Height = "35" template = "{staticresource CT}" dragdelta = "thumb_dragdelta"/> <textblock canvas. top = "2" canvas. left = "2" X: Name = "TT" fontsize = "24"> </textblock> </canvas>

Then, process the event in the background

 
Private void thumb_dragdelta (Object sender, system. windows. controls. primitives. dragdeltaeventargs e) {thumb mythumb = (Thumb) sender; double ntop = canvas. gettop (mythumb) + E. verticalchange; double nleft = canvas. getleft (mythumb) + E. horizontalchange; // prevents the thumb control from being dragged out of the container. If (ntop <= 0) ntop = 0; If (ntop> = (G. height-mythumb. height) ntop = G. height-mythumb. height; If (nleft <= 0) nleft = 0; If (nleft> = (G. width-mythumb. width) nleft = G. width-mythumb. width; canvas. settop (mythumb, ntop); canvas. setleft (mythumb, nleft); TT. TEXT = "Top:" + ntop. tostring () + "\ nleft:" + nleft. tostring ();}
 

CodeIt is not very complicated. I will not explain it much. It is mainly to prevent thumb from being dragged out of our visible edge. Otherwise, thumb will not be dragged back.