This sample we are making using VS 2008 Web Express edition and .NET
3.5. It’s a six step procedure to run our first Silverlight application.
So let’s go through it step by step.
Step 6: So finally set the web application as Start
up and also set this page as Start up and run it. You should be pleased
to see your first Silver light application running.
- Step 1: The first thing we need to do is install the Silverlight SDK kit from http://www.microsoft.com/downloads/details.aspx?familyid=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en.
- Step 2: Once you install the Silverlight SDK, you
should be able to use the Silverlight template. So when you go to create
a new project, you will
see a ‘SilverLight Application’ template as shown in the below figure.
- Step 3: Once you click OK, you will see a dialog box as shown below, which has three options:
- Add an ASP.NET web project to the solution to host Silverlight: This option is the default option, and it will create a new Web Application project that is configured to host and run your Silverlight application. If you are creating a new Silverlight application, then this is the option to go.
- Automatically generate a test page to host Silverlight at build time: This option will create a new page at runtime every time you try to debug and test your application. If you want to only concentrate on your Silverlight application, then this option is worth looking at.
- Link this Silverlight control into an existing website: If you have an existing Silverlight application, then this option helps to link the Silverlight application with the existing web application project. You will not see this option enabled in new projects, you need to have an existing web application.
- Step 4: Now for simplicity's sake, we just use the
TextBlocktag to display a text. You can see that as we type in Page.XAML, it is displayed in the viewer. - Step 5: Now we need to consume the Silverlight
application in an ASPX page. So in the HTML / ASPX page, we need to
first refer to the Silverlight namespace
using the
Registerattribute.
So let’s run through some basic points regarding the IDE view that we see. You will see there are two projects: your web application and the Silverlight application. In the Silverlight application, we have two XAML files: App.XAML and Page.XAML. App.XAML has the global level information.
<%@Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
We also need to refer to the ScriptManager from the Silverlight name space. The ScriptManager control is a functionality from AJAX.
The main purpose of this control is to manage the download and referencing of JavaScript libraries.<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Finally, we need to refer to the Silverlight application. You can see
that in the source we have referred to the XAP file.
The XAP file is nothing but a compiled Silverlight application which is
compressed and zipped. It basically has all the files that are needed
for the application
in a compressed format. If you rename the file to a ZIP extension, you can open it using WinZIP.<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MyFirstSilverLightApplication.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
So your final ASPX / HTML code consuming the Silverlight application looks something as shown below:<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
<title>MyFirstSilverLightApplication</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MyFirstSilverLightApplication.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
</div>
</form>
</body>
</html>
No comments:
Post a Comment