Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML

XAML and Silverlight

Rate me:
Please Sign up or sign in to vote.
3.06/5 (8 votes)
6 Apr 2008CPOL13 min read 63.3K   15   2
What is XAML and its basics

Introduction: XAML in WEB

A rich Internet application (RIA) is an entirely new kind of web experience that is engaging, interactive, lightweight, and flexible. RIAs offer the flexibility and ease of use of an intelligent desktop application, and add the broad reach of traditional web applications. This richer functionality may include anything that can be implemented in the technology being used on the client side, including drag and drop, using a slider to change data, animations, and client interacting in asynchronous manner with the server or graphics. Some of the sites that employ RIA features are Gmail, Yahoo! Mail (beta), Flickr and Popfly.

The advent of RIA technologies has introduced considerable additional complexity into Web applications. Traditional Web applications built using only standard HTML, having relatively simple software architecture and being constructed using a limited set of development options, is relatively easy to design and manage. For the person or organization using RIA technologies to deliver a Web application, their additional complexity makes them harder to design, test, measure, and support.

Aspects of the RIA architecture that complicate management processes are:

  • Greater complexity makes development harder
  • Asynchronous communication makes it harder to isolate performance problems
  • Not all features are supported by a single technology since there is a mismatch of technologies used by designers and that used by developers. Ex: XUL, Java and applet, Flash, Laszlo

XAML provides an easy solution to all the above concerns. Microsoft Silverlight which employs XAML is a cross-browser; cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.

Background

What is XAML?

Extensible Application Markup Language (XAML, pronounced zammel) by Microsoft is a declarative language used to initialize structured values and objects. You can create visible user interface (UI) elements in the declarative XAML mark up. It is a case-sensitive language. XAML is used extensively in the .NET Framework 3.0 technologies, particularly in Windows Presentation Foundation (WPF), where it is used as a user interface mark up language to define UI elements, data binding, event handling and other features, and in Windows Workflow Foundation (WF), in which workflows themselves can be defined using XAML.

XAML is an XML-based language that is used to define graphical assets, user interfaces, behaviours, animations, and more. Basically XAML renders a rich UI. It was introduced by Microsoft as the mark up language used in Windows Presentation Foundation, a desktop-oriented technology. WPF allows for the definition of 2D and 3D objects, rotations, animations, and a variety of other effects and features rendered by the XAML file. XAML elements can map directly to Common Language Runtime (CLR) object instances whereas attributes can map to CLR properties and events on those objects. In typical usage, XAML files will be produced by visual design and developer tools, such as Microsoft Expression Blend, Microsoft Visual Studio, XAML Pad or the Windows Workflow Foundation (WF) visual designer.

Although XAML has been introduced as an integral part of WPF, the XAML standard itself is not specific to WPF (or even .NET). XAML can also be used to develop applications using any programming API and is in itself language independent. However, a key aspect of the technology is the reduced complexity needed for tools to process XAML, because it is simply XML. As XAML is simply based on XML, developers and designers are able to share and edit content freely amongst them without requiring compilation.

XAML for Web applications comes in the form of Silverlight. Microsoft Silverlight is a web-based subset of WPF. During development it was named WPF/E, which stood for "Windows Presentation Foundation Everywhere". Silverlight is based on XAML –Jscript-HTML in case of 1.0 version and XAML-.NET in case of 1.1. The Silverlight subset enables Flash-like web and mobile applications with the same code as Windows .NET applications. 3D features are not supported, but XPS, vector-based drawing and hardware acceleration are included, thus rendering Rich UI to web sites. The XAML used by Silverlight differs from that used by WPF, in that the former is a Web-oriented subset of the full XAML available for the desktop.

From a user perspective, there will be a big jump in interface capability. Eventually users will find it difficult to recognize the difference between an online web application and a desktop application. A variety of media can now be incorporated seamlessly into the interface including audio, video, and 2D graphics.

XAML in Silverlight

XAML in Silverlight is basically embedded in your HTML pages and the Silverlight plug-in allows you to render the XAML objects onto to your page. Silverlight and XAML integrate seamlessly together. Every XAML element can be accessed or manipulated from the same client side JS that would interact with any HTML elements. Thus you can overlay HTML controls on top of Silverlight content (by creating a windowless frame). You can then use JavaScript in a separate code-behind file to respond to events and manipulate the objects you declared in XAML in case of Silverlight 1.0 and C#/VB in case of Silverlight 1.1.

