Silverlight Learning Style

The style in Silverlight is similar to the CSS concept in HTML. It can be written in a single file for reuse.

Styles are divided into three types of global styles according to the scope. The local styles are roughly the same as the global styles, and are placed in the lower part.

Internal Style

<Canvas>
<Button Height = "50" width = "150" content = "Hello World" canvas. Left = "50" canvas. Top = "20">
<Button. Style>
<Style targettype = "button">
<Setter property = "foreground" value = "red"> </setter>
<Setter property = "fontsize" value = "20"> </setter>
</Style>
</Button. Style>
</Button>

</Canvas>

 

Running Effect

 

The effective range of internal styles is only within this control, so the reuse effect cannot be achieved. This method is not recommended.

 

Local style and global style

A local style is usually defined in usercontrol. resources. It can only be used on this page.

<Usercontrol. Resources>
<Style X: Key = "buttonpartstyle" targettype = "button">
<Setter property = "foreground" value = "green"> </setter>
<Setter property = "fontsize" value = "20"> </setter>
</Style>
</Usercontrol. Resources>

A global style is usually defined in <application. Resources> and can be referenced throughout the project.

<Application. Resources>
<Style X: Name = "buttonwholestyle" targettype = "button">
<Setter property = "foreground" value = "orange"> </setter>
<Setter property = "fontsize" value = "26"> </setter>
</Style>

</Application. Resources>

Style definitions are all specified by the style element. You need to set a key attribute to differentiate different styles and specify the target type by specifying targettype. Use setter to declare the target attributes. In the page control, use staticresource to use this style.

Widget reference Style

<Button style = "{staticresource buttonpartstyle}" content = "hello" canvas. left = "50" canvas. top = "40" Height = "50" width = "150"/>

<Button style = "{staticresource buttonwholestyle}" content = "world" canvas. left = "50" canvas. top = "100" Height = "50" width = "150"/>

Running Effect

Style Rewriting

After a global style and a local style are defined, the style can be overwritten. That is, the internal style is higher than the global style and local style.

<Canvas>
<Button style = "{staticresource buttonpartstyle}" content = "hello" canvas. left = "50" canvas. top = "20" Height = "50" width = "150" foreground = "blue"/>
<Button style = "{staticresource buttonwholestyle}" Height = "50" width = "150" content = "world" canvas. Left = "50" canvas. Top = "100">
</Button>
</Canvas>

Effect

 

Although the foreground of the button is defined as green in the local style, it is displayed as blue after the internal style is rewritten.