Silverlight utility tip series: 71. Silverlight Style

ThisArticleThe instance is based on the Silverlight utility series: 68. Silverlight resource dictionary resourcedictionary. If you have any questions about the data source, please refer to this article.

Style in Silverlight is equivalent to CSS in HTML and is an important component. It can be declared in usercontrol. resources, that is, the resources on the page or the control resources, or in APP. XAML or resourcedictionary dictionary resources.

Styles can be divided into inline styles (control style), intra-page styles (usercontrol. Resources style), and applicationsProgramDomain-level styles (in APP. XAML styles) and resourcedictionary dictionary Resources

The order of style is the proximity principle. For example, a control uses its own style first, and then searches for a style with the specified key in the resources on this page. If it is found, use this style, find the app. the style in the XAML is searched in the resourcedictionary dictionary resource.

A. Its declaration is <style targettype = "ListBox" X: Key = "ListBox" basedon = "{staticresource fontcolor}"> </style>

Targettype: Controls

X: Key: The style name key of this style. For implicit styles that do not require the X: key, we will describe it in the next section.

Basedon: The style to inherit from. Note that the inherited style must use basedon = "{staticresource fontcolor}" to specify the key of the upper-level style.

 

B. The style items are declared with the <setter> </setter> label, as shown in <setter property = "fontsize" value = "15"> </setter>

Property: What attributes are applied?

Value: What is the set value?

Similarly, you can use the following method to declare the setter value. Here, the entire datatemplate template is used as a setter value and the itemtemplate attribute for The ListBox attribute value is set.

<Setter property = "  Itemtemplate  " > <Setter. value> <datatemplate> <stackpanel orientation = "  Vertical  " > <Stackpanel orientation ="  Horizontal  " Margin = "  5  " Width = "  380  " > <Textblock text = "  {Binding artname}  " Margin = "  5 10 0 0  " > </Textblock> <textbox text = "  {Binding artcontent}  " Name = "  Tbname  " Margin = "  5  " > </Textbox> <textbox text = "  {Binding artauthor}  " Margin = " 5  " > </Textbox> <textblock text = "  {Binding artupdatetime}  " Margin = "  5 10 0 0  " > </Textblock> </stackpanel> <stackpanel orientation = "  Horizontal  " Visibility = "  Collapsed " > <Textbox text = "  {Binding artcontent}  " Width = "  280  " > </Textbox> </stackpanel> </datatemplate> </setter. value> </setter>

Finally, the style set for ListBox inherits from a fontcolor style,CodeAs follows:

<Application. Resources> <style targettype = "  ListBox " X: Key = "  Fontcolor  " > <Setter property = "  Foreground  " Value = "  Red  " > </Setter> </style> <style targettype = "  ListBox  " X: Key = " ListBox  "   Basedon = "  {Staticresource fontcolor}  " > <Setter property = "  Fontsize  " Value = "  15  " > </Setter> <setter property = "  Fontfamily  " Value = "  Georgia  " > </Setter> <setter property = "  Itemtemplate  " > <Setter. value> <datatemplate> <stackpanel orientation = "  Vertical  " > <Stackpanel orientation = "  Horizontal  " Margin = "  5  " Width = "  380  " > <Textblock text = "  {Binding artname}  " Margin = "  5 10 0 0  " > </Textblock> <textbox text = "  {Binding artcontent} " Name = "  Tbname  " Margin = "  5  " > </Textbox> <textbox text = "  {Binding artauthor}  " Margin = "  5  " > </Textbox> <textblock text = " {Binding artupdatetime}  " Margin = "  5 10 0 0  " > </Textblock> </stackpanel> <stackpanel orientation = "  Horizontal  " Visibility = "  Collapsed  " > <Textbox text = "  {Binding artcontent} " Width = "  280  " > </Textbox> </stackpanel> </datatemplate> </setter. value> </setter> </style> </application. Resources>

Use the following code to view the instance style:

<Usercontrol. Resources> <local: artlist X: Key = "  Sourcelist  " > </Local: artlist> </usercontrol. Resources> <grid X: Name = " Layoutroot  " Background = "  White  " Datacontext = "  {Staticresource sourcelist}  " > <ListBox X: Name = "  Lbres  " Itemssource = "  {Binding articlelist}  "   Style ="{Staticresource ListBox}"  Margin = "  0 50 0 0  "  Horizontalalignment = "  Left  " Verticalalignment = "  Top  "  Height = "  400  " > </ListBox> </GRID>

For example, you can see that the ListBox implements the template style and font size in the style, and also inherits the fontcolor in the fontcolor style. If you need the source code, click slstyle.zip to download it.