With Silverlight one can create RIA, Rich Internet Applications, and make astonishing interfaces, that can integrate animations and videos. It is similar to HTML files, which are plain text that contain information that tells the Web browser how to render the look and feel of a webpage. XAML does the same thing. However, instead of the browser interpreting the instructions about how to render the file, the Silverlight runtime does the rendering.

One of the benefits 1.0 has to offer is that it makes it really easy to integrate these experiences within AJAX web-pages (since you can write JavaScript code to update both the HTML and XAML elements together). It simply adds XAML as a choice for richer presentation while retaining the same JavaScript engine for code. Every XAML element can be accessed or manipulated from the same client side JS that would interact with any HTML elements. Thus you can overlay HTML controls on top of Silverlight content (by creating a windowless frame).

With 1.1, all the features and advantages that .NET framework has to offer is incorporated implicitly. With this, the XAML layout mark up file (.xaml file) can be augmented by code-behind code, written in any .NET language, which contains the programming logic. It can be used to programmatically manipulate both the Silverlight application and the HTML page which hosts the Silverlight control. Silverlight ships with a lightweight class library which features, among others, extensible controls, XML Web Services, networking components and LINQ APIs. This class library is a subset of and is considerably smaller than .NET Framework's Base Class Library. Some of the supported classes being string handling, regular expressions, input and output, reflection, collections, and globalization.

Inside XAML

In XAML, you define elements using XML tags. At the root level of every Silverlight document is a Canvas tag, which defines the space on which UI elements will be drawn. A Canvas can have one or more children, including child Canvases that can create their own children. Children of a Canvas have relative positions to their parent Canvas, not to the root Canvas.

Silverlight XAML supports a number of shapes that can be orchestrated into complex objects. The basic supported shapes are Rectangle, Ellipse, Line, Polygon, Poly Line, and Path.

XML
<Canvas>

<Rectangle>

</Rectangle>

</Canvas>

Brushes determine how objects are painted on the screen. Their contents are painted using a Fill and their outlines are painted using a Stroke. There are solid-colour brushes, gradient brushes, and image brushes. Solid colour brushes are implemented using either a fixed colour on the fill attribute. Gradient brushes are implemented by defining a gradient range and a number of gradient stops across a normalized space. Objects may also be painted using Image Brushes, and the image will be clipped or stretched as appropriate.

Text can be rendered in XAML using the TextBlock tag. This gives you control over aspects of the text such as content, font, size, wrapping and more. In addition, Silverlight supports keyboard events that can be used to implement text input.

XML
<Canvas>

<Rectangle

Width="100" 

Height="100"> 

<Rectangle.Fill> 

<SolidColorBrush Color="Blue"/> 

</Rectangle.Fill>

</Rectangle>

</Canvas>

Transformations, Media, and Animations: XAML allows you define a number of transformations on objects. RotationTransform rotates the element through a defined number of degrees, ScaleTransform can be used to stretch or shrink an object, SkewTransform skews it in a defined direction by a defined amount, Translate Transform moves an object according to a defined vector, and Matrix Transform can combine all of the above.

  • Rotate Transform: Rotates an element by the specified Angle
  • Scale Transform: Scales an element by the specified ScaleX and ScaleY amounts
  • Skew Transforms: Skews an element by the specified AngleX and AngleY amounts
  • Translate Transform: Moves (translates) an element by the specified X and Y amount

Audio and video content is controlled using the MediaElement tag. This tag takes a source attribute that points to the media to be played. An object defined using this tag provides many methods and events that control media playback.

XML
<Canvas

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="root"

>

<Canvas x:Name="VideoLayer">

<MediaElement AutoPlay="True" Width="400" Height="300" 
	x:Name="Movie_wmv" Canvas.Left="80" Canvas.Top="40" Source="FullCut2.wmv" />

</MediaElement>

</Canvas>

</Canvas> 

Animations in XAML are implemented by defining how properties should be changed over time via a timeline. Animation definitions are contained within a Storyboard. There are a number of different types of animation, including DoubleAnimation, which changes numeric properties; ColorAnimation, which changes colours and brushes; and PointAnimation, which changes two-dimensional values. These animations can either be linear or key frame based. In the case of a linear animation, the animation changes smoothly along the defined timeline. With a key frame-based animation, the animation can move between discrete values along the way.

Why Use XAML?

It gives rich UI in both cases being either desktop application or a web application where it bridges the gap between designers and developers. XAML introduced in Web is cross-platform by design.

