A good example of combining style with controltemplate (using button as an example)

<! -- Button background painter -->
<Lineargradientbrush X: Key = "buttonbackgroundbrush">
<Gradientstop offset = "0" color = "beige"/>
<Gradientstop offset = "1" color = "white"/>
</Lineargradientbrush>
<SYS: String X: Key = "bgimg"> ".. \ images \ bgimg.png" </sys: String>

<Color x: Key = "bgcolorblack"> black </color>

<! -- Button template definition. Description: A control template can be customized at will not only by disassembling the control, but also by modifying the visual element tree, as long as the expected results are met, programmers may need to write a large number of triggers, styles, and so on. For these effects, refer to the XAML code generated when "disassembling controls" -->
<Controltemplate X: Key = "testbuttontemplate" targettype = "{X: type button}">
<Border X: Name = "border" borderthickness = "1" borderbrush = "black"
Background = "{staticresource buttonbackgroundbrush }"
Cornerradius = "10">
<Grid>
<Image X: Name = "image" Source = "a.png"
Horizontalalignment = "center"
Verticalalignment = "center"
Stretch = "fill" Height = "50" width = "50"/>
<Label content = "{binding relativesource = {relativesource mode = templatedparent}, Path = content }"
Horizontalalignment = "center"
Verticalalignment = "center"/> <! -- This custom template destroys many of the original effects and functions of the button control (for example, the external display of the content attribute value of the button control ), therefore, <label content is used to display the attribute value of <button content. We still assign a value to the content attribute of the button outside, and this value is displayed in the content attribute value of lable, therefore, we need to use "binding relativesource" to obtain the value of the button content attribute we entered outside the control.
</GRID>
</Border>

<Controltemplate. triggers>
<Trigger property = "ismouseover" value = "true"> <! -- For button -->
<Setter targetname = "image" property = "Source" value = "B .png"/> <! -- But it targets one of the components of the button: "Images", rather than other components -->
</Trigger>
</Controltemplate. triggers>
</Controltemplate> <! -- A data template is a template that describes the "data items" style. The style of all data records in the dataset is consistent. The control template is for the external display of the control, data is irrelevant. Data templates are for data items, and control templates are for controls. Data templates are for rendering data in controls, and control templates are for rendering controls, excluding data -->

<! -- Button style definition. You only need to reference this in the style of the button. -->
<Style X: Key = "testbuttonstyle" targettype = "{X: type button}">
<Setter property = "fontsize" value = "15"/>
<Setter property = "fontweight" value = "bold"/>
<Setter property = "snapstodevicepixels" value = "true"/>
<Setter property = "foreground" value = "blue"/>
<Setter property = "template" value = "{staticresource testbuttontemplate}"/> <! -- Good -->
</Style>

 

Note: The style, controltemplate, lineargradientbrush, and other elements in the above example all belong to "resources" (rather than controls), so they are usually placed in the resource area or resource dictionary. User Controls and windows can be divided into "resource areas" and "layout areas". resource areas store various resources (such as style, controltemplate, datatemplate, string, and brush, and the resource ID is X: Key). Various controls (such as grid, button, Textbox, and X: Name) are stored in the layout area. Note that, many controls also have a resouce.

 

Important WPF knowledge Review:

Style, controltemplate, and datatemplate can be tied together. In addition, the latter two can also be embedded into the style.

Dependency attributes (usually owned by the control, which can be bound to the attributes of viewmodel), routing events (which can cause the corresponding "event trigger" to be triggered)

Trigger: attribute, data, and event (the triggering of a route event will trigger the event, and animation is usually used in the event trigger). The trigger has the following meanings: it is mainly used to produce "Interface Effects"

Animation: storybord is often used for animation effects.

To sum up, the above knowledge is used to produce the interface effect, so the core of WPF is to render the interface effect.

A good example of combining style with controltemplate (using button as an example)