One-step learning of Silverlight 2 series (8): use styles to encapsulate controls

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The one-step learning Silverlight 2 series article takes you to Silverlight 2 development quickly.

This article is the eighth in a series of articles. It mainly introduces how to use the Style element to encapsulate the view of controls in Silverlight.

Silverlight supports a Style mechanism that allows us to encapsulate the property values of controls into reusable resources. We can save these style declarations in other files independent from the page, and then we can reuse them across controls and pages (or even across multiple applications) in an application ). In some basic customization scenarios, the concept is similar to reusing CSS in HTML.

Inline Style

In fact, the concept of inline style is the same as the style of the element specified in HTML. in XAML, attributes are set. For example, in the following section of XAML, we add two buttons, set the font style:

<Canvas Background = "# 46461F"> <Button Width = "200" Height = "60" Background = "Red" Canvas. top = "90" Canvas. left = "30" Content = "Submit" FontFamily = "" FontSize = "24" FontWeight = "Bold" Foreground = "Green"/> <Button Width = "200 "Height =" 60 "Background =" Red "Canvas. top = "90" Canvas. left = "260" Content = "Remove" FontFamily = "" FontSize = "24" FontWeight = "Bold" Foreground = "Red"/> </Canvas>

The following figure shows the effect after running:

Using inline styles is not a good practice. styles cannot be reused, and page XAML code is messy. These shortcomings are similar to setting element styles directly in HTML. A recommended method is to use a global style.

Global Style

To better reuse styles and reduce code in XAML, we recommend that you use global styles. Define two styles in App. xaml

<Application. resources> <Style x: key = "button1" TargetType = "Button"> <Setter Property = "FontFamily" Value = ""> </Setter> <Setter Property = "FontSize" Value = "24 "> </Setter> <Setter Property =" Foreground "Value =" Green "> </Setter> <Setter Property =" Background "Value =" Red "> </Setter> </Style> <Style x: key = "button2" TargetType = "Button"> <Setter Property = "FontFamily" Value = ""> </Setter> <Setter Property = "FontSize" Value = "24 "> </Setter> <Setter Property =" Foreground "Value =" Red "> </Setter> <Setter Property =" Background "Value =" Red "> </Setter> </Style> </Application. resources>

You must specify a unique Key through the Style element, which is similar to the class name in CSS or ASP. the Skin function in NET 2.0, and the TargetType is used to specify the control on which the style will be used, and each attribute is specified by Setter. In XAML, The StaticResource tag syntax is used to specify a specific style:

<Canvas Background = "# 46461F"> <Button Width = "200" Height = "60" Canvas. top = "90" Canvas. left = "30" Content = "Submit" Style = "{StaticResource button1}"/> <Button Width = "200" Height = "60" Canvas. top = "90" Canvas. left = "260" Content = "Remove" Style = "{StaticResource button2}"/> </Canvas>

Compared with the above XAML file, the code is much cleaner now, which allows us to focus only on the application business, you don't need to consider its appearance (in Beta1, it seems that an error will be reported after some attributes are set ). The effect after running is as follows:

Style Rewriting

After a global style is defined, the style can be overwritten, that is, the inline style has a higher priority than the global style. In the preceding example, in XAML, the Foreground color of the first button is specified as blue by using the Foreground attribute:

<Canvas Background = "# 46461F"> <Button Width = "200" Height = "60" Canvas. top = "90" Canvas. left = "30" Content = "Submit" Style = "{StaticResource button1}" Foreground = "Blue"/> <Button Width = "200" Height = "60" Canvas. top = "90" Canvas. left = "260" Content = "Remove" Style = "{StaticResource button2}"/> </Canvas>

Although the foreground color of the first button is set to green in the global style, it is displayed as blue after being rewritten using the inline style:

Conclusion

This article briefly introduces how to use styles in Silverlight 2 to encapsulate the view of controls. Global styles can be used for encapsulation of any controls.

Next article: Learn Silverlight 2 series (9) step by step: use the control Template