Have you seen the Silverlight?

Silverlight and XAML

This article was originally published in VSJ, which is now part of Developer Fusion.
This article is reproduced here with the permission of VSJ, the magazine where it was originally published. If you're a professional software developer based in the UK, you can claim a free annual subscription to VSJ.
VSJ

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.

You might also like...

Comments

About the author

Dave Wheeler United Kingdom

Dave Wheeler is a freelance instructor and consultant who specialises in .NET application development. He’s a moderator on Microsoft’s ASP.NET and Silverlight forums and is a regular speaker at ...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“There are only 3 numbers of interest to a computer scientist: 1, 0 and infinity”