Introduction To silverLight Controls

Figure 6-1

Width=”500” Text=”Using the TextBlock with runs…”>


Second Line with Verdana


Text=”3rd line with Times New Roman” />



168
Part II: Developing ASP.NET Applications with Silverlight
Introduction to Silverlight Controls
Silverlight 2 provides more than 25 controls that can be grouped into four general categories including
user input controls, layout controls (see Chapter 5), items controls, and media controls. Figure 6-1 shows
what some of these controls look like in the Visual Studio Toolbox.
Figure 6-1
User input controls include common controls found in many other frameworks such as TextBox, Button,
and CheckBox, as well as some nonstandard controls such as ToggleButton and RepeatButton. Layout
controls include Canvas, Border, Grid, and StackPanel, and item controls (used to show collections
of items) include DataGrid, ListBox, and ComboBox. Finally, media controls include MediaElement,
Image, and MultiScaleImage. Additional supporting controls such as GridViewSplitter and
ScrollViewer exist as well.
All of the controls available in Silverlight 2 can be defined declaratively in XAML or dynamically in
code like ASP.NET controls. In fact, if you come from an ASP.NET or WPF background, you will find
the concept of defining controls in XAML very straightforward. If you’re new to the concept of defining
controls declaratively, you’ll see that it’s simple once you know the fundamentals.


169
Chapter 6: Silverlight Controls
Defining Controls in XAML
In Chapter 3, you were provided with an introduction to Extensible Application Markup Language
(XAML) and shown how XML elements and attributes could be defined in XAML files. If you’re used
to defining controls in ASP.NET Web Forms, you’ll quickly discover that XAML isn’t quite as forgiving
with syntax issues. When you’re defining controls in XAML, there are three key points to keep in mind.
First, XAML is case-sensitive, so it’s important that you case your control names and associated attributes
properly. Visual Studio allows you to drag and drop controls from the toolbox; thus in many cases, you
can avoid manually typing controls into XAML files. Second, attribute values must be quoted. ASP.NET
doesn’t have this requirement (although you should quote your attributes there as well when defining
controls) and is quite forgiving when you don’t include quotes around attribute values. Finally, opening
tags must always have corresponding closing tags. If you forget to close a tag, you’ll have compilation
issues.
Short-cut close tags are allowed when a particular control has no content defined. By using short-cut tags
where appropriate, you can minimize typing as well as the size of the XAML file. Here’s an example of a
short-cut close tag for a TextBlock control. Notice that no closing tag is required since
the control has no content between the start and end tags and only defines attributes.

With those rules in mind, here’s an example of defining a Grid control inside a UserControl using XAML:




Looking at the code, you’ll notice that the control defines a Name attribute, which is prefixed with the
x namespace prefix and sets the Background to a value of White. The x prefix is defined on the User
Control element and points to a unique Uniform Resource Identifier (URI) value of http://schemas
.microsoft.com/winfx/2006/xaml. You’ll use x:Name rather than id when defining a control name
that you may want to access through code. As with ASP.NET controls, all control names within a XAML
file must be unique, start with an alphabetic character or underscore, and contain only alphanumeric
characters or underscores.
Silverlight controls that derive from FrameworkElement expose a Name property
that provides a convenient way to set the XAML-defined x:Name attribute. You can
use x:Name or Name to define the name of a control in a XAML file.
In addition to the attributes defined on the Grid element, you’ll see that the beginning Grid control
element has a matching ending element defined and that the case of both elements matches exactly.