This is part seven of eight tutorials that walk through how to build a simple Digg client application using the Beta1 release of Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content.
<Download Code> Click here to download a completed version of this Digg client sample. </Download Code>
How to Customize the Look and Feel of Controls
One of the most powerful features of the WPF and Silverlight programming model is the ability to completely customize the look and feel of the controls used within it. This allows developers and designers to sculpt the UI of controls in both subtle and dramatic ways, and enables a tremendous amount of flexibility to create exactly the user experience desired.
In this tutorial segment we'll look at a few ways you can customize controls, and then close out by polishing up the user interface of our Digg application using these techniques.
Customizing the Content of Controls
In Part 1 of our tutorial we added a simple button control to the page and demonstrated how to set a custom "Push Me!" text string for its content. We then wired up a "Click" event handler that executed code when it was clicked:

This caused the button to render like below within the browser:
One of the things that might surprise you about the Button control is that its "Content" property does not have to be a simple string like "Push Me!". We can in fact set the "Content" property to be any sequence of Shapes or Controls we want.
For example, we could embed a StackPanel with an <Image> and <TextBlock> control within it:
This will cause our Button to look like below at runtime. Note that it still retains the same functionality behavior (push it and the button will still depress, and the click event handler will fire like before):