You’ll use XAML to define your Silverlight user interfaces. Using an XML-based language helps ease the downloading of the UI through any firewalls and simplifies the process of generating it dynamically: it is easy to use XSL/T to transform data into the UI, and you can predefine templates and use standard XML querying techniques to insert live data into the relevant placeholders. However, there’s a catch. If you’re an existing WPF developer the thought of using XAML for a browser-based UI might be exciting you considerably, because you’ll have already experienced the benefits of WPF’s rich layout model, its support for data binding, the ease at which you can create 3D content and the richness of its controls. Well, sadly that’s all currently missing from Silverlight, as these are features of WPF that are not included in the considerably more restricted environment that is Silverlight.
So what do you get in the box with Silverlight and how do you build a simple application with it? Let’s dive into that now.
The core elements
Silverlight currently supports the following major user interface elements:
- Canvas
- Rectangle, Ellipse, Line, Path, Polyline, Polygon
- Image
- MediaElement
- TextBlock
As you can see, this provides a single layout panel (Canvas) that supports explicit positioning of its child elements; an extensive range of 2D vector-based graphics; 2D raster-based images, such as .png and .gif; media such as video and MP3; and the display of formatted text. Ink can also be utilised through an InkPresenter. You also get a number of transforms and animations that make it easy to create the compelling visual effects that are such a core feature of most RIAs.
Where are the controls?
You’ll have noticed that Silverlight 1.0 contains no TextBox, Button or in fact any other input control; Microsoft is currently deciding which controls should be provided with version 1.1. This will come as a shock to developers who’ve got used to the standard controls that are prevalent in Windows Forms, ASP.NET and WPF. However, you can easily combine the standard HTML input controls if you want form-based input in your interactive applications, overlaying them on top of your Silverlight scene to provide an integrate feel.
It is reasonable to expect that a number of controls will make it into Silverlight 1.1 before it’s released, and companies such as NETiKA TECH are already previewing demonstration versions of controls designed for Silverlight.
A simple scene
A section of the XAML for the scene is shown in below.
<Canvas xmlns=”http://schemas.
microsoft.com/client/2007”
xmlns:x=”http://schemas.
microsoft.com/winfx/2006/
xaml” Width=”746.000000”
Height=”485.000000” >
<Canvas x:Name=”playCanvas”
Canvas.Left=”30”
Canvas.Top=”70”... >
<!- background of the button ->
<Path Cursor=”Hand”
x:Name=”btnPlay”
StrokeThickness=”3.000000”
Stroke=”#ff0068be”
StrokeMiterLimit=”1.000000”
Data=”...”>
<Path.Fill>
<LinearGradientBrush
StartPoint=”0,0”
EndPoint=”0,1”>
<LinearGradientBrush.GradientStops>
<GradientStop
Offset=”0.005618”
Color=”#ffffffff”/>
<GradientStop
Offset=”0.494382”
Color=”#ffb1b1b1”/>
<GradientStop
Offset=”1.000000”
Color=”#fff2f2f2”/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
</Path>
<!- play button triangle ->
<Path
StrokeThickness=”1.000000”
Stroke=”#ff009fc5”
StrokeMiterLimit=”1.000000”
Fill=”#ff210fd1” Data=”...”/>
</Canvas>
<!- rest of the UI elided
for clarity ->
...
</Canvas>
As you can see, XAML allows you to define object hierarchies declaratively, and in the case of Silverlight this hierarchy represents the UI elements for the scene. The outer Canvas is the root element for the scene, and the Play “button” actually consists of a second Canvas which contains two Path objects: one which is used to draw and fill the button’s outline and background; the second draws the triangle symbol. Elements are positioned relative to their immediate parent Canvas. In the case of the playCanvas element, which has been identified using the standard x:Name attribute, it is positioned at (30, 70) from the top left corner of the root Canvas.
You’ll also notice that the default namespace for Silverlight applications is different from that of standard WPF applications, which reflects the fact that whilst you are using XAML to create the UI, it is most assuredly not full-blown WPF under the covers.
Finally, you can see how XAML allows you to set complex properties on objects using property elements, as shown for the Path’s Fill property, which is set to a LinearGradientBrush.
Well, that’s the basics of Silverlight – next we start to look at some of the more interesting features provided by XAML and interactive content.
Comments