WPF and Silverlight Learning notes (18): WPF style (style) and template (Template)

One, WPF style

Similar to the CSS in a Web application, you can define a uniform style (style) for the control in WPF. Styles are part of a resource, such as defining a uniform background color and font for a button:

1:　<Window.Resources>
2:　　　 <Style
3:　　　　　TargetType="Button">
4:　 　　　　<Setter　Property="Background"　 Value="Yellow"　/>
5:　　　　　<Setter　 Property="Margin"　Value="5"　/>
6:　　　 　　<Setter　Property="FontFamily"　Value="Comic　 Sans　MS"/>
7:　　　　　<Setter　 Property="FontSize"　Value="14"/>
8:　　　 </Style>
9:　</Window.Resources>
10:　 <StackPanel>
11:　　　<Button>Button　 A</Button>
12:　　　<Button　Foreground="Red" 　Background="White">Button　B</Button>
13:　 </StackPanel>

In terms of the results of execution:

Properties and values defined in style that affect the style of all controls in the window that are button-type

Additional attributes (such as foreground) can be defined in the button, overwriting the definition in style (Background)

This style, similar to the type selector in CSS, defines a style for a type.

You can also add the x:key attribute to a style (note that you also need to define targettype), and you can define a style based on a definition, for example, to change the size of the font and the foreground and background color of the text based on the style of the button just now:

1: <Window.Resources>
2: <style
3:targettype= "button" >
4: <setter property= "Background" value= "Yellow"/>
5: <setter property= "Margin" value= "5"/>
6: <setter property= "FontFamily" value= "comic Sans MS"/>
7: <setter property= "fontsize" value= "/>"
8: </Style>
9: <style
10:targettype= "button"
11:x:key= "Buttonstylea"
12:basedon= ' {staticresource {x:type Button}} ' >
<setter property= "Background" value= "Green"/>
<setter property= "foreground" value= "yellow"/>
: <setter property= "fontsize" value= "/>"
: </Style>
: </Window.Resources>
: <StackPanel>
: <button>button a</button>
<button foreground= "Red" background= "white" >button b</button>
: <button style= "{StaticResource Buttonstylea}" >button c</button>
<button style= "{StaticResource Buttonstylea}" content= "button D" >
: <Button.Foreground>
<lineargradientbrush startpoint= "0.5,0" endpoint= "0.5,1" >
: <LinearGradientBrush.GradientStops>
Num: <gradientstop offset= "0.0" color= "#FFFFFF"/>
: <gradientstop offset= "1.0" color= "#0000FF"/>
: </LinearGradientBrush.GradientStops>
: </LinearGradientBrush>
</Button.Foreground>
: </Button>
</StackPanel>