Essential Silverlight 2 Up-to-Date

Chapter 11. Styles and Templates

In the first years of HTML and the World Wide Web, developers used now-deprecated tags such as <font> extensively to change the appearance of elements on a page. This approach worked well but had some disadvantages: sharing a layout among multiple pages and elements required extensive copy-and-paste operations, and from an architectural point of view, mixing layout information and actual content is a bad idea. Enter Cascading Style Sheets (CSS), a technology to define so-called styles that can be applied to elements. This keeps layout and content information apart and also enables reuse.

Thanks to the split in XAML and C#, Silverlight is very keen on separating code and content. This chapter introduces several techniques to separate content and layout. You will learn how to apply style information to elements and also to reuse layouts. With Silverlight templates, you have a mighty tool to shape the visual representation of almost every Silverlight element. Finally, the Visual State Manager helps you handle complex elements that look different depending on the context.

Styles

So far, we’ve used element properties such as FontSize and Foreground to fine-tune the visual appearance of an XAML element. But this gets cumbersome if you have, say, several elements of the same type on a page and want them all to look uniform. Hello, copy-and-paste.

One possible remedy is the use of styles in Silverlight, which are comparable to the CSS styles you know from HTML. ...