It is a declarative language with Flow Control Support, meaning you can declare your UI controls and give them a flow control as well. You can also separate the UI definition from the run-time logic by using code-behind files, joined to the mark up through partial class definitions. Also, in a declarative programming language, the developer (or designer) describes the behaviour and integration of components without the use of procedural programming. This allows someone with little or no traditional programming experience to create an entire working application with no programming. Although it is rare that an entire application will be built completely in XAML, the introduction of XAML allows application designers to more effectively contribute to the application development cycle. Using XAML to develop user interfaces also allows for separation of model and view; which is considered a good architectural principle. In XAML, elements and attributes map to classes and properties in the underlying APIs.

From an interface developer perspective, the most visible addition is a complete set of graphic widgets. From buttons, menus, and tree lists to panels, toolbars, and shape canvases, XAML includes every commonly used interface gizmo and widget known to developers. 2D vector graphics is a seamlessly integrated part of this larger tool bag. These widgets and graphic controls can be nested within an object tree. This provides a much more comprehensive interface capability than previously possible using combinations of HTML and SVG (Scalable Vector Graphics).

It enables you to create rich UI and animations, and blend vector graphics with HTML to create compelling content experiences. Vector Graphics is a mathematical means of representing pictures by drawing lines and shapes in relationship to designated coordinates. The saved file contains instructions for drawing the image, which can be enlarged or reduced without losing quality. Eps, svg and dxf files are examples of vector graphics.

XAML in Silverlight makes it easy to build rich video player interactive experiences. You can blend together its media capabilities with the vector graphic support to create any type of media playing experience you want. Silverlight includes the ability to "go full screen" to create a completely immersive experience, as well as to overlay menus/content/controls/text directly on top of running video content (allowing you to enable DVD like experiences). Silverlight also provides the ability to resize running video on the fly without requiring the video stream to be stopped or restarted. The XAML has embedded media player in it and thus has no dependencies on the media player at your client end.

XAML in Silverlight provides good separation of the code and UI. XAML eases to create, edit and reuse graphical user interfaces for web applications. One can generate XAML code from data on the server, and thus create a dynamic application.

XAML is considered a replacement for AJAX (Asynchronous JavaScript and XML). In an AJAX enabled application, the runtime loads the AJAX engine which allows user interaction with the application to happen asynchronously. This in fact is a feature of RIA, since it gives better response times, only relevant data fetched consuming less bandwidth usage and avoids full page reload, thus giving a Better User Experience. Basically XAML uses the same logic as AJAX. That is, the data is fetched asynchronously but in addition to this it gives a whole different look and feel to the application. Both are complementary technologies. XAML in Silverlight is designed to blend with HTML and AJAX and is not a competitor. As such, XAML gives you rich UI since it supports animations, media support which is not supported by either of the two.

XAML can render interactive UI since it includes a facility for attaching event handlers to objects in the mark up. Also, XAML parser does not allow you to misspell an attribute, as it will emit an error message in comparison to HTML which does not include debugging.

Search engines, like Google, can scan XAML. They can't dive into compiled Flash applications which give almost the same UI features as in case of XAML in Silverlight. Thus XAML makes Silverlight applications more findable.

Downsides of XAML in WEB

XAML requires a plug in to be installed in your browser to render its contents.

Download URL: To view:

Without the plug in which includes the XAML parser, XAML is useless to the browser. There are also many missing features of XAML in Silverlight, since on increasing this memory of the plug in required to be downloaded increases substantially. Thus there is a trade off between the features supported and download content. XAML in WEB format does not have control support (textbox, button, checkbox, and listbox), styles and templates, data binding, though the future release of Silverlight 1.1 is said to include these.

Conclusion

What kind of applications will XAML enable in WEB?

XAML in Silverlight is perfect for the following Web application scenarios that encompass many real-world scenarios:

  • Web media— Branded playback with events, video and marketing mix, dynamic videos with ads, audio playback, and so forth
  • Rich islands on a page (mini apps)— Casual games and gadgets
  • Web visualization elements— Navigation properties, data visualization, and ads

XAML in Silverlight is a breakthrough in delivering effective experiences to end users, enabling rich Internet applications that blend content, application logic and communications. As rich clients emerge to make the Internet more usable and enjoyable, XAML provides a solid architecture for developers embracing the future.

References

History

  • 6th April. 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralNice ariticle Pin
sudhansu_k12327-Dec-11 19:12
sudhansu_k12327-Dec-11 19:12 
Generalhi Pin
Suresh Goli20-Feb-11 23:37
Suresh Goli20-Feb-11 23:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.