Continue to the WPF -- slider Control

 

The slider control is a very common slider. The display of a series of sample scale values is displayed on the control, and a slider that can be dragged exists, you can drag the slider to control the value of the control. Shows the volume adjustment slider for Windows.

The volume adjustment slider in the QQ Audio Chat setting window is shown.

 

 

In this way, we can intuitively understand the slider control.

Next let's take a look at the composition of the control:

Then, view the slider class definition to find the body part.

 
[Localizabilityattribute (localizationcategory. ignore)] [templatepartattribute (name = "part_selectionrange", type = typeof (frameworkelement)] [templatepartattribute (name = "part_track", type = typeof (track)] public class slider: rangebase
 

Here, we can see that there is a very important component, that is, the component named part_track, which is a track control that we use when customizing the scroll bar, it consists of two repeatbuttons and a thumb. The repeatbutton is not much different from the normal button, but it can record the number of clicks and set the response delay time, here we only use it as a button.

The entire track control dynamically displays the widget's appearance by changing the location of thumb and the size of the two repeatbuttons.

To display the dial line, a tickbar control is required. This control is simple. It does not need to set a template or style. You only need to use several attributes.

Maximum -- maximum value, similar to the progress bar;

Minimum -- corresponds to the minimum value;

Ticks -- set the dial line position. You can set multiple values. This attribute can be used if the scale needs to be displayed unevenly;

Tickfrequency-scale interval, that is, the distance between the dial lines. If the minimum value is 0, the maximum value is 100, and the tickfrequency value is set to 5, the scale bar displays 20 dial lines evenly.

Note: tickfrequency and ticks cannot be used at the same time because they are evenly distributed, unevenly distributed, and conflicting settings.

Placement -- the position of tick in the slider control. If the slider is horizontal, It is up or down. If the slider control is vertical, it is left or right.

The following is an example of a tick control. This is only a demonstration. it is meaningless to use tick independently.

 

 
<Tickbar Height = "15" width = "180" ticks =, 100 "Maximum =" "minimum =" 0 "fill =" darkmagenta "placement =" TOP "/>
 

 

Now we can customize a slider. This example is horizontal. It uses a grid for layout. There are three rows in total, and a tickbar is placed at the top and bottom to display the scale, place a track in the middle as the main part.

To dynamically display the scale value, we bind the value attribute of slider to the text attribute of textblock. In this way, as long as the value of the slider control changes, it can be dynamically displayed in textblock, as we have mentioned earlier, the property system of WPF is a dependency attribute, so it can be dynamically associated.

 

 

 

 

<Window X: class = "sample_tickbar.win2" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "win2" Height = "300" width = "550"> <window. resources> <style X: Key = "styleforrepeatbutton" targettype = "{X: Type repeatbutton}"> <style. setters> <setter property = "background"> <setter. value> <lineargradientbrush startpoint = "0.5, 0" endpoint = "0.5, 1 "> <gradientstop color =" lightgreen "offset =" 0 "/> <gradientstop color =" yellow "offset =" 1 "/> </lineargradientbrush> </setter. value> </setter> <setter property = "height" value = "10"/> <setter property = "borderbrush" value = "Transparent"/> <setter property = "focusable "value =" false "/> </style. setters> <style. triggers> <trigger property = "ispressed" value = "true"> <setter property = "background"> <setter. value> <lineargradientbrush startpoint = "0.5, 0" endpoint = "0.5, 1 "> <gradientstop color =" lightblue "offset =" 0 "/> <gradientstop color =" skyblue "offset =" 1 "/> </lineargradientbrush> </setter. value> </setter> </trigger> </style. triggers> </style> <controltemplate X: Key = "tmpthumb" targettype = "{X: type thumb} "> <ellipse name =" E "width =" 13 "minheight =" 20 "fill =" blue "/> <controltemplate. triggers> <trigger property = "ismouseover" value = "true"> <setter targetname = "E" property = "fill" value = "red"/> </trigger> </ controltemplate. triggers> </controltemplate> <controltemplate X: Key = "tmp" targettype = "{X: type slider}"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto" minheight = "25"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <tickbar X: Name = "TOP" fill = "Magenta" grid. row = "0" horizontalalignment = "stretch" placement = "TOP" Height = "8" visibility = "Collapsed"/> <Track X: Name = "part_track" grid. row = "1" horizontalalignment = "stretch"> <track. increaserepeatbutton> <repeatbutton style = "{staticresource styleforrepeatbutton}" command = "Slider. increaselarge "/> </track. increaserepeatbutton> <track. decreaserepeatbutton> <repeatbutton style = "{staticresource styleforrepeatbutton}" command = "Slider. decreaselarge "/> </track. decreaserepeatbutton> <track. thumb> <thumb Height = "20" template = "{staticresource tmpthumb}"/> </track. thumb> </track> <tickbar X: Name = "bottom" grid. row = "2" fill = "Magenta" horizontalalignment = "stretch" visibility = "Collapsed" placement = "bottom" Height = "8"/> </GRID> <controltemplate. triggers> <trigger property = "tickplacement" value = "topleft"> <setter targetname = "TOP" property = "visibility" value = "visible"/> </trigger> <trigger property = "tickplacement" value = "bottomright"> <setter property = "visibility" targetname = "bottom" value = "visible"/> </trigger> <trigger property = "tplacickement "value =" both "> <setter targetname =" TOP "property =" visibility "value =" visible "/> <setter targetname =" bottom "property =" visibility "value = "visible"/> </trigger> </controltemplate. triggers> </controltemplate> </window. resources> <grid. rowdefinitions> <rowdefinition Height = "50"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <slider X: Name = "slidertest" grid. row = "0" margin = "10, 5, 100 "Maximum =" "minimum =" 0 "tickfrequency =" 1 "template =" {staticresource TMP} "value =" 20 "tickplacement =" bottomright "/> <textblock Grid. row = "1" text = "{binding Path = value, elementname = slidertest}" fontfamily = "" fontsize = "24" fontweight = "bold" margin = "150,0, 150,0 "horizontalalignment =" center "/> </GRID> </WINDOW>