Differences between style and template

Style is an object used to set various properties of a control.
What style can do is to set the value of an existing property on the control.
Imagine that our control is a car, a style can be said to be similar to "Wheel size = 17", "body color = cherry red"... and so on.
A template defines the components of a vehicle. for example, a cheap convertible template may have no ceiling at all, or a car's template can decide that he has two or four doors and four or eight wheels.
When I explain the two, I always tell people that the template defines their skeleton, and the style is how they dress up (I like to use a pirate as a metaphor because some people have one eye, or a leg, or an arm, is a good example of template use ).
Interestingly, you can set any attributes of the control through the style, including the template itself. Because it is an attribute, you can see the tools (blend) most often, when you want to override a template of a control, they overwrite the entire style and template attributes of the control.
It doesn't matter if you don't understand it.ArticleSo that you can understand.
The magic of generic. XAML is to define the default appearance of a control. Let's assume that we want to create a gelbutton control:

Copy content to clipboard

Code :

Public class gelbutton: button
{
}

It is simple enough. Now we want to use it in page. XAML. We have added namespace and the definition of this control in the page.

Copy content to clipboard

Code:

<Usercontrol X: class = "stylingsample. Page"
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Width = "400" Height = "300"
Xmlns: samples = "CLR-namespace: stylingsample">
<Stackpanel width = "50">
<Button content = "TOP" Height = "50"/>
<Samples: gelbutton content = "Cream" Height = "50"> </samples: gelbutton>
<Button content = "bottom" Height = "50"> </button>
</Stackpanel>
</Usercontrol>

Are you surprised to see the following results?

I cannot tell you that you should be surprised or not surprised, but I can tell you what happened!

The control has no appearance by default, and you need to define the appearance for it. This is done by specifying a valid control template for the control [by using the template attribute of the control class]

To specify this template attribute, you can do the following:

Copy content to clipboard

Code:

Public gelbutton ()
{
This. template = xamlreader. Load ("<controltemplate xmlns = 'HTTP: // schemas.microsoft.com/client/2007'
> <Grid...> </GRID> </controltemplate> ");
}

However, a better way is to save the definition of the control template in a "generic. resource dictionary, and the file will be automatically loaded during the magic runtime. your template will be associated with your control through the targettype attribute. this template will be called "Built-in style "). Here are some details about creating built-in styles.
Generic. XAML isProgramThe resource dictionary file in the set. The default generic. XAML looks like this:

Copy content to clipboard

Code:

<Resourcedictionary
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
>
</Resourcedictionary>

To define the appearance of our gelbutton control, we need to start with some default templates. we recommend that you use the stylebrowser application tool of David Anson to copy the default style from the button to generic. in the XAML file.
[Unfortunately, the default template of the button is too large, so I used a simpler template for the purpose of practice].

Copy content to clipboard

Code:

<Resourcedictionary
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns: samples = "CLR-namespace: stylingsample; Assembly = stylingsample"
>
<Style targettype = "samples: gelbutton">
<Setter property = "background" value = "black"/>
<Setter property = "foreground" value = "white"/>
<Setter property = "template">
<Setter. value>
<Controltemplate targettype = "samples: gelbutton">
<Grid X: Name = "rootelement">
<Ellipse width = "{templatebinding width }"
Height = "{templatebinding height }"
Fill = "{templatebinding background }"
/>
<Contentpresenter
Content = "{templatebinding content }"
Contenttemplate = "{templatebinding contenttemplate }"
Foreground = "{templatebinding foreground }"
Verticalalignment = "center" horizontalalignment = "center"
/>
</GRID>
</Controltemplate>
</Setter. value>
</Setter>
</Style>
</Resourcedictionary>

Let's analyze what we need to create this template:
1. add an xmlns: samples to the resource dictionary.
2. next, define the style and set the target control type (targettype) that we want to use the style ); you usually set the target type when defining a style so that your template can discover attributes and make them take effect. when setting this in XAML, the magic thing is to associate the style with the target control type through this declaration information. Now, if no other style is used after the control is instantiated, this style will be used as the default style.
3. the rest is simple style definitions. templatebinding may be the most interesting part. This creates a binding between the property we set and the actual property of the control. for example,
creates a binding and associates the foreground attribute of content presenter with the foreground attribute of the actual control.
This allows us to easily define user interface styles in design tools. in blend or XAML code, you can declare a button or
For more information, see the mix presentation of Karen Corby. on "rich, dynamic UIS ".
now we can run the same code above, but changed the style in the resource dictionary:

Since I have created a template binding (templatebinding) For background and foreground, I can proceed further

Copy content to clipboard Code: <Usercontrol X: class = "stylingsample. Page"
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Width = "400" Height = "300"
Xmlns: samples = "CLR-namespace: stylingsample">
<Stackpanel width = "50" margin = ",">
<Samples: gelbutton content = "" Height = "20.4"
Rendertransformorigin = "0.5, 0.5" width = "48.8" canvas. zindex = "2">
<Samples: gelbutton. Background>
<Radialgradientbrush>
<Gradientstop color = "# fff5deb3"/>
<Gradientstop color = "# ffe0b05c" offset = "0.826"/>
</Radialgradientbrush>
</Samples: gelbutton. Background>

</Samples: gelbutton>
<Samples: gelbutton content = "ham" Height = "16" canvas. zindex = "1">
<Samples: gelbutton. Background>
<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0">
<Gradientstop color = "# ffd64141"/>
<Gradientstop color = "# ffe23939" offset = "1"/>
<Gradientstop color = "# fedab6b6" offset = "0.43299999833106995"/>
</Lineargradientbrush>
</Samples: gelbutton. Background>
</Samples: gelbutton>
<Samples: gelbutton content = "" Height = "16">
<Samples: gelbutton. Background>
<Radialgradientbrush>
<Gradientstop color = "# fff5deb3"/>
<Gradientstop color = "# ffecc06e" offset = "0.991"/>
</Radialgradientbrush>
</Samples: gelbutton. Background>
</Samples: gelbutton>
</Stackpanel>
</Usercontrol>

I only waste 10 minutes and 40 minutes to introduce generic. XAML and built-in styles. I promised to answer a few questions:
1. Why do I use generic. XAML to replace hardcoded templates with built-in styles?
compared with setting templates in the code, putting your templates in the resource dictionary is a good way because you can easily replace these templates. imagine if you need to create three theme styles, it will be difficult to process them in hard encoding mode.
In addition, if you place templates in the resource dictionary file, these templates can reference other resources in the dictionary.
2. for all the examples I have seen, the built-in style is useless. It always tells us to use it in the app. embedded style saved in XAML?
the built-in style is designed for the control author to use. When writing a control, you provide the control's appearance and operations. most examples use simple button styles, so they adopt different methods. (directly declare relevant attributes in XAML)
3. in the above demonstration, you inherited the button and did nothing except the built-in style. Is this the best practice?
I like this practice (but I am from an enterprise background, we create a bloated framework, often just to inherit and create an abstract object to adapt to future changes ), one advantage is that you can use your buttons anywhere without specifying a style explicitly. Of course, the disadvantage is that inheritance requires a little extra performance and memory, but from what I have seen, this is very insignificant.
Similarly, I cannot call it a best practice. It is more of my personal preferences.

4. Does the built-in style seem to allow me to change the style of all controls in one place? I don't want to add .
This is true if you can inherit and the class is not sealed. Even so, after creating some solutions, I realized that I had the illusion of centralization [a term I edited].
the reason is that I can change the style in one place using the built-in style. this is the same as using the app. XAML is the same. You can change the style for all objects in one place. you have copied many style names, but the style is in one place.
5. When cannot I use a built-in style?
If the class is sealed or they have a protected template attribute, you cannot use the built-in style.
6. can I create only one generic. XAML overwrites system. windows. does the template of controls not inherit?
I do not know how to do this. it sounds not a good idea. I tried to do this to see if it was feasible, but he didn't work.
7. will the use of built-in styles damage or affect the control status and other components?
NO. If your style uses the same name, the code will still select everything as an inline style.