At the end of the day, there are a few controls that don't cleanly fit in to the other categories. Call these controls "utility" controls or "bonus" controls or whatever you like, but this wouldn't be a complete introduction of all Silverlight 2.0 controls if we didn't briefly give them some attention.

ToolTip

ToolTip, while basic, is a neat little utility control that allows you to attach attractive ToolTips to just about anything in a Silverlight application. And since they're provided by the plug-in (and not the browser), you have the ability to take complete control over their styling and content. Listing 26 shows a simple ToolTip attached to a TextBlock providing users context when they hover over the element.

Listing 26 - Silverlight ToolTip

<TextBlock Text="Howdy Silverlight" control:ToolTipService.InitialShowDelay="500">
      <control:ToolTipService.ToolTip>
            <ToolTip HorizontalOffset="10" VerticalOffset="10" 
                  Content="Here's a tip..." />
      </control:ToolTipService.ToolTip>
</TextBlock>

Normally, a TextBlock doesn't expose a ToolTip property (like, say, a Button does). That's where the ToolTipService comes in to play (seen in Listing 26). Aside from giving you control (in milliseconds) over InitialShowDelay, ShowDuration, and BetweenShowDelay (as in, how long until the tip is displayed again), the ToolTipService also enables you to attach ToolTips to objects that don't expose them by default. To use the ToolTipService in Silverlight 2 beta 1, though, you'll need to add an extra namespace reference to your XAML page since the Service is not built-in to the core Silverlight assembly (unlike ToolTip). Listing 27 shows you the code that you need to add to your page.

Listing 27 - ToolTipService namespace reference

xmlns:control="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

You may have also noticed in Listing 27 the HorizontalOffset and VerticalOffset properties. These properties specify the offset distance in pixels relative to the cursor, not the control. At present there is no way to change other aspects of the tip's display, such as making the position relative to the object vs. the mouse or making the tip display on the left vs. the right. You'll have to wait for 3rd party controls to give you that level of control (for now).

TextBlock

Equivalent to the ASP.NET Label control, the TextBlock is your run of the mill read-only text control. Like the Silverlight TextBox, it exposes a Text property that enables you to set its contents (vs. the more common Content property). Beyond that, there is nothing too special about the TextBlock and you should find it very easy to use. Listing 28 shows the TextBlock "in action"- very dull action.

Listing 28 - Silverlight TextBlock

<TextBlock Text="Howdy Silverlight"></TextBlock>

The only other properties worth mentioning are TextWrap, LineHeight, and LineStackingStrategy, all of which are somewhat related. When TextWrap is set to "Wrap" (NoWrap is default), Silverlight will start wrapping text on to multiple lines when it is longer than the controls defined width. And don't expect Silverlight to look for word breaks- it will wrap in the middle of a word if that's where the length constraints hit. In any event, when Silverlight wraps, by default it will set a line height that accommodates the text and stack each line with no overlap.

If you want more control, you can manually set the LineHeight and then set the LineStackingStrategy to one of two values: MaxHeight or BlockLineHeight. MaxHeight closely imitates the default settings in that it won't allow text to overlap, even if you've set a smaller LineHeight. Changing the LineStackingStrategy to BlockLineHeight, though, will allow text to overlap giving precedence to the LineHeight setting. Listing 29 shows two identical TextBlocks with LineHeight set to 10. The only difference is the LineStackingStrategy property, and you can clearly see the impact on text positioning. In the design world, we call this type of "line spacing" leading.

Listing 29 - LineStackingStrategy

<TextBlock Text="Howdy Silverlight" TextWrapping="Wrap" 
      LineStackingStrategy="<span class=Bold>MaxHeight</span>" Width="50" 
      LineHeight="10" />
<TextBlock Text="Howdy Silverlight" TextWrapping="Wrap" 
      LineStackingStrategy="<span class=Bold>BlockLineHeight</span>" Width="50" 
      LineHeight="10" />

Border

Border is another poorly named Silverlight UI control. With its current name, it is easy to think of it as some kind of "extension" control that enables you to add borders to other controls (like rectangles or TextBoxes). In reality, it is a control that enables you to draw boxes in your Silverlight application, similar to HTML fieldsets (a better name in my opinion). The Border control is actually a lot like the HTML fieldset because it also allows you to add other Silverlight controls directly to its contents. This is a much more convenient way to wrap elements in a box than trying to manually position everything in a rectangle on your page (the alternative approach).

Listing 30 shows a Border control with a simple TextBlock contained. Note the CornerRadius property set in the example. This property makes it very easy to round the corners of your Border box. It's a much more direct approach than the RadiusX and RadiusY properties supplied by the XAML rectangle, though clearly less configurable.

Listing 30 - Silverlight Border Control

<Border BorderThickness="3" BorderBrush="Black" Width="200" 
      Height="100" CornerRadius="20">
      <TextBlock Text="I'm in a 'Border'" />
</Border>

Shapes

Since Silverlight is based on XAML, you'll find it a lot easier to do basic drawing and manipulation of shapes that you do in the GDI+ worlds of ASP.NET and WinForms. Silverlight defines a number of simple shapes, such Ellipse, Rectangle, and Line. Shapes can be almost infinitely styled, so it's up to you and your imagination (and mastery of XAML…or Expression Blend) to make Shapes work for you. Listing 31 shows a simple Rectangle with a solid brush fill and an Ellipse with a gradient brush with the required XAML. How many lines of code would it take to do this with GDI+ in ASP.NET? A lot more.

Listing 31 - Silverlight Shapes

<Rectangle Fill="Red" Width="200" Height="100" />
<Ellipse Width="100" Height="50">
      <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Color="LightGreen" Offset="0" />
                  <GradientStop Color="Black" Offset=".5" />
                  <GradientStop Color="White" Offset=".8" />
            </LinearGradientBrush>
      </Ellipse.Fill>
</Ellipse>