Build Flashy Web Apps With Silverlight 2

With increasing focus on end-user experience, Silverlight comes in handy to

develop rich Internet Apps (RIA) for both desktops and mobile devices. Add to

this Microsoft's design and development tools like Expression Suite and Visual

Studio with support for Silverlight, development of RIAs is not difficult at

all. Microsoft has annouced Silverlight for Mobiles that aims to capture the

huge mobile market (approximately 4 billion mobile users by 2010). Building

applications for mobiles is not going to be different from how Silverlight

applications are built for desktops, giving yet another reason to indulge in

development of Silverlight-based applications.

Implementation



In this section we show how easy it is to incorporate images and media in

your Silverlight-based website and we also demonstrate how easily you one can

add animation. To build such an application we used Visual Studio 2008 SP1 with

C# as the programming language. One might also use Visual Web Developer 2008

with SP1. To build Silverlight applications, there is an add-on that can be

downloaded from http://tinyurl.com/4nrb44

Once downloaded and installed, this add-on can provide all necessary

resources required for building a Silverlight application. There is a new

addition in project templates with the name of 'Silverlight Application' and 'Silverlight

Class Library'. We created a new 'Silverlight Application' and named it 'Silverlight

Application2'. As one needs a web page to host the application created using

Silverlight, VS 2008 prompts for either creation of the test page or the

complete ASP.NET project. We created ASP.NET project named

'SilverlightApplication2.Web' in this implementation. From the solution, open

two files 'Page.xaml' and 'Page.xaml.cs.' These two files define the structure

and logic of a Silverlight application. Here's the sample structure of 'Page.xaml'

file:

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



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


Width="400" Height="300">





sample

Let's start with integrating an image inside a web page. Here's the XAML code

for doing the same:

Download and install Silverlight add-in Visual studio 2008 SP1. This will create new templates 'Silverlight Application' and 'Silverlight Class Library.'

In the above code, 'Source' is the absolute URL where image is stored or the

URL that is relative to XAP file of the application. In our example, we copied

the sample image in 'C:\Users\sandy\Documents \Visual Studio 2008\Projects\

SilverlightApplication2 \SilverlightApplication2.Web\ClientBin'. One can also

add the image as background to text. Here's how this can be done:

One needs to host Silverlight application. Visual Studio 2008 SP1 automatically provides two options: one can either create ASP.NET project or generate a test page.

FontWeight="Bold">



PCQUEST

Now that we know how to integrate the image, let's move towards Media that

includes audio and video integration in your web page. On top of it we would add

animation to video making it more appealing:

From="0.0" To="1.0" Duration="0:0:5" AutoReverse="False" />














Source="Ketchop.wmv" Width="300" Height="300" />

There are two important elements given above that need explanation. '

describes how media is integrated in the web page. 'Source' is similar to what

was defined above for image. In this sample code we have also defined an event

named 'MouceLeftButtonDown' that is used to trigger an event. In our example, it

will trigger animation of video. To create an animation, one needs to define

element; one only needs to define an object that is to be animated

inside it. In our example, is the object that is defined inside

. Here, object defines what is animated and what

is the behaviour of animation. In our example, we are animating the video upon

on left mouse click. In XAML code we define the structure and to define what

will happen on mouse click, go to 'Page.xaml.cs' file and add the following

code:

In this implementation, we have added animation to a media file making it fade on mouse click. Just click on the video and see it fade.

using System.Windows.Media;



using System.Windows.Media.Animation;


using System.Windows.Shapes;

namespace SilverlightApplication2



{


public partial class Page : UserControl


{


public Page()


{


InitializeComponent();


}

private void Mouse_Clicked(object sender,

MouseEventArgs e)

{



myStoryboard.Begin();


}


}


}






Besides these features, there are a number of other features that can be

used to make web pages give better user experince.