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, 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">
<ToolTip HorizontalOffset="10" VerticalOffset="10"
Content="Here's a tip..." />
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
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).
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"
Listing 29 - LineStackingStrategy
<TextBlock Text="Howdy Silverlight" TextWrapping="Wrap"
LineStackingStrategy="<span class=Bold>MaxHeight</span>" Width="50"
<TextBlock Text="Howdy Silverlight" TextWrapping="Wrap"
LineStackingStrategy="<span class=Bold>BlockLineHeight</span>" Width="50"
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
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"
<TextBlock Text="I'm in a 'Border'" />
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">
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="LightGreen" Offset="0" />
<GradientStop Color="Black" Offset=".5" />
<GradientStop Color="White" Offset=".8" />