Windows Phone Development (16): style and control templates

Style is also mentioned in the previous article on resources. style is like the CSS style table that we often use for HTML page formatting. It is a visual element for a specific style, it can be said that it is a reusable Property setting list for the control. This greatly improves the efficiency for multiple controls of the same type that need to set the same property value, we do not need to perform repeated actions for each control.
The following is a textbox style example. We want to reference the style in the resource so that all textbox controls on the page have a uniform appearance and can only enter numbers.

<Phone: phoneapplicationpage. Resources> <br/> <! -- Style without key, apply to all textblock elements --> <br/> <style targettype = "textblock"> <br/> <setter property = "fontsize" value = "40"/> <br/> <setter property = "foreground" value = "yellow"/> <br/> </style> <br/> <! -- A style with a key. Only elements that reference the resource are applied. --> <br/> <style X: key = "mytextboxstyle" targettype = "textbox"> <br/> <setter property = "fontsize" value = "40"/> <br/> <setter property = "foreground" value = "blue"/> <br/> <setter property = "inputscope"> <br/> <setter. value> <br/> <inputscope> <br/> <inputscopename namevalue = "Number"/> <br/> </inputscope> <br/> </setter. value> <br/> </setter> <br/> </style> <br/> </Phone: phoneapplicationpage. resources> <br/> <grid X: Name = "layoutroot" background = "Transparent"> <br/> <grid. rowdefinitions> <br/> <rowdefinition Height = "Auto"/> <br/> <rowdefinition Height = "*"/> <br/> </grid. rowdefinitions> </P> <p> <textblock grid. row = "0" X: Name = "pagetitle" text = "style example" margin = "9,-7,0, 0 "style =" {staticresource phonetexttitle1style} "/> </P> <p> <grid X: Name =" contentpanel "grid. row = "1" margin = "12, 10, 12, 0"> <br/> <grid. rowdefinitions> <br/> <rowdefinition Height = "Auto "/> <br/> <rowdefinition Height = "Auto"/> <br/> <rowdefinition Height = "Auto"/> <br/> </grid. rowdefinitions> <br/> <grid. columndefinitions> <br/> <columndefinition width = "2 *"/> <br/> <columndefinition width = "3 *"/> <br/> </grid. columndefinitions> <br/> <textblock grid. column = "0" grid. row = "0" text = "text 1:"/> <br/> <textblock grid. column = "0" grid. row = "1" text = "text 2:"/> <br/> <textblock grid. column = "0" grid. row = "2" text = "Text 3:"/> <br/> <textblock grid. column = "0" grid. row = "3" text = "text 4:"/> <br/> <textblock grid. column = "0" grid. row = "4" text = "text 5:"/> </P> <p> <textbox grid. column = "1" grid. row = "0" style = "{staticresource mytextboxstyle}"/> <br/> <textbox grid. column = "1" grid. row = "1" style = "{staticresource mytextboxstyle}"/> <br/> <textbox grid. column = "1" grid. row = "2" style = "{staticresource mytextboxstyle}"/> <br/> <textbox grid. column = "1" grid. row = "3"/> <br/> <textbox grid. column = "1" grid. row = "4"/> <br/> </GRID>

 

Styles can be declared in resources in two ways, one with a key value or the other without a key value.
1. The style with a key is not automatically applied to the element/control unless the style attribute of the element references the key of the resource;
2. Style resources without keys are automatically applied to all elements of the same type on the current page (if the resource is declared on the current page. Therefore, in the above example, you will see a textblock column on the left. They do not explicitly set the style attribute, but they all reference the first style, this style does not contain keys.
In the textbox column on the right, the style attributes are not explicitly set in the last two columns, so they are kept in the default style.

 

 

 

Control templates are not commonly used, unless you have high requirements on the behavior effects of the control, because we cannot make the control appearance too costly, which reduces the user experience, simple and clear things are actually the most comfortable to see.
To customize a control template, you must first understand the status.
If you have developed WPF before, you will know that in. net 3.5, the custom control template, the Response Policy for changes to the control status is completed through the trigger. net 4 has the concept of state, and Silverlight 3 has introduced this concept, which makes the control state management more convenient and flexible.
Another point is that the status is grouped. The status in each group is mutually exclusive, that is, the status cannot occur at the same time, and only one status in the group can occur at each time, however, the status of different groups does not conflict. After understanding the status, there is another concept, that is, components. This is a good understanding. For example, we want to assemble a car, which parts are needed, where the tires are placed, and how the doors are placed. For complex controls, there can be n controls or UI elements. Since WPF completely separates the UI and code logic, sometimes we also want to interact with the UI elements, for example, whether a UI element is transparent, whether it is moved, or whether a button in the template may trigger its click event. To facilitate the background code to find these components, therefore, these components are uniformly named during control development. So how do you know the status and specific components of a template? Obtain the attribute attributes attached to the definition of the control class. For example, the status and parts of the button control include:

 

 

// Abstract: <br/> // indicates the button control. <Br/> [templatevisualstate (name = "unfocused", groupname = "focusstates")] <br/> [templatevisualstate (name = "disabled", groupname = "commonstates")] <br/> [templatevisualstate (name = "focused", groupname = "focusstates")] <br/> [templatevisualstate (name = "pressed", groupname = "commonstates")] <br/> [templatevisualstate (name = "normal", groupname = "commonstates")] <br/> [templatevisualstate (name = "Mouseover", groupname = "commonstates")] <br/> public class button: buttonbase

 

The button control is a content control, which is not complex and has no components. Next, we will take the button as an example to customize a template for it. Note that it takes time to write a custom template in XAML. You can choose to use the design tool express blend. Of course, when learning, you 'd better write it first.

<Phone: phoneapplicationpage. Resources> <br/> <controltemplate X: Key = "template1" targettype = "buttonbase"> <br/> <grid> <br/> <! -- Status group --> <br/> <visualstatemanager. visualstategroups> <br/> <visualstategroup X: Name = "commonstates"> <br/> <visualstate X: Name = "normal"/> <br/> <visualstate X: name = "Mouseover"/> <br/> <visualstate X: Name = "pressed"> <br/> <storyboard> <br/> <doubleanimation <br/> storyboard. targetname = "pressed" <br/> storyboard. targetproperty = "opacity" <br/> to = "1" Duration = "0: 0. 5 "/> <br/> </storyboard> <br/> </visualstate> <br/> <visualstate X: name = "disabled"> <br/> <storyboard> <br/> <doubleanimation <br/> storyboard. targetname = "Disable" <br/> storyboard. targetproperty = "opacity" <br/> to = "0.5" Duration = "0: 0. 5 "/> <br/> </storyboard> <br/> </visualstate> <br/> </visualstategroup> <br/> <visualstategroup X: name = "focusstates"> <br/> <visualstate X: Name = "focused"> <br/> <storyboard> <br/> <doubleanimation <br/> storyboard. targetname = "focussbd" <br/> storyboard. targetproperty = "opacity" <br/> to = "0.88"/> <br/> </storyboard> <br/> </visualstate> <br/> </visualstategroup> <br/> </visualstatemanager. visualstategroups> <br/> <border borderbrush = "{templatebinding borderbrush}" <br/> borderthickness = "{templatebinding borderthickness}"> <br/> <grid X: name = "background" background = "{templatebinding background}"> <br/> <rectangle X: name = "pressed" opacity = "0" radiusx = "2" radiusy = "2"> <br/> <rectangle. fill> <br/> <lineargradientbrush <br/> startpoint = ". 5, 0 "<br/> endpoint = ". 5, 1 "> <br/> <gradientstop color =" skyblue "offset = ". 1 "/> <br/> <gradientstop color =" blue "offset = ". 9 "/> <br/> </lineargradientbrush> <br/> </rectangle. fill> <br/> </rectangle> <br/> <contentpresenter X: name = "contentpresenter" <br/> encoding = "{templatebinding encoding}" <br/> verticalignment = "{templatebinding encoding}" <br/> margin = "{templatebinding padding} "<br/> content =" {templatebinding content} "<br/> contenttemplate =" {templatebinding contenttemplate} "/> <br/> <rectangle X: name = "Disable" opacity = "0" fill = "gray" radiusx = "2" radiusy = "2"/> <br/> <border X: name = "focussbd" borderbrush = "lightgreen" borderthickness = "2" cornerradius = "2" opacity = "0"/> </P> <p> </GRID> <br /> </Border> <br/> </GRID> <br/> </controltemplate> <br/> </phone: phoneapplicationpage. resources> </P> <p> <grid X: Name = "contentpanel" margin = "12, 0, 135,155 "> <br/> <button content =" button "Height =" 72 "horizontalalignment =" Left "margin =, 160 "name =" button1 "verticalignment =" TOP "width =" "template =" {staticresource template1} "/> <br/> </GRID>

The control template is sometimes difficult to explain in one or two sentences. Although it seems like a lot of things, it is actually very simple. It only includes two things: State and UI elements, it depends on how you design it.

If you say there is any way to help you learn and study the control templates, of course there are some. As mentioned above, express blend is a very useful design tool, you can use it as a graphic processing software. It will automatically generate XAML based on your design, which is very useful. The tool provided by the Windows Phone SDK is free of charge. Do not be stingy during development. Use it boldly. You can't waste it because you don't need money and are so powerful.