In Silverlight 2, many of the controls have a content property where you might expect a text property. While it is common to fill that property with text, it isn't required that you do so.
For example, you might create an application with two buttons...
The code begins by defining three rows, the first of which serves as a margin, and two columns, the first of which is a margin. The first button (red arrow) fills its content with text. Notice also that the first button is self closing. The second button (blue arrow) is not self closing. It is placed in the second row, and all the same attributes are set save one: the content. That will be set in the property element Button.Content
Like matryoshka dolls
To demonstrate the power and flexibility of what you can put into a content property, I'm going to fill the button's content with a stack panel that will in turn contain 3 controls:
- A text block with the word Play on the left
- A pair of radio buttons on the right that will be arranged in a stack panel and surrounded by a border
- In the middle will be a check box whose content will itself not be text, but rather will be a stack panel that will contain two radio buttons. But just to take this one step into the absurd, one of the radio buttons' content property will itself not be text but will be a Hyperlink button.
Here's what it looks like with both buttons in the grid,
Let's build it up quickly so that we can get to that middle control.
We begin with the declaration of the second button and its content property,
In this block of code we see the second button declared and we see its content property opened. Within the content a stack panel is opened and declared to be horizontal so that the three controls will align next to one another rather than atop one another.
The first of the three is a TextBlock, for which we set various attributes for the foreground color, margin, etc.
The second element is a Checkbox declared on line 28, but which we surround with a Border on line 26, creating a bounding rectangle filled with a nice offsetting background color. Again, we use the Content property on line 32 to fill the check box with something other than text,
The contents of the Checkbox consist of a stack panel (line 33) to hold the radio buttons (lines 36 and 42 one atop the other. The first radio button, however, fills its content on lines 36-40 with a HyperlinkButton which not only presents the word Loud but also provides a link to the Wikipedia article on the term Loud. This could continue to regress indefinitely, but I finally called a halt, filling the content of the HyperlinkButton with text on line 39.
The third element in our button (remember the button?) is a stackPanel inside a Border that holds a pair of Radio buttons to set the musical style. The Rectangle on line 48 is a hack that I'm using to provide a bit of spacing; since I've given it width but no background color, it is invisible, but pushes the two elements apart.
When you run the application, all the inner elements work and you can wire event handlers to them (we'll cover that in another Tip of the Day) yet the button itself works through Routed Events.