Silverlight and DotNet

Create the Silverlight Application

2009-05-24T02:07:00.000-07:00

Now that we have checked that the web service is functioning correctly, it is ready to be called by a Silverlight application. Now our next step is to create the silverlight application that will consume the web service created by us just now. The application created by me to test the web method is shown below-

The code for the above silverlight application is shown below-
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c1="clr-namespace:C1.Silverlight;assembly=ClientBin/C1.Silverlight.dll"
x:Name="parentCanvas"
Loaded="Page_Loaded"
x:Class="Greeter.Page;assembly=ClientBin/Greeter.dll"
Width="800"
Height="800"
>

<Canvas.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5" SpreadMethod="Pad">
<GradientStop Color="#FFD2CBD2" Offset="0"/>
<GradientStop Color="#FF4D1E4C" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
<TextBlock Width="142" Height="20" Canvas.Left="10" Canvas.Top="26">
<Run FontFamily="Segoe UI" FontSize="12" Foreground="#FF1E2576" Text="Enter Name:"/>
</TextBlock>
<c1:TextBox Canvas.Top="25" Canvas.Left="90" Width="200" x:Name="txtName" />
<c1:Button AutoWidth="False" Width="100" Canvas.Top="25" Canvas.Left="292" Text="Greet Me" Click="GetGreeting"/>
<TextBlock x:Name="tbGreeting" Width="506" Height="68" Canvas.Left="10" Canvas.Top="50" TextWrapping="Wrap">
<Run Text="" FontFamily="Segoe UI" FontSize="12" Foreground="#FF330909"/>
</TextBlock>
</Canvas>

Configuring Visual Studio 2008

2009-05-18T12:36:00.000-07:00

Several additions are provided by the ASP.NET future extensions for use in ASP.NEY Ajax and Silverlight. One of these additions is the ability to create an ASP.Net future website in Visual Studio 2008. Asp.Net Future Website is idea to test the asp.net web services from a silverlight application.

Creating the Web Service
For configuring a Web service for calls from a Silverlight application and testing those calls, the first step is to create an Asp.Net Future website. The figure below shows the New Website dialog box:

Similar to earlier Asp.Net, when a new Asp.Net website is created, a Default.aspx page is created. The difference here is that this Default.aspx page already includes a <ScriptManager>element ready to work with Ajax. The next step here is to add a new Asp.Net Web Service to the project which can be added through the Add New Item dialog box, which is shown below:

When we create a new web service by using Asp.Net 2.0 or higher version, the code behind file of the Web Service is placed in the App_Code folder in the solution. The attribute to direct the new web service to transport data by using JSON is already given in this code behind file, which is commented by default. All we have to do to direct the new Web service to transport data by using JSON, is to uncomment the [System.Web.Script.Services.ScriptService] attribute at the top of the Web service code behind file. Next, we have to create one or more methods in the Web service class that can be called. The code to do a simple greeting is shown below:

[WebMethod]
public string Greet(string name) {
return "Hey, " + name + ", how's it going?";
}
Test this Web service to ensure that it is functioning as it is intended to do.

Consuming a Web Service From Silverlight

2009-05-16T10:09:00.000-07:00

What do we mean by consuming a web service? When a client's machine calls a method of the web service, it is said to consume the web service. In the current version of silverlight, there are some limitations to consuming a web service. The current version of silverlight, that is, Silverlight 2.0 supports the consumption of only that web service, that is hosted on the same web server, as the server as the Silverlight application that is consuming it. In order to consume a Web service that is not hosted on the same Web server, its required to make a call to a different domain or we can say, its required to make a cross-domain call. But due to security concerns, Silverlight 2.0 does not support cross domain calls. However, cross domain cals might be supported in future version of Silverlight.

There are several ways in which web service can be consumed by a silverlight 2.0 application-

• By configuring a call to a Web service method programmatically, and passing standard, well-formed, XML that does not follow to the SOAP schema by including a SOAP envelope or wrapper. The XML that is passed to a web service in this manner is called Plain Old XML (POX). To place a call to a Web method, System.Net.BrowserHttpWebRequest class is used and to capture the response,System.Net.HttpWebResponse class is used. Calling a Web method by using POX is fairly easy, and this call can a synchronous call or an asynchronous call. However, calling a Web method in this manner,programmatically, it is difficult to test by using the built-in Web server in Visual Studio 2008.

• By making a call to the web service, by passing data formatted in JavaScript Object Notation (JSON). JSON is an industry-standard data exchange format which is compact and ideal for both ASP.NET AJAX applications as well as Silverlight applications. As mentioned earlier, by default, ASP.NET Web services transport data with the help of SOAP, an extended XML grammar. However, it's fairly very easy to direct an ASP.NET Web service to transport data using JSON. The ASP.NET AJAX extensions, now incorporated into the .NET Framework, provide a new attribute called the System.Web.Script.Services.ScriptServiceAttribute attribute, which can be applied to a Web service class to direct the ASP.NET Web service to transport data using JSON. Any ASP.NET Web service that is to be called from JavaScript in an ASP.NET AJAX or code in a Silverlight application must be marked up using the ScriptService attribute. Configuring an ASP.NET Web service to be called by a Silverlight application will be explained in the next section.

Consuming Web Services

2009-05-09T08:39:00.000-07:00

One of the primary functions of an ASP.NET application is the ability to interact with a Web server. In a standard ASP.NET application, each page refresh causes a postback to the server and, thus, interaction the occurs. In an ASP.NET AJAX application, interaction with the server is minimized however postbacks to the server still occur. In either case, interaction with a Web server can be optimized with the help of making calls to a Web service. In a Silverlight application, once the application is downloaded into the client's machine, interaction with the server does not occur unless a call is initiated at the client. The most common method to interact with a Web server using a Silverlight application is to make a call to a Web service.
What is web service? A Web service is a component, similar to an object with methods or a procedure file, that si capable of being called over the web by using web protocols. A webservice functions in the same way as a procedure file or object with methods does. Like an object with methods or a procedure file is called from code to provide a service or benefit to the calling code, a web service also benefits to the calling application.Code that has the access to the Web service calls the Web service in order to provide some type of additional functionality. For communication, the protocol that is used by web service is the HTTP protocol and an XML grammar called the Simple Object Access Protocol (SOAP) by default, to transport data. Just as any client with a Web browser can view any Web page(using the web standards), similarly any programming language that is capable of working with open Web standards can call a Web service. And a benifit that web services have with using HTTP as a communication protocol, is that the web services are generally accessible through firewalls.
Similar to most of the popular web techonologies, web services include many additional technologies, that enhance and extend the basic functionality of the web services. In addition to that, the technologies that surrounds the Web services have been evolving at an astronomical rate and its been tough for the development environments to keep up with the supported technologies. The supporting technologies that I am mentioning here include enhancements to security, ability to manage messages being sent to and from a Web service,ensure reliability, and the functionality for working with messages in transactions.
Its extremely simple and straight forward to consume a Web service from a Silverlight application. However,a point to note is that Web services reside on a Web server, whereas Silverlight applications reside on a client workstation. Therefore testing communications between a Silverlight application and a Web service on a single machine can be a little tricky. The section below describes how to consume a web service and test the communication between Silverlight and web service.

Handling Media Player Events

2009-05-07T02:21:00.000-07:00

Microsoft Silverlight plug-in includes a framework containing namespaces, classes, and functionalities that are used to interact with the media player and create applications. The class named "Sys.Preview.UI.Xaml.Media.Player" used to directly control the Silverlight media player. In Silverlight documentation, Classes are referred to as "Client Types". This makes sense as in object oriented terminology, a class is defined as representing a particular type of entity.
The Player type is tightly coupled to the media player. XAML is used to define media player and its active skin. The XAML used to define the player skin must follow specific XML grammar so that the Player type can assume that particular elements exist within the player skin XAML. If the player skin XAML includes the correct elements,then its an easy task to identify functions to handle player events by using the asp:Media control. Function handlers can be identified easily either declaratively or through the designer by using Visual Studio 2008. The full markup of the page required along with the OnClientChapterStarted function handler defined is shown in the code below-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Microsoft.Web.Preview" Namespace="Microsoft.Web.Preview.UI.Controls" 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">
<head runat="server">
<title>My Videos</title>
<script type="text/JavaScript">
function onChapterStarted(sender, chapterEventArgs)
{
var chapters = sender.get_chapters();
var ci = chapterEventArgs.get_chapterIndex();
var chapter = chapters[ci];
Sys.Debug.trace("Chapter Info" + chapter.imageUrl + " " + chapter.title);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smCardinalVideos" runat="server"> </asp:ScriptManager>
<div>
<asp:Media ID="MyCardVideo" AutoPlay="true" runat="server" Height="388px" MediaUrl="~/Videos/MyVideo.wmv" Width="512px" XamlUrl="~/CustomProfessional.xaml" OnClientChapterStarted="onChapterStarted">
<Chapters>
<asp:MediaChapter Title="Start" TimeIndex="0.0" ImageUrl="~/Videos/Image1.jpg" />
<asp:MediaChapter Title="Reception" TimeIndex="6.6253847" ImageUrl="~/Videos/Image2.jpg" />
<asp:MediaChapter Title="Broken Tackle" TimeIndex="10.5280086" ImageUrl="~/Videos/Image2.jpg" />
<asp:MediaChapter Title="End Zone" TimeIndex="13.1600108" ImageUrl="~/Videos/Image3.jpg" />
<asp:MediaChapter Title="Replay" TimeIndex="17.3349108" ImageUrl="~/Videos/Image4.jpg" />
<asp:MediaChapter Title="Celebration" TimeIndex="55.1768291" ImageUrl="~/Videos/Image5.jpg" />
<asp:MediaChapter Title="End" TimeIndex="71.2455760" ImageUrl="~/Videos/Image6.jpg" />
</Chapters>
</asp:Media>
</div>
</form>
</body>
</html>

The resulting Output window of Visual Studio 2008 is shown in the figure below-

Skins

2009-05-05T10:58:00.000-07:00

Skins are used to change the appearance of the media player. The asp:Media control includes several built-in skins. The built-in skin of the media player can easily be changed using Visual Studio 2008 either declaratively in the markup with the help of intellisense or visually in the designer. We can also provide a custom skin for the media player by creating a custom XAML file and referencing the XAML file through the XamlUrl attribute of the asp:Media control.

An easier method of creating custom player skins is to export an existing skin and modify it. To export and modify a skin using Visual Studio 2008, use the asp:Media control smart tag menu in design view and select Configure Skin. The Configure Player Skin offers options to select or export a built-in skin, and select a custom skin. Just select the skin to be exported and then click the Export button. Modify the skin XAML and then select this modified XAML as a custom skin. For example, in the figure below, the Professional skin exported and modified to add some orange highlights, and then selected as the active skin.

More interesting features of Silverlight Media Control still to come.

The asp:Media Control

2009-04-26T10:28:00.000-07:00

The asp:Media control includes functionality to navigate through defined markers, or chapters, in encoded media. The asp:Media control includes a child element named <Chapters> , this element is used to define the chapters in the encoded media. This <Chapters> element in turn, contains a series of <asp:MediaChapter> elements that correlate to each chapter in the media. Each of the elements of <asp:MediaChapter> may contain three attributes-Title: defines the title of a chapter and is displayed by the media player to identify the chapter.TimeIndex: defines the location in the encoded media where the chapter begins.ImageUrl: identifies an image being displayed by the media player to visually identify the chapter. There are many ways to provide values for each of these attributes. The easiest method among them is by using the marker definitions in EME. However the value of the TimeIndex attribute should be represented such that it can be converted to a double numeric value, hence it might be necessary to convert values from EME to asp:Media. For example, as shown in the code below, the marker at the end of the media is shown at 1.11.2455760 in EME whereas it must be converted to the actual number of minutes in the TimeIndex attribute as 71.2455760. The resulting asp:Media element definition is shown below-<asp:Media ID="myCardVideo" AutoPlay="true" runat="server" Height="240px" MediaSkin="Professional" MediaUrl="SteveBreastonCardinalsPuntReturn.wmv" Width="320px"> <Chapters> <asp:MediaChapter Title="Start" TimeIndex="0.0" ImageUrl="~/Images/Image1.jpg" /> <asp:MediaChapter Title="Reception" TimeIndex="6.6253847" ImageUrl="~/Images/Image2.jpg" /> <asp:MediaChapter Title="Broken Tackle" TimeIndex="10.5280086" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.10.5280086.jpg" /> <asp:MediaChapter Title="End Zone" TimeIndex="13.1600108" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.13.1600108.jpg" /> <asp:MediaChapter Title="Replay" TimeIndex="17.3349108" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.17.3349108.jpg" /> <asp:MediaChapter Title="Celebration" TimeIndex="55.1768291" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.55.1768291.jpg" /> <asp:MediaChapter Title="End" TimeIndex="71.2455760" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.01.11.2455760.jpg" /> </Chapters> </asp:Media>

Once the chapters are defined Silverlight media player is capable of navigating the chapters in the encoded media. To navigate the chapters, hover the mouse over the bottom of the player and the chapter images will be displayed. Now, clicking one of the chapter images, the media jumps to that chapter. The resulting player is shown in the image below-

Chapters in Silverlight Media Control

2009-04-02T12:23:00.000-07:00

The Expression Media Encoder (EME) is released by Microsoft with the Expression Suite of designer tools. By using EME, we can define markers, similar to bookmarks, in a media stream. These markers can be detected by the asp:Media control in the media stream and hence the asp:Media control can respond to them. In Silverlight player, the user can jump in the media playback from one marker to another. Furthermore, events can be fired automatically also when a new marker is encountered. These markers are generally referred to as chapters. An EME with media imported into it and with markers defined is shown in the figure below-

When the media is prepared and encoded with the help of EME, including markers, the output in Visual Studio 2008 appears as shown in the figure below-

Still more articles to come on this amazing Silverlight Media Control. So keep in touch.

More on Silverlight MediaControl

2009-03-27T22:56:00.000-07:00

The asp:Media control includes functionality to navigate through defined markers, or chapters, in encoded media. The asp:Media control includes a child element named <Chapters> , this element is used to define the chapters in the encoded media. This <Chapters> element in turn, contains a series of <asp:MediaChapter> elements that correlate to each chapter in the media. Each of the elements of <asp:MediaChapter> may contain three attributes-
• Title: defines the title of a chapter and is displayed by the media player to identify the chapter.
• TimeIndex: defines the location in the encoded media where the chapter begins.
• ImageUrl: identifies an image being displayed by the media player to visually identify the chapter.
There are many ways to provide values for each of these attributes. The easiest method among them is by using the marker definitions in EME. However the value of the TimeIndex attribute should be represented such that it can be converted to a double numeric value, hence it might be necessary to convert values from EME to asp:Media. For example, as shown in the code below, the marker at the end of the media is shown at 1.11.2455760 in EME whereas it must be converted to the actual number of minutes in the TimeIndex attribute as 71.2455760. The resulting asp:Media element definition is shown below-

<asp:Media ID="myCardVideo" AutoPlay="true" runat="server" Height="240px" MediaSkin="Professional" MediaUrl="SteveBreastonCardinalsPuntReturn.wmv"
Width="320px">
<Chapters>
<asp:MediaChapter Title="Start" TimeIndex="0.0" ImageUrl="~/Images/Image1.jpg" />
<asp:MediaChapter Title="Reception" TimeIndex="6.6253847" ImageUrl="~/Images/Image2.jpg" />
<asp:MediaChapter Title="Broken Tackle" TimeIndex="10.5280086" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.10.5280086.jpg" />
<asp:MediaChapter Title="End Zone" TimeIndex="13.1600108" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.13.1600108.jpg" />
<asp:MediaChapter Title="Replay" TimeIndex="17.3349108" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.17.3349108.jpg" />
<asp:MediaChapter Title="Celebration" TimeIndex="55.1768291" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.55.1768291.jpg" />
<asp:MediaChapter Title="End" TimeIndex="71.2455760" ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.01.11.2455760.jpg" />
</Chapters>
</asp:Media>

Once the chapters are defined Silverlight media player is capable of navigating the chapters in the encoded media. To navigate the chapters, hover the mouse over the bottom of the player and the chapter images will be displayed. Now, clicking one of the chapter images, the media jumps to that chapter. The resulting player is shown in the image below-

Media Control and Chapters

2009-03-24T11:12:00.000-07:00

Media is a combination of audio and video and media can exist in various formats. Most of the media vendors, such as Microsoft, Apple, and Real, distribute and save media in proprietary formats. Most media players play media in multiple formats. There are industry standards and players support these formats as well. Media can be stored in a particular format when it is saved after being recorded. And media can as well be converted from one format to another using a converter tool. Preparing media for playback in a particular format is known as "Media Encoding". Media encoding process may also manipulate and modify the stream of media bits. For example, a media (audio / video) stream may be played by a madia encoder to a certain point and then another media source may be interjected. This is the type of encoding action that Television production studios perform to interject a commercial into a live or recorded media stream (television show) that is being broadcast.
The Expression Media Encoder (EME) is released by Microsoft with the Expression Suite of designer tools. By using EME, we can define markers, similar to bookmarks, in a media stream. These markers can be detected by the asp:Media control in the media stream and hence the asp:Media control can respond to them. In Silverlight player, the user can jump in the media playback from one marker to another. Furthermore, events can be fired automatically also when a new marker is encountered. These markers are generally referred to as chapters. An EME with media imported into it and with markers defined is shown in the figure below-

When the media is prepared and encoded with the help of EME, including markers, the output in Visual Studio 2008 appears as shown in the figure below-

More on Media control chapters will be discussed in the next session.

The asp:Media Control

2009-03-20T20:52:00.000-07:00

The asp:Media control is included in the ASP.NET Futures release which is used to integrate audio and video into an ASP.NET or ASP.NET AJAX application.
This asp:Media control is designed to integrate Silverlight audio and video. The benefit of using the asp:Media control is that through it integration of Silverlight audio and video can be done without the developer being required to have knowledge of XAML or JavaScript. Thus the asp:Media control allows for quick Silverlight integration into an ASP.NET application or an ASP.NET AJAX application while giving the developer time to get up to speed on the new technologies.
The media formats supported by Silverlight are-
· Windows Video (WMV)
· Windows Media Audio (WMA)
· MP3
Properties, Events, and Methods
The asp:Media control has a large number of properties and methods. The asp:Media control inherits from the System.Web.UI.Controls.WebControl.XamlControl and therefore also includes all of the properties, events, and methods included in the XamlControl.
The MediaUrl and the MediaSkin are the most commonly used properties supported by the asp:Media control. As the names suggest, the MediaUrl property is used to identify the URL or location of the media file that is to be played by the asp:Media control and the MediaSkin property is used to specify the skin that the asp:Media control should display while playing the media file. There are several predefined skins that are supported by the asp:Media control and can be easily selected and it also has custom skins available.
There are also a number of built-in events including the onClientMediaOpened event and the onClientChapterStarted event that the asp:Media control supports.
Using asp:Media control is extremely easy right out of the box. Once the ASP.NET Futures extensions are installed, we can add the asp:Media control to ASP.NET pages declaratively or by dragging and dropping the control from the ASP.NET Futures tab in the Toolbox. After bringing the asp:Media control onto the asp.net page, and assigning the MediaUrl property a valid value, the page is media enabled. However, the ASP.NET Futures controls(including the asp:Media control) requires the use of the ASP.NET AJAX script library, hence any page utilizing the asp:Media control must have an asp:ScriptManager control on the page as well. Just by dropping the asp:Media control on a new ASP.NET page and assigning a value to the MediaUrl property will result in the markup shown below-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Microsoft.Web.Preview" Namespace="Microsoft.Web.Preview.UI.Controls" 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>
<head runat="server>
<title>My Videos<title&gt&;<script type="text/JavaScript>

function onChapterStarted(sender, chapterEventArgs)
{
var chapters = sender.get_chapters();
var ci = chapterEventArgs.get_chapterIndex();
var chapter = chapters[ci];
Sys.Debug.trace("Chapter Info" + chapter.imageUrl + " " + chapter.title);
}

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<div>
<asp:Media ID="MyVideo" AutoPlay="true" runat="server" Height="388px" MediaUrl="~/Media/Marriage.wmv" Width="512px" XamlUrl="~/CustomProfessional.xaml" OnClientChapterStarted="onChapterStarted">
<Chapters>
<asp:MediaChapter Title="Start" TimeIndex="0.0" ImageUrl="~/Images/Start.jpg" />
<asp:MediaChapter Title="Reception" TimeIndex="6.6253847" ImageUrl="~/Images/Reception.jpg" />
<asp:MediaChapter Title="Dinner" TimeIndex="10.5280086" ImageUrl="~/Images/Dinner.jpg" />
<asp:MediaChapter Title="Reception End" TimeIndex="13.1600108" ImageUrl="~/Images/ReceptionEnd.jpg" />
<asp:MediaChapter Title="Replay" TimeIndex="17.3349108" ImageUrl="~/Images/Replay.jpg" />
<asp:MediaChapter Title="Celebration" TimeIndex="55.1768291" ImageUrl="~/Images/Celebration.jpg" />
<asp:MediaChapter Title="End" TimeIndex="71.2455760" ImageUrl="~/Images/End.jpg" />
</Chapters>
</asp:Media>
</div>
</form>
</body>
</html>
The same page when displayed in the design view shows the Silverlight media player as shown in the figure below-

When played (cliking on the play button of the media player), the ASP.NET page plays the media file targeted by the asp:Media control as shown below:

Stay tune as more interesting tutorial articles on silverlight are coming soon.

The asp:Xaml Control

2009-03-18T09:18:00.000-07:00

Silverlight framework provides a generic class or type, for working with XAML, the Sys.Preview.UI.Xaml.Control. asp:Xaml control is used to insert XAML into an ASP.NET AJAX page in a very generic manner. asp:Xaml control is typically extended through JavaScript or managed code or dynamic code to provide a specialized implementation of the control. The attribute of the asp:Xaml control that is most commonly used is the XamlUrl attribute. It identifies the XAML file to be included in the page. asp:Xaml control exposes only three minimal events out of which one is fired upon an error and one is fired upon the XAML loading.
Below is the code as an example of including XAML in an ASP.NET AJAX page by using the asp:Xaml control -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Microsoft.Web.Preview" namespace="Microsoft.Web.Preview.UI.Controls" 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">
<head runat="server">
<title>Simple XAML Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
</div>
<asp:Xaml ID="Xaml1" runat="server" Height="500px" Width="500px" XamlUrl="~/Scene.xaml" />
</form>
</body>
</html>

Integrating Silverlight With Asp.Net Ajax

2009-03-16T10:20:00.000-07:00

When Asp.Net was released in the market, it was heavily adopted in the industry. Asp.Net expanded the market. Besides proliferating the market, Asp.Net still had a plenty of time to establish itself as a stable product in the market. Currently there are plenty of asp.net applications in the market that are still in production and that would really benefit from upgrading to Silverlight. However, keep it in mind that ASP.NET is processed on the server. ASP.NET AJAX is also processed on the server through the ASP.NET page event life cycle, although through the use of AJAX more of the processing occurs on the client's machine so as to avoid unnecessary postbacks.

A Silverlight application is hosted on a Web server so that a user can make a request for it from anywhere over the Web and once a request is made for a Silverlight application, the entire contents of the application are sent to the client's machine and processed there. Once a Silverlight application is executing on a client's machine, calls can be made to the server or to a Web service and by default, no postbacks occur to the server. The application is executing in an isolated and independent environment.

Although there are times when an application will benefit from merging the server-side and client-side worlds so that postbacks do occur to the server. For example, a Silverlight application that must continually be updated from server-side content may benefit from postbacks. Moreover, completely redesigning a Web application around a new technology is a time-consuming and considerable task. Many ASP.NET and ASP.NET AJAX applications that are already developed and deployed and are stable may benefit from integrating Silverlight without being fully redesigned.Soon Microsoft realized the need to merge the two worlds of Web computing and released some controls to do so in the ASP.NET Futures extensions.

The Microsoft ASP.NET Future extensions include new features and functionalites that are being considered for integration into ASP.NET, ASP.NET AJAX, and Silverlight and are made available for developers to begin experimenting with and adopting. Components that are released in ASP.NET Futures are normally somewhat stable and are therefore generally included in the next release of ASP.NET, ASP.NET AJAX, and Silverlight.

The Professional Calculator

2009-03-13T08:57:00.000-07:00

Remember the previous example of Simple Calculator. In this example, I will show you how to develop a professional calculator.

Steps:

1.First of all I will add a canvas on which I will develop my professional calculator. In the canvas I will add a rectangle specifying the boundaries of the calculator.

<UserControl x:Class="MyCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="Black" Loaded="Canvas_Loaded">
<Rectangle Width="200" Height="120" Canvas.Top="100" Canvas.Left="150" Fill="DimGray"></Rectangle>
</Canvas>
</UserControl>

Remember each control is having an enevt specified by us, like Canvas_Loaded event for the canvas, all of which will be defines in the code file(Page.xaml.cs).

2.Then I will add a textbox where I will see my operations being performed and will specify its location(Canvas.Top,Canvas.Left).

Canvas.Top - Distance in pixels from the top of the screen.
Canvas.Left - Distance in pixels from the left of the screen.
IsReadOnly - To make sure user cannot type in the textbox directly from keyboard, the "IsReadOnly" property of the textbox is set to true.

<UserControl x:Class="MyCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="Black" Loaded="Canvas_Loaded">
<Rectangle Width="200" Height="120" Canvas.Top="100" Canvas.Left="150" Fill="DimGray"></Rectangle>
<TextBox x:Name="txtnum" Width="200" Canvas.Left="150" Canvas.Top="100" IsReadOnly="True"></TextBox>
</Canvas></UserControl>

3. Then I will add numeric buttons for the calculator.(Remember the properties like height,width,canvas.left,canvas.top can be set according to our need,the way we want the controls to be placed on the screen).

<UserControl x:Class="MyCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="Black" Loaded="Canvas_Loaded">
<Rectangle Width="200" Height="120" Canvas.Top="100" Canvas.Left="150" Fill="DimGray"></Rectangle>
<TextBox x:Name="txtnum" Width="200" Canvas.Left="150" Canvas.Top="100" IsReadOnly="True"></TextBox>
<Button x:Name="btn1" Content="1" Height="25" Width="40" Canvas.Left="150" Canvas.Top="120" Click="btn1_Click"></Button>
<Button x:Name="btn2" Content="2" Height="25" Width="40" Canvas.Left="190" Canvas.Top="120" Click="btn2_Click"></Button>
<Button x:Name="btn3" Content="3" Height="25" Width="40" Canvas.Left="230" Canvas.Top="120" Click="btn3_Click"></Button>
<Button x:Name="btn4" Content="4" Height="25" Width="40" Canvas.Left="150" Canvas.Top="145" Click="btn4_Click"></Button>
<Button x:Name="btn5" Content="5" Height="25" Width="40" Canvas.Left="190" Canvas.Top="145" Click="btn5_Click"></Button>
<Button x:Name="btn6" Content="6" Height="25" Width="40" Canvas.Left="230" Canvas.Top="145" Click="btn6_Click"></Button>
<Button x:Name="btn7" Content="7" Height="25" Width="40" Canvas.Left="150" Canvas.Top="170" Click="btn7_Click"></Button>
<Button x:Name="btn8" Content="8" Height="25" Width="40" Canvas.Left="190" Canvas.Top="170" Click="btn8_Click"></Button>
<Button x:Name="btn9" Content="9" Height="25" Width="40" Canvas.Left="230" Canvas.Top="170" Click="btn9_Click"></Button>
<Button x:Name="btn0" Content="0" Height="25" Width="40" Canvas.Left="150" Canvas.Top="195" Click="btn0_Click"></Button>
<Button x:Name="btndot" Content="." Height="25" Width="40" Canvas.Left="190" Canvas.Top="195" Click="btndot_Click"></Button>
<Button x:Name="btn00" Content="00" Height="25" Width="40" Canvas.Left="230" Canvas.Top="195" Click="btn00_Click"></Button>

4. Then I will add the operator buttons on whose click,mathematical operations are to be performed.

<UserControl x:Class="MyCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="Black" Loaded="Canvas_Loaded">
<Rectangle Width="200" Height="120" Canvas.Top="100" Canvas.Left="150" Fill="DimGray"></Rectangle>
<TextBox x:Name="txtnum" Width="200" Canvas.Left="150" Canvas.Top="100" IsReadOnly="True"></TextBox>
<Button x:Name="btn1" Content="1" Height="25" Width="40" Canvas.Left="150" Canvas.Top="120" Click="btn1_Click"></Button>
<Button x:Name="btn2" Content="2" Height="25" Width="40" Canvas.Left="190" Canvas.Top="120" Click="btn2_Click"></Button>
<Button x:Name="btn3" Content="3" Height="25" Width="40" Canvas.Left="230" Canvas.Top="120" Click="btn3_Click"></Button>
<Button x:Name="btn4" Content="4" Height="25" Width="40" Canvas.Left="150" Canvas.Top="145" Click="btn4_Click"></Button>
<Button x:Name="btn5" Content="5" Height="25" Width="40" Canvas.Left="190" Canvas.Top="145" Click="btn5_Click"></Button>
<Button x:Name="btn6" Content="6" Height="25" Width="40" Canvas.Left="230" Canvas.Top="145" Click="btn6_Click"></Button>
<Button x:Name="btn7" Content="7" Height="25" Width="40" Canvas.Left="150" Canvas.Top="170" Click="btn7_Click"></Button>
<Button x:Name="btn8" Content="8" Height="25" Width="40" Canvas.Left="190" Canvas.Top="170" Click="btn8_Click"></Button>
<Button x:Name="btn9" Content="9" Height="25" Width="40" Canvas.Left="230" Canvas.Top="170" Click="btn9_Click"></Button>
<Button x:Name="btn0" Content="0" Height="25" Width="40" Canvas.Left="150" Canvas.Top="195" Click="btn0_Click"></Button>
<Button x:Name="btndot" Content="." Height="25" Width="40" Canvas.Left="190" Canvas.Top="195" Click="btndot_Click"></Button>
<Button x:Name="btn00" Content="00" Height="25" Width="40" Canvas.Left="230" Canvas.Top="195" Click="btn00_Click"></Button>
<Button x:Name="btnplus" Content="+" Height="25" Width="40" Canvas.Left="270" Canvas.Top="120" Click="btnplus_Click"></Button>
<Button x:Name="btnminus" Content="-" Height="25" Width="40" Canvas.Left="310" Canvas.Top="120" Click="btnminus_Click"></Button>
<Button x:Name="btnmul" Content="*" Height="25" Width="40" Canvas.Left="270" Canvas.Top="145" Click="btnmul_Click"></Button>
<Button x:Name="btndiv" Content="/" Height="25" Width="40" Canvas.Left="310" Canvas.Top="145" Click="btndiv_Click"></Button>
<Button x:Name="btnequal" Content="=" Height="25" Width="40" Canvas.Left="270" Canvas.Top="170" Click="btnequal_Click"></Button>
<Button x:Name="btnperc" Content="%" Height="25" Width="40" Canvas.Left="310" Canvas.Top="170" Click="btnperc_Click"></Button>
<Button x:Name="btnclear" Content="Clear" Height="25" Width="40" Canvas.Left="270" Canvas.Top="195" Click="btnclear_Click"></Button>
<Button x:Name="btnback" Content="Back" Height="25" Width="40" Canvas.Left="310" Canvas.Top="195" Click="btnback_Click"></Button>
</Canvas>
</UserControl>

5.Now I have my user interface, and the events structure ready. These events are created in the MyCalculator.xaml.cs file.Now I will go to the code file and define the operations to be performed in the events created by me.

6. Now I have taken certain varables of different datatype. Here is the explanation for these variables-

[i] prevres - I have used the double type variable "prevres" to store the result of a previous mathetical operation in case I am performing further operation on the result of a previous operation.
For example- say i multiplied 9 and 5 to get the result 45. Now to perform further operation on the result, i will move this value to the variable prevres and take the other value from the textbox txtnum and perform the operation.

[ii] op - I have used string type variable op to keep track of the operator pressed so as to determine the type of arthemetic operation thatis to be performed.
For example- say i click "num9" then operator "*" and then num5. When I click num9, 9 appears in the textbox. When I click operator *, 9 is stored in the prevres variable and * is stored in string variable "op".

[iii] equalclick - I have used double type variable equalclick which will have values 0 or 1. It will have value 0 if equalto button is not clicked after clicking clear button or from the start and value 1 if it is clicked after these conditions.

[iv] opclick - Similarly I have used double type variable opclick which will also have values 0 and 1 indicating whether an operator is clicked or not.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyCalculator
{
public partial class Page : UserControl
{
Double prevres=0;
String op = "";
Double equalclick = 0;
Double opclick;
public Page()
{
InitializeComponent();
}

Page.xaml

<UserControl x:Class="MyCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="Black" Loaded="Canvas_Loaded">
<Rectangle Width="200" Height="120" Canvas.Top="100" Canvas.Left="150" Fill="DimGray"></Rectangle>
<TextBox x:Name="txtnum" Width="200" Canvas.Left="150" Canvas.Top="100" IsReadOnly="True"></TextBox>
<Button x:Name="btn1" Content="1" Height="25" Width="40" Canvas.Left="150" Canvas.Top="120" Click="btn1_Click"></Button>
<Button x:Name="btn2" Content="2" Height="25" Width="40" Canvas.Left="190" Canvas.Top="120" Click="btn2_Click"></Button>
<Button x:Name="btn3" Content="3" Height="25" Width="40" Canvas.Left="230" Canvas.Top="120" Click="btn3_Click"></Button>
<Button x:Name="btn4" Content="4" Height="25" Width="40" Canvas.Left="150" Canvas.Top="145" Click="btn4_Click"></Button>
<Button x:Name="btn5" Content="5" Height="25" Width="40" Canvas.Left="190" Canvas.Top="145" Click="btn5_Click"></Button>
<Button x:Name="btn6" Content="6" Height="25" Width="40" Canvas.Left="230" Canvas.Top="145" Click="btn6_Click"></Button>
<Button x:Name="btn7" Content="7" Height="25" Width="40" Canvas.Left="150" Canvas.Top="170" Click="btn7_Click"></Button>
<Button x:Name="btn8" Content="8" Height="25" Width="40" Canvas.Left="190" Canvas.Top="170" Click="btn8_Click"></Button>
<Button x:Name="btn9" Content="9" Height="25" Width="40" Canvas.Left="230" Canvas.Top="170" Click="btn9_Click"></Button>
<Button x:Name="btn0" Content="0" Height="25" Width="40" Canvas.Left="150" Canvas.Top="195" Click="btn0_Click"></Button>
<Button x:Name="btndot" Content="." Height="25" Width="40" Canvas.Left="190" Canvas.Top="195" Click="btndot_Click"></Button>
<Button x:Name="btn00" Content="00" Height="25" Width="40" Canvas.Left="230" Canvas.Top="195" Click="btn00_Click"></Button>
<Button x:Name="btnplus" Content="+" Height="25" Width="40" Canvas.Left="270" Canvas.Top="120" Click="btnplus_Click"></Button>
<Button x:Name="btnminus" Content="-" Height="25" Width="40" Canvas.Left="310" Canvas.Top="120" Click="btnminus_Click"></Button>
<Button x:Name="btnmul" Content="*" Height="25" Width="40" Canvas.Left="270" Canvas.Top="145" Click="btnmul_Click"></Button>
<Button x:Name="btndiv" Content="/" Height="25" Width="40" Canvas.Left="310" Canvas.Top="145" Click="btndiv_Click"></Button>
<Button x:Name="btnequal" Content="=" Height="25" Width="40" Canvas.Left="270" Canvas.Top="170" Click="btnequal_Click"></Button>
<Button x:Name="btnperc" Content="%" Height="25" Width="40" Canvas.Left="310" Canvas.Top="170" Click="btnperc_Click"></Button>
<Button x:Name="btnclear" Content="Clear" Height="25" Width="40" Canvas.Left="270" Canvas.Top="195" Click="btnclear_Click"></Button>
<Button x:Name="btnback" Content="Back" Height="25" Width="40" Canvas.Left="310" Canvas.Top="195" Click="btnback_Click"></Button>
</Canvas>
</UserControl>

7.Now I will define the operations in the events one by one.

[1]Plus Click- On clicking plus operator, I will save the number currently in the txtnum textbox, in some variable of type double(prevres in this example and make the txtnum textbox text=0 so that I can enter the second operand and will also save the operand "+" in a string variable op.

[2]Minus Click- Similarly on clicking minus operator, I will save the number currently in the txtnum textbox, in some variable of type double and make the txtnum textbox text=0 so that I can enter the second operand and will also save the operand "-" in the string variable op.

[3]Multiply Click & Divide click- Similar operation needs to be performed in the click event of multiply button and divide button.

[4]EqualTo Click- Now I have my first operand in the variable "prevres", the operator in the variable in the variable "op" and the second operand in the textbox "txtnum".

Thats all I needed. Now i will simply check which operator is stored in variable op and accordingly perform the operation

if(op=="+")
{
txtnum.Text=Convert.ToString(Convert.ToInt32(prevres) + Convert.ToInt32(txtnum.Text));
}
else if(op=="-")
{
txtnum.Text=Convert.ToString(Convert.ToInt32(prevres) - Convert.ToInt32(txtnum.Text));
}
else if(op=="*")
{
txtnum.Text=Convert.ToString(Convert.ToString(prevres) * Convert.ToInt32(txtnum.Text));
}
else if(op=="\\")
{
txtnum.Text=Convert.ToString(Convert.ToString(prevres) \ Convert.ToInt32(txtnum.Text));
}
op = "";
equalclick = 1;
prevres = 0;
opclick = 1;

Value of the variable "op" is cleared , equalclick variable is set to 1 to specify thats it has been clicked, prevres is cleared to 0, and opclick is set to 1 to specify that operator has been clicked.

That is all you need to creat a professional calculator. You can add further trigonometric operations if you want. Its also similar to what you have learnt in this.

You can find the complete program for the Professional Calculator and the snaoshots of the program running below.

Page.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyCalculator
{
public partial class Page : UserControl
{
Double prevres=0;
String op = "";
Double equalclick = 0;
Double opclick;
public Page()
{
InitializeComponent();
}

private void btnplus_Click(object sender, RoutedEventArgs e)
{
prevres += Convert.ToDouble(txtnum.Text);
txtnum.Text = "0";
op = "+";
opclick = 1;
}

private void btnminus_Click(object sender, RoutedEventArgs e)
{
prevres += Convert.ToDouble(txtnum.Text);
txtnum.Text = "0";
op = "-";
opclick = 1;
}

private void btnmul_Click(object sender, RoutedEventArgs e)
{
prevres += Convert.ToDouble(txtnum.Text);
txtnum.Text = "0";
op = "*";
opclick = 1;
}

private void btndiv_Click(object sender, RoutedEventArgs e)
{
prevres += Convert.ToDouble(txtnum.Text);
txtnum.Text = "0";
op = "\\";
opclick = 1;
}

private void btnequal_Click(object sender, RoutedEventArgs e)
{
if (op == "+")
{
txtnum.Text = Convert.ToString(prevres + Convert.ToDouble(txtnum.Text));
}
else if (op == "-")
{
txtnum.Text = Convert.ToString(prevres - Convert.ToDouble(txtnum.Text));
}
else if (op == "*")
{
txtnum.Text = Convert.ToString(prevres * Convert.ToDouble(txtnum.Text));
}
else if (op == "\\")
{
txtnum.Text = Convert.ToString(prevres / Convert.ToDouble(txtnum.Text));
}
op = "";
equalclick = 1;
prevres = 0;
opclick = 1;
}

private void btnperc_Click(object sender, RoutedEventArgs e)
{
txtnum.Text =Convert.ToString(Convert.ToDouble(txtnum.Text) / 100);
opclick = 1;
}

private void btnclear_Click(object sender, RoutedEventArgs e)
{
prevres = 0;
op = "";
equalclick = 0;
txtnum.Text = "0";
opclick = 0;
}

private void btnback_Click(object sender, RoutedEventArgs e)
{
if (txtnum.Text.Length > 1)
{
txtnum.Text = txtnum.Text.Substring(0, txtnum.Text.Length - 1);
}
else if (txtnum.Text.Length == 1)
{
txtnum.Text = "0";
}
}

private void btn1_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0")(equalclick==1))
{
txtnum.Text = "1";
equalclick = 0;
}
else
{
txtnum.Text += "1";
}
}

private void btn2_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "2";
equalclick = 0;
}
else
{
txtnum.Text += "2";
}
}

private void btn3_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "3";
equalclick = 0;
}
else
{
txtnum.Text += "3";
}
}

private void btn4_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "4";
equalclick = 0;
}
else
{
txtnum.Text += "4";
}
}

private void btn5_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "5";
equalclick = 0;
}
else
{
txtnum.Text += "5";
}
}

private void btn6_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "6";
equalclick = 0;
}
else
{
txtnum.Text += "6";
}
}

private void btn7_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "7";
equalclick = 0;
}
else
{
txtnum.Text += "7";
}
}

private void btn8_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "8";
equalclick = 0;
}
else
{
txtnum.Text += "8";
}
}

private void btn9_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "9";
equalclick = 0;
}
else
{
txtnum.Text += "9";
}
}

private void btn0_Click(object sender, RoutedEventArgs e)
{
if ((txtnum.Text == "0") (equalclick == 1))
{
txtnum.Text = "0";
equalclick = 0;
}
else
{
txtnum.Text += "0";
}
}

private void btndot_Click(object sender, RoutedEventArgs e)
{
Double pos = txtnum.Text.IndexOf(".");
if (pos < 0)
{
txtnum.Text += ".";
}
}

private void btn00_Click(object sender, RoutedEventArgs e)
{
if (txtnum.Text == "0")
{
txtnum.Text = "0";
}
else
{
txtnum.Text += "00";
}
}

private void Canvas_Loaded(object sender, RoutedEventArgs e)
{
txtnum.Text = "0";
}
}
}

Running the program

Let us check the application by performing a simple multiplication operation.
Follow the simple steps explained below-

1.When the program starts, 0 is displayed on the screen as it happens in any calculator.

2.I clicked on number 9 and the number is displayed on the calculator's screen.

3. Now I clicked on the multiplication operator which brings 0 on the calculator's screen making it ready to accept the next operand for the multiplication operation.

4. Now I clicked on number 5 and the second operand is displayed on the calculator screen.

5. Now I clicked on the "equal to" operator and the result is displayed on the screen.

So, you can see how easy it is to use silverlight. You will experience the difference between silverlight and other web technologies when you will run this application. The user friendliness and the beauty of the presentation makes silverlight extremely attractive and even being a web application the silverlight application appears to work as a desktop application(i.e. no page refreshes). Trust me, you will love it when you will see a professional looking "professional calculator in your Silverlight application. Keep in touch as much more interesting and knowledgable stuffs coming soon.

BOUNCING BALL Example of Silverlight Animation

2009-03-08T07:50:00.000-07:00

A more complex example is provided in the code below to create an animation that includes a bouncing ball with a background that changes color-

BOUNCING BALL
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="ParentCanvas"
Loaded="Page_Loaded"
x:Class="BouncingBall.Page;assembly=ClientBin/BouncingBall.dll"
Width="480"
Height="240"
>
<Canvas.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SBBouncingBall">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="168"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="16"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="168"/>
<SplineDoubleKeyFrame KeyTime="00:00:04" Value="96"/>
<SplineDoubleKeyFrame KeyTime="00:00:05" Value="168"/>
<SplineDoubleKeyFrame KeyTime="00:00:06" Value="152"/>
<SplineDoubleKeyFrame KeyTime="00:00:07" Value="168"/>
<SplineDoubleKeyFrame KeyTime="00:00:08.1000000" Value="168"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="64"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="128"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="200"/>
<SplineDoubleKeyFrame KeyTime="00:00:04" Value="264"/>
<SplineDoubleKeyFrame KeyTime="00:00:05" Value="320"/>
<SplineDoubleKeyFrame KeyTime="00:00:06" Value="360"/>
<SplineDoubleKeyFrame KeyTime="00:00:07" Value="392"/>
<SplineDoubleKeyFrame KeyTime="00:00:08.1000000" Value="456"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="parentCanvas" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:02" Value="#FFBF6262"/>
<SplineColorKeyFrame KeyTime="00:00:04" Value="#FF6277BF"/>
<SplineColorKeyFrame KeyTime="00:00:06.2000000" Value="#FF7824A5"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Ellipse RenderTransformOrigin="0.5,0.5" x:Name="ellipse" Width="65" Height="65" Fill="#FF27DE3C" Stroke="#FFECAE28" StrokeThickness="2" Canvas.Left="10" Canvas.Top="10">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>

The result of the code above is shown in the figure below-

Animations in Silverlight

2009-03-05T09:13:00.000-08:00

Elements in the Silverlight XAML represent objects in the .NET Framework and Silverlight. Objects have properties which in turn have values that can be modified. An animation in software occurs through the progressive modification of a property value such an location, shape, size etc over a period of time. For example, the angle property of a rotation transformation can be modified progressively over a period of time say in seconds to cause text affected by the transformation to spin.
Animation in Silverlight is divided into 2 categories-
1. from / to / by animations
2. key-frame animations
1. from / to / by animations - In from / to / by animations, the time periods over which the animations occur are handled by the duration property, and the starting value of the property and the ending value of the property are specified using the from and to properties respectively.
2. key-frame animations - Key-frame animations are comparitively more complex to implement but the animation capabilities offered by key-frame animations more powerful. We will be discussing from/to/by animations here.
In Silverlight, the various types of animations are implemented through animation objects. All the animation objects are derived from the Timeline object. The only properties that can be animated are the properties with values of type of datatype double,Color or Point. And the derived animation object types are DoubleAnimation, ColorAnimation and PointAnimation. These animation object types are described below-
1. DoubleAnimation Object - DoubleAnimation objects are used to animate object property values of double type.
2. ColorAnimation Object - ColorAnimation objects are used to animate object property values of Color type.
3. Point Animation Object - PointAnimation objects are used to animate object property values of Point type.
The code below increases the font size of the text in tbWebucator text block from 5.0 to 50.0 over a period of 5 seconds-
<TextBlock
FontFamily = "Arial"
FontSize = "50"
Width = "300"
Height = "100"
Canvas.Left = "100"
Canvas.Top = "100"
Text = "Webucator"
x : Name = "tbwebucator">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="tbWebucator"
Storyboard.TargetProperty="FontSize"
From="5.0" To="50.0" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
As shown in the code above, a DoubleAnimation must be contained inside of the <StoryBoard> element. A <StoryBoard> element may contain more than one animation. It is must to associate a <StoryBoard> with an event action. In the code above, the <StoryBoard> is associated with a <BeginStoryBoard> event action.
An event action must be initiated and for that an <EventTrigger> element is used. The containing <EventTrigger> in the above code fires on the Loaded event of the TextBlock. Each of the elements can contain multiple triggers and all the triggers associated with an element must be contained inside the triggers collection for that element.
The code above is written so as to start automatically upon the text block loading. Animations can also be controlled programmatically. To control an animation programmatically, the animation element must have a name assigned to it so that it can be referred through coding and then call the method associated with the desired action. For example, to start an animation, call the Begin method.
Additional attributes are provided to further control the behavior of an animation. For example, the animation in the code written above will play for a single time only. If we want the code to continue playing the same animation repeatedly, the RepeatBehavior can be set to the number of repeations required. If we want the animation to play continuously for indefinite time, the RepeatBehavior property should be set to "Forever".
An animation can also be configured to animate in reverse as soon as it completes it original animation, by setting the AutoReverse property to "True".

Keep in touch to see a more complex and interesting example of Silverlight Animation.

Transformations

2009-02-20T09:31:00.000-08:00

Transformation objects are those objects that are used to transform other Shape objects. Transformations are of various types which includes rotations, scales, translations and skews. A rotation transformation rotates an object. A scale transformation resizes the object. A translation transformation moves the object. Askew transformation skews the shape of the object.
I wil define one of these transformations here, say rotation transformation. Let us rotate the text above through an angle of 45 degree. The code shown below does this with ease-

<TextBlock RenderTransformOrigin="0.5,0.5" Width="320" Height="80" Canvas.Left="80" Canvas.Top="104" TextWrapping="Wrap"> <TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="45"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</TextBlock.RenderTransform>
<Run FontFamily="Segoe UI" FontSize="50" Text="Webucator"/>
</TextBlock>

The result of the code above is shown in the figure below-

Silverlight Video

2009-02-17T00:29:00.000-08:00

A little more effort is needed to paint by using video. The reason for this extra effort is that a VideoBrush does not directly play videos rather it utilizes the videos from other sources such as a MediaElement object. I have discussed about the MediaElement object again in the section below. In the example shown below, a video is being played as the fore ground of the text. The VideoBrush is utilized in the foreground of the text using the property of TextBlock ie TextBlock.Foreground and the VideoBrush in turn utilizes the video from the MediaElement object.

<MediaElement Source="MyFavouriteVideo.wmv" Opacity="0" x:Name="MyVideo" />
<TextBlock Width="350" Height="100" Canvas.Left="60" Canvas.Top="30" TextWrapping="Wrap">
<TextBlock.Foreground>
<VideoBrush SourceName="MyVideo" />
</TextBlock.Foreground>
<Run FontFamily="Segoe UI" FontSize="65" Text="Webucator"/>
</TextBlock>
The result of the code written above is shown in the figure below with video playing as text-

Silverlight Brushes

2009-02-08T03:41:00.000-08:00

Brushes are used to paint the spaces between the strokes, or the border or the stroke itself. For example, we can use a brush to paint the interior space of a rectangle or we can use the brush to paint the border of the rectangle. In fact, we have used a gradient brush to paint the interior of the rectangle that was used in the rectangles example above, as shown in the code below-
<Rectangle Width="82" Height="82" Stroke="#FFF28C12" Canvas.Left="210"
Canvas.Top="90">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFF28C12" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

One thing to remember is that a brush can be used to paint solid colors, gradients, images, and even video. The ability to paint with images is fairly common among various graphic design tools, however the ability to paint with video is available only in a very few elite graphic tools. One example of such an elite graphich tool is the Expression Blend. Expression Blend currently supports both image and video brushes but only for WPF applications and not for the Silverlight applications.
However, it's very easy to create an image brush fill as shown in the code below-
<Ellipse Width="200" Height="200" Stroke="#FFD89623" StrokeThickness="4" Canvas.Left="10" Canvas.Top="10">
<Ellipse.Fill>
<ImageBrush ImageSource="bread.jpg" />
</Ellipse.Fill>
</Ellipse>

The result of the above code is shown in the figure below-

Paths and Geometries

2009-01-29T06:23:00.000-08:00

The Path object is also derived from the Shape object, with a difference that the Path object has no defined shape. Instead, a Path accepts an indirect or an abstract definition of a shape to define how the Path is rendered. The Geometry class defines how a Shape is rendered. There exists only one Path class but many types of Geometry classes exists. The Geometry class itself is an abstract class and hence cannot be directly instantiated so one of its child classes must be instantiated.

The Path class can be used to define simple shapes like lines, rectangles and ellipses in the same manner as the Line,Rectangle and Ellipse classes respectively, however the PathGeometry class is used to create more complex shapes. Creating the paths can be rather tricky by hand coding the path coordinates directly in XAML. When using a design tool, such as the Blend, paths are created as a combination of simpler elements or freehand by using a pen or pencil tool. The code below shows several path elements that were used in Blend when a sketchy little stick man was quickly drawn with the pencil tool.

<Path
Width="36.943"
Height="40"
Fill="#FFFFFFFF"
Stretch="Fill"
Stroke="#FF000000"
Canvas.Left="100"
Canvas.Top="20"
Data="M98,41 C94.367387,42.623083 91.686629,43.473339 88,44 88,44.666667 88,45.333333 88,46 87,46 86,46 85,46 85,46.666667 85,47.333333 85,48 84,48 83,48 82,48 82,62.686511 69.161892,80 102,80 113.81515,80 126.94836,63.615905 98,41 z"/>
<Path
Width="30"
Height="76"
Fill="#FFFFFFFF"
Stretch="Fill"
Stroke="#FF000000"
Canvas.Left="76.472"
Canvas.Top="61"
Data="M99,78 C99.621745,91.056649 101.88843,103.66122 103,117 103.49483,122.93794 105,127.98987 105,134 105,144.96507 85,133.97906 85,148 80.579426,148 79.654844,149.9753 76,153"/>
<Path
Width="19"
Height="14"
Fill="#FFFFFFFF"
Stretch="Fill"
Stroke="#FF000000"
Canvas.Left="102.472"
Canvas.Top="123"
Data="M102,140 C109.69438,144.23843 113.25082,146.41746 120,153"/>
<Path
Width="43"
Height="4"
Fill="#FFFFFFFF"
Stretch="Fill"
Stroke="#FF000000"
Canvas.Left="77.472"
Canvas.Top="87"
Data="M77,104 C91.163884,104.69658 105.26923,106.05954 119,107"/>

There exists several types of geometries that can be utilized with a path which includes a LineGeometry, a RectangleGeometry, an EllipseGeometry, and a PathGeometry. The PathGeometry has the ability to compile complex shapes from multiple path segments. Path segments include arcs, bazier curves, lines and variations of each of these.
Here above, the path geometry is used in shorthand form. The Path object includes an attribute named the Data attribute, which accepts multiple coordinates to define points along the path. On giving a closer look, we will notice that the Data attribute value also contains characters such as "M" or "C". This Data attribute value is actually a mini markup language and the characters are very meaningful and are also case-sensitive. For example, an uppercase "M" signifies a move command and the coordinates that follow indicate the path of the movement.

So, I hope you guys are enjoying the graphics work out here in silverlight. :-)

Just keep in touch with this article, you are going to learn a lots of interesting features about silverlight.

Rectangles

2009-01-17T22:08:00.000-08:00

The Rectangle class is used for drawing rectangles in Silverlight. The code below describes how to draw two rectangles, a larger, blue rectangle in the background and a smaller, orange rectangle on top of it
<Rectangle Width="250" Height="130" Stroke="#FF000000" Canvas.Left="50" Canvas.Top="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF6867D2" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="82" Height="82" Stroke="#FFF28C12" Canvas.Left="210" Canvas.Top="90">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFF28C12" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

Just as in the case of ellipse, when modifing the size of a rectangle using Blend, if we want to draw a square or maintain the current ratio of the rectangle's height and width, hold down the shift key.The result of the markup above is shown in the figure below.

Keep in touch. As you are going to see a lot many interesting features of Silverlight soon in the coming sessions.

Silverlight Graphics - Drawing Ellipse

2009-01-09T12:45:00.000-08:00

Ellipses
Ellipse object is used to draw round objects in Silverlight. The circular characteristics of an ellipse are defined by specifying its height and width. The markup snippet shown below draws an oval ellipse with a blue gradient fill and a stroke of 4
<Ellipse Width="226" Height="124" Stroke="#FF000000" StrokeThickness="4" Canvas.Left="8" Canvas.Top="8>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5>
<GradientStop Color="#FFD9EAF0" Offset="0"/>
<GradientStop Color="#FF126D8E" Offset="1"/>
<LinearGradientBrush >
<Ellipse.Fill>
<Ellipse>
Sometimes, it may be tough to create an exact circle by using a graphical design tool, such as Blend. A key point to note when creating a circle is to ensure that the sllipse is provided with the same value for its height and width. To create a circle using Blend, while modifying the size of the ellipse, press the Shift key. The code below creates a circle with a diameter of 100 pixel., a stroke of 4 having a yellow color and with the fill color as green.
<Ellipse Width="100" Height="100" Stroke="#FFEAEC19" StrokeThickness="4" Canvas.Left="260" Canvas.Top="110>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5>
<GradientStop Color="#FFD9EAF0" Offset="0"/>
<GradientStop Color="#FF247016" Offset="1"/>
<LinearGradientBrush >
<Ellipse.Fill>
<Ellipse>
The combined result of the two ellipse definitions above is shown in the figure below-

Silverlight Graphics- Drawing Lines

2009-01-08T10:29:00.000-08:00

Graphic Elements
In Silverlight, drawing is accomplished through the use of graphic elements like an ellipse or a rectangle. All the graphic elements in Silverlight extend the Shape type.
Hence, all Shape type objects in Silverlight include some common functionalities, which are listed below-
· Stroke- defines the outline of the shape.
· StrokeThickness- defines the thickness of the stroke ie the thickness of the outline of the shape.
· Fill- defines in what way the interior of the shape is filled or painted.
In addition to this, the shape objects can be positioned on the canvas of the silverlight by using the properties of the canvas ie Canvas.Top and Canvas.Left.
Lines
Line object is used to draw lines in silverlight. A line can be drawn easily on the canvas with the help of Blend and can be created directly in XAML using Visual Studio 2008. Geametrically, a line is defined through the definition of its two end points. Each point is defined as a combination of an X coordinate and a Y coordinate.
The code provided below is used to draw a red coloured diagonal line from 20,20 to 120,120.
<Line
X1="20" Y1="20"
X2="120" Y2="120"
Stroke="#FFC53737"
StrokeThickness="2"
RenderTransformOrigin="0.595,0.416"
Width="158"
Height="125"
Fill="#FFD63737" />
The canvas resulting from the above code is shown below-

Lots of more interesting things in Silverlight graphics yet to come, so just stay in touch and enjoy learning silverlight.

Drawing Graphics

2009-01-06T10:44:00.000-08:00

Silverlight is referred to as a subset of WPF as applied by using principles of an extended ASP.NET AJAX and as such, Silverlight implements many of the features that are included in WPF. For example, with Silverlight, we can draw two-dimensional (2D) graphics in applications. Graphics of this caliber with such good quality are more than adequate for most user interfaces and applications, particularly business applications. However, there are many applications that require more elaborate graphic capabilities, such as three-dimensional graphics (3D). For example, an engineering application may benefit a lot from 3D graphics in the user interface as compare to a 2D graphics.Whilst WPF provides 3D graphics but currently Silverlight doesn't support it currently.
To provide 3D graphics, an application needs to utilize the hardware of the local workstation and the facilities of the local operating system. Silverlight is designed as a cross-platform and cross-browser compliant ie Silverlight is designed in such a way that it is both platform independent and browser independent. With that in mind, it is not possible to tied Silverlight to any particular hardware configuration, operating system, or browser. This design coincides very well with the design goals of Silverlight but does not aim towards rendering 3D graphics.
So, silverlight doesn't support 3D graphics currently, but may be a future version of Silverlight finds a way to support 3D graphics.

Animation in Silverlight

2009-01-03T22:31:00.000-08:00

The Importance of an Impressive and User Friendly User Interface
Many big companies such as Microsoft and others have invested a huge amount of money in software research and development. The major factors that influence the end users are performance and the user interface. It is natural that the users will appreciate those websites that have a good user interface and hence user friendly. And hence the software developers and continuously trying harder and harder to improve the application's performance.
We can also describe this whole phenomena in the language of marketing. The more a user is impressed with the performance of the website, the more the user will visit that site and also more will be the chances that the user will refer this site to others and hence will result in a greater number of visitors. This section revolves around the ways to create an impressive and user friendly user interface. In the coming sections, you will be introduced with animation in silverlight.

Language Integrated Query (LINQ)

2008-12-13T00:37:00.000-08:00

LINQ has the capability to query any object programmatically that implements the IEnumerable interface. LINQ will the .NET developers with an entirely new programming paradigm but the new functionality and benefits thereof should be quickly accepted and adapted by most.
For an example, we'll create the same example described above but here we will utilize LINQ in the Web service to access data stored in SQL Server 2005 as well as in the code behind in the Silverlight application to iterate through the results.
The first step to create a version of the Web service that utilizes LINQ for accessing data that is stored in SQL Server 2005 is to create a new ASP.NET Futures Web site, add a new Web service to the project, and then add a new LINQ to SQL Class to the project as shown in the figure below-

Note here that the LINQ to SQL Class object has a .dbml extension (database modeling language). After adding a LINQ to SQL class, create data classes by dragging the required tables from the Server Explorer to the class design area. The figure below shows the class in which the Pets table is added-

The simplified version of the Web method that utilizes the LINQ to retrieve the pet information from SQL Serve 2005 is shown in the code below-

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;

///

/// Summary description for PetService
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class PetService : System.Web.Services.WebService
{
public PetService ( )
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public List GetPetInfo()
{
List petInfo = new List();
PetClassesDataContext petsDB = new PetClassesDataContext();
var pets = from pet in petsDB.Pets
select pet;
foreach (var pet in pets)
{
petInfo.Add("My pet is named " + pet.Name + ". It is a " + (pet.Gender == true ? "male" : "female") + " " + pet.Breed + " that weighs " + pet.Weight + " pounds. " + pet.Notes + " ");
}
return petInfo;
}
}

This code now utilizes the DataContext class that is created from the LINQ to SQL Class template and exposes the database to our code. The main benefit here is that now the developers no longer have to master SQL and other database languages and still can query and manage data stored in databases in the same manner as data stored in any type of programmatic collection. Additionally, the above code is also more compact. The second line of the code is a query that is similar to a "Select * From Pets" SQL query od SQL where each item retrieved correlates to a row in the source database.
Utilizing LINQ benifits not only the Web service that resides on the server but also the Silverlight application. The event handler in the code behind of the Silverlight application that calls the Web method is shown in the code below after being converted to LINQ.

using System;
using System.Linq;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace EXAMPLELINQ
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
}
public void GetPetInfo(object o, MouseEventArgs e)
{
EXAMPLELINQ .localhost.PetService svc = new EXAMPLELINQ.localhost.PetService();
IEnumerable pets = from petInfo in svc.GetPetInfo()
select petInfo;
// Display the results.
foreach (string pet in pets)
{
tbOutput.Text += pet;
}
}
}
}
Its clearly visible that the LINQ code is much more compact and intuitive. The resulting Silverlight page for this code is exactly the same using the LINQ versions as the non-LINQ versions.

Stay tune with this website because a lot of more interesting things coming up for u soon.

Language Integrated Query (LINQ)

2008-11-28T12:51:00.000-08:00

Sorry for the delay again I have come up with an interesting topic that is an integral part of Silverlight-
Language Integrated Query(LINQ)
Language Integrated Query (LINQ) is one of the most important additions in the .NET Framework in version 3.5. Most of the developers are familiar with Structured Query Language (SQL). SQL is used to query relational database data ie to perform operations on the data of the relational database. However, sometimes, the SQL queries that retrieve data from a relational database schema are abstracted away from business logic and middle-tier code. Furthermore, the representation of the data at the business logic and code level is generally through objects, arrays, and collections. So the developers have to regularly search for these constructs using the tailor-made loops.
From a long time, it has been a requirement for many programmers to have a language which can be used for querying data stored in programming constructs and object oriented mechanisms. One stable and well-entrenched industry standard is the SQL. It would be impossible to extend SQL so that it could be used to query programming constructs. However, Microsoft's ambition was to make things easier for programmers by creating a standard for querying data stored in coding constructs. Their efforts resulted in a new query language that targets data stored in objects and collections, which was named Language Integrated Query (LINQ). Moreover, LINQ was also extended to query relational database, XML data, and other data sources to fetch data stored in them. One thing to keep in mind here is that, data queried by using LINQ must be stored as objects. If LINQ is used to query data from a relational data source, then the data must first be represented using an object model.
Keep in touch for more details, lots of interesting things to come up.

Data Access By Using SOA

2008-09-30T06:22:00.000-07:00

One more thing to remember is that the Silverlight application can be added to the same project as the Web service that will be called. This ensures 2 things, firstly this ensures that both the Silverlight application and the Web service reside in the same domain and secondly this ensures that the Silverlight application can easily be tested using the Visual Studio 2008.The figure shown below illustrates a Silverlight XAML file designed to consume pet information from the Web method shown above and display it in a TextBlock-

We can add a Web reference to the Silverlight application to reference the Web service. After this, the Get Pet Information region can be clicked to fire an event handler that calls the Web service and displays the results in the TextBlock. The XAML code shown below is used to generate the page shown above-

Finally, the code below shows the event handler for the canvas that calls the Web service-using System; using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace PetInformationClient {public partial class Page : Canvas {public void Page_Loaded(object o, EventArgs e) {// Required to initialize variables InitializeComponent(); }public void GetPetInfo(object o, MouseEventArgs e) { PetInformationClient.localhost.PetService svc = new PetInformationClient.localhost.PetService(); string[] petInfo = svc.GetPetInfo(); // Display the results. for (int i = 0; i < petInfo.Length; i++) {tbOutput.Text += petInfo[i].ToString(); } }}}To test the Web service call from the Silverlight application, the next step that we have to do is to add the Silverlight link to the ASP.NET Futures project and then add the asp:Xaml element to the Default.aspx test page. Now, run this application to test it, by pressing F5. The resulting Silverlight application will display the following figure-

This illustrates calling a Web service to retrieve data from a database through a Silverlight application. The Silverlight application could collect data and insert, update, or delete data in the database with the same ease. The Web service being called could also perform any valid Web service operation which also includes calling other Web services in other domains.
More interesting topics with lots of knowledgable content to come. So keep in touch with the site.

Accessing Data Using Silverlight

2008-09-18T12:00:00.000-07:00

When the Silverlight application calls the service, this service may take the form of a standard ASP.NET Web service or a WCF service. Like we already discussed earlier, the ASP.NET Futures Web site project is designed exactly to test the Web service calls from a Silverlight application. Once we have created a new ASP.NET Futures Web site, a Web service can be added to this project and this service can be directed to transport data by using JSON. The Web method shown below is used to connect to the SQL Server database and return the results in an ArrayList. An ArrayList can be sized dynamically and is also serializable. To return database results, the return value for a Web method that is most commonly used is an Ado.Net Dataset. But since datasets are currently not supported, ArrayList will do the work here.

using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Configuration;
using System.Web;
using System.Web.Configuration;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

///

/// Summary description for PetService
///

Data Access By Using SOA

2008-09-09T07:57:00.000-07:00

Sorry for the delay in posting the articles, be sure to keep in touch with the articles now.
As discussed earlier, Silverlight application can make calls to a server by calling a Web service. Currently the calls that are made to a Web service from a Silverlight application can transport data by using plain old XML (POX) or JSON. In addition to this, a Web service that is being called by a Silverlight application must currently reside in the same domain as the Silverlight application. This restriction which is imposed as a security precaution, limits the ability of the Silverlight application to make calls to Web services, however, it does not limit what a Web service being called by the Silverlight application can do. A Web service being called by a Silverlight application acts as a proxy for the Silverlight application and can make calls to any resource on behalf of this Silverlight application and return the results. For example, a Silverlight application may call a Web service that resides in the same domain in which the application resides and that service may, in turn, call another Web service residing outside of the domain or it may also query a database. This method to retrieve server resources is the standard method that is available for a Silverlight application.

Accessing Data Using Silverlight

2008-08-30T09:37:00.000-07:00

Accessing Data
Remember that data stored in a database typically resides on a remote server where as a Silverlight application resides on a client workstation. In order to retrieve data from a database that resides on a remote server, requests must be sent to the server to retrieve that data just as with any other Web application. There are several methods that can be used to work with data in Silverlight as discussed below-

Isolated Storage
Because of the security constraints that are placed upon a Silverlight application (the "sandbox" that it operates in), a Silverlight application cannot read files from the client machine unless they are stored in the same isolated storage. Thats why, a Silverlight application is fairly limited in its capability to store data locally, however simple files can be created to store simple data and settings.
Silverlight application can have XML files deployed with them but they must have their build action set to Embedded Resource so that when the application is built, the XML files are compiled into the assembly. This makes the ability to modify the file somewhat limited and also limits the ability for the file to contain dynamic data that is shared with other users of the application.
Silverlight includes classes to work with XML, however these classes are designed to read an incoming XML string (such as that coming from a call to a Web service) and not reading XML from a file.

Accessing Data Using Silverlight

2008-08-13T08:00:00.000-07:00

This section will introduce the reader with the ability of Silverlight application to play various types of multimedia sources.

Serialization

As we all know, the web is stateless. In a typical Web communication, a client makes a request for a resource by passing a message to the Web server. The Web server, in turn, responds with a response message to the client and the messages continue to be sent back and forth between the client and server to conduct the communications necessary to deliver an application. The messages that are sent between the client and the server are simple text messages. The question that rise here is that how the more complex items like images, graphs, animations and multimedia get transported from a web server to a client? The answer is simple, all the items that are to be transported over the Web are first converted to text, then transported over the Web, then recreated from the text representation of the item. The process of converting a complex item to a text representation is known as serialization.

The reverse of this process, i.e converting an item from a text representation back to the original object is known as deserialization. The most common formats to convert an item for transportation over the Web are XML, SOAP, and JSON. The .NET Framework on the server side and that included in Silverlight, both include facilities for serializing and deserializing the data.
You will be getting some more essential information in the next few sessions and I really hope you are enjoying your step by step tutorial for Silverlight.

The asp:Xaml Control

2008-08-08T07:28:00.000-07:00

Silverlight framework provides a generic class or type, for working with XAML, the Sys.Preview.UI.Xaml.Control. asp:Xaml control is used to insert XAML into an ASP.NET AJAX page in a very generic manner. asp:Xaml control is typically extended through JavaScript or managed code or dynamic code to provide a specialized implementation of the control. The attribute of the asp:Xaml control that is most commonly used is the XamlUrl attribute. It identifies the XAML file to be included in the page. asp:Xaml control exposes only three minimal events out of which one is fired upon an error and one is fired upon the XAML loading.
Below is the code as an example of including XAML in an ASP.NET AJAX page by using the asp:Xaml control -

Make sure to remove the hyphen symbol "-" from all the starting and ending html tags before using the code. I was not able to display the code below, so i placed the hyphen "-" in all the opening and closing html tags. So just remove the hyphen while using the code, and see the code running successfully.

<-%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %->
<-%@ Register assembly="Microsoft.Web.Preview" namespace="Microsoft.Web.Preview.UI.Controls" 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"->
<-head runat="server"->
<-title->Simple XAML Example<-/title->
<-/head->
<-body->
<-form id="form1" runat="server"->
<-asp:ScriptManager ID="ScriptManager1" runat="server"->
<-/asp:ScriptManager->
<-div->
<-/div->
<-asp:Xaml ID="Xaml1" runat="server" Height="500px" Width="500px" XamlUrl="~/Scene.xaml" /->
<-/form->
<-/body->
<-/html->

Silverlight ASP.NET AJAX Controls

2008-08-05T11:33:00.000-07:00

Simple Calculator In Silverlight

2008-08-03T20:19:00.000-07:00

In this example, I will show you how to develop a simple calculator.

Steps:

1. First of all I will add a canvas on which I will develop my simple calculator. In the canvas I will add three textblocks and three textboxes, with two of them for entering the operands and the third one to display the result of the operation.
<UserControl x:Class="SimpleCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="SteelBlue">
<TextBlock Text="First Number" Foreground="White" Canvas.Left="20" Canvas.Top="20"></TextBlock>
<TextBox x:Name="txtnum1" Width="100" Height="20" Canvas.Left="140" Canvas.Top="20"></TextBox>
<TextBlock Text="Second Number" Foreground="White" Canvas.Left="20" Canvas.Top="40"></TextBlock>
<TextBox x:Name="txtnum2" Width="100" Height="20" Canvas.Left="140" Canvas.Top="40"></TextBox>
<TextBlock Text="Result" Foreground="White" Canvas.Left="20" Canvas.Top="60"></TextBlock>
<TextBox x:Name="txtres" Width="100" Height="20" Canvas.Left="140" Canvas.Top="60"></TextBox>
</Canvas>
</UserControl>

2. Then I will add five buttons to perform 5 different operations namely, Add, Subtract, Multiply, Divide and Clear.
<UserControl x:Class="SimpleCalculator.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="SteelBlue">
<TextBlock Text="First Number" Foreground="White" Canvas.Left="20" Canvas.Top="20"></TextBlock>
<TextBox x:Name="txtnum1" Width="100" Height="20" Canvas.Left="140" Canvas.Top="20"></TextBox>
<TextBlock Text="Second Number" Foreground="White" Canvas.Left="20" Canvas.Top="40"></TextBlock>
<TextBox x:Name="txtnum2" Width="100" Height="20" Canvas.Left="140" Canvas.Top="40"></TextBox>
<TextBlock Text="Result" Foreground="White" Canvas.Left="20" Canvas.Top="60"></TextBlock>
<TextBox x:Name="txtres" Width="100" Height="20" Canvas.Left="140" Canvas.Top="60"></TextBox>
<Button x:Name="btnadd" Content="Add" Width="60" Canvas.Left="40" Canvas.Top="90" Click="btnadd_Click"></Button>
<Button x:Name="btnsubtract" Content="Subtract" Width="60" Canvas.Left="100" Canvas.Top="90" Click="btnsubtract_Click"></Button>
<Button x:Name="btnmultily" Content="Multiply" Width="60" Canvas.Left="160" Canvas.Top="90" Click="btnmultily_Click"></Button>
<Button x:Name="btndivide" Content="Divide" Width="60" Canvas.Left="220" Canvas.Top="90" Click="btndivide_Click"></Button>
<Button x:Name="btnclear" Content="Clear" Width="120" Canvas.Left="100" Canvas.Top="116" Click="btnclear_Click"></Button></Canvas>
</UserControl>

3. Each of the buttons will have a click event handler that will point to a particular code block in the code behind, like add button will have "btnadd_Click" as its event handler for click event. The code blocks for all the button events are shown in the code behind file that is shown below-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SimpleCalculator
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void btnadd_Click(object sender, RoutedEventArgs e)
{
if (txtnum1.Text != "" && txtnum2.Text != "")
{
txtres.Text = Convert.ToString(Convert.ToDouble(txtnum1.Text) + Convert.ToDouble(txtnum2.Text));
}
}
private void btnsubtract_Click(object sender, RoutedEventArgs e)
{
if (txtnum1.Text != "" && txtnum2.Text != "")
{
txtres.Text = Convert.ToString(Convert.ToDouble(txtnum1.Text) - Convert.ToDouble(txtnum2.Text));
}
}
private void btnmultily_Click(object sender, RoutedEventArgs e)
{
if (txtnum1.Text != "" && txtnum2.Text != "")
{
txtres.Text = Convert.ToString(Convert.ToDouble(txtnum1.Text) * Convert.ToDouble(txtnum2.Text));
}
}
private void btndivide_Click(object sender, RoutedEventArgs e)
{
if (txtnum1.Text != "" && txtnum2.Text != "")
{
txtres.Text = Convert.ToString(Convert.ToDouble(txtnum1.Text) / Convert.ToDouble(txtnum2.Text));
}
}
private void btnclear_Click(object sender, RoutedEventArgs e)
{
txtnum1.Text="";
txtnum2.Text="";
txtres.Text="";
txtnum1.Focus();
}
}
}

In the code blocks we will write the code to perfore the mathematical operation related to that event, as shown above. Thats it, just run this code to see your simple calculator working for you.

Silverlight Versions

2008-08-03T07:19:00.000-07:00

There are two versions of Silverlight that are available in the market. Version 1.0 and Version 2.0
Version 1.0 includes support for creating rich interactive applications (RIA) and uses JavaScript as its programming language. Version 1.0 supports the industry-leading Windows Media Services which enables the delivery of audio and video that includes 2D and vector graphics.
Version 2.0 includes all the features of version 1.0, support for the .NET Framework, support for .NET-compliant programming languages such as C#, Visual Basic, Python, and Ruby, and support for database operations and language-integrated query (LINQ). Version 2.0 was originally named version 1.1, however, due to the large number of changes and additions done in this new version, it was later renamed to version 2.0.

Mozilla Firefox
Silverlight is supported by the browser Mozilla Firefox version 2 and version 1.5 on Windows Vista, Windows XP, Windows 2000 (using Silverlight version 2.0), Windows Server 2003, Mac OS 10.4.8+ for the PowerPC (using Silverlight version 1.0), and Mac OS 10.4.8+ for Intel-based PCs.

Opera
Silverlight is not supported by Opera yet. Opera is available for Windows and is on the roadmap for Silverlight support but until now, Opera does not support Silverlight.

Target Design Platforms
Silverlight plug-in renders graphics and multimedia using a vector-based graphics engine. Vector graphics has the advantage that it can easily be scaled from very small displays to very large displays of varying resolutions with virtually no loss of image quality. The current release of Silverlight targets standard Web client workstations however Microsoft is working on a prototype of the Silverlight plug-in which can be used on Windows Mobile devices. Silverlight on a Windows Mobile device will enable the developers to deliver live, streaming, high quality video to smart phones and similar devices. The goal is to enable the developers to deliver rich interactive applications (RIA) to any type of device.

You are about to see many interesting features of Silverlight in the coming sessions, so keep in touch.

Silverlight Architecture

2008-08-02T06:56:00.000-07:00

Although ASP .NET and Silverlight both utilize the .NET Framework and are both used for Web development, Microsoft Silverlight functions in a different way from ASP .NET. In ASP .NET the bulk of the processing occurs on the server side while in silverlight it occurs on the client side thus decreasing the server resource utilization and improving the performance and thus the web experience on the client side. The figure below explains the difference between the processing for ASP.NET processing and Silverlight processing.

It must be kept in mind that Silverlight plug-in is needed to run a silverlight application on a client machine. If the silverlight plug-in is not installed on the client machine, it will be downloaded and installed. Silverlight plug-in can be thought of as a scaled down version of the full dotnet framework. Silverlight plug-in does not contain all the classes and functionalities contained in the full .NET Framework but only those classes and functionalities that are applicable to a Silverlight Web client. Furthermore, the classes and functionalities included in the Silverlight plug-in are streamlined and optimized for use on the Web client machine.

Silverlight was designed using the same design paradigm as that of ASP .NET. Each page of Silverlight application includes an associated code behind file that includes the code that handles events fired by the page similar to that in an ASP .NET application. Silverlight resembles WPF in that it uses the Extensible Application Markup Language (XAML) to construct the user interface (presentation layer). Silverlight applications are composed of text-based files that include XAML and code. Silverlight applications can be created using any text editor, however more advanced tools and development environments, such as Visual Studio or Expression Suite, simplifies the task significantly.

Silverlight And Dotnet

2008-08-01T23:12:00.000-07:00

An Overview of Silverlight

Silverlight is delivered as a cross-platform and cross-browser plug-in to the .NET Framework. With cross-platform I mean to say that silverlight aplications can be run on multiple platforms and with cross-brower I mean that websites built in silverlight can be viewed from any browser like Internet Explorer, Firefox, Netscape Navigator etc. There are two versions of silverlight available in the market-

1. Silverlight 1.0
2. Silverlight 2.0

Silverlight 1.0

Silverlight 1.0 was released in the market in September 2007. Following are some of the features of Silverlight 1.0-

Developing and managing 2-D graphics and animation.
Handling mouse,keyboard and ink input.
Working with JPEG and PNG imaging.
Delivering WMV,WMA and MP3 media.
Formating and manipulating text.
Communicating with services and downloading server resources by using the HTTP downloader.
Parsing Extensible Application Markup Language (XAML) content and markup.
Navigating web content by utilizing the Javascript Document Object Model(DOM)

Silverlight 2.0

Version 2.0 is released in the market in the summer of 2008. Silverlight version 2.0 includes-

All of the functionality that was included in Silverlight version 1.0
Support for the managed code C#, VB, Python, Ruby.
XAML extensibility.
Sample controls and control class.

Early Adopters

Due to the enormous new features provided by silverlight and its overwhelming graphics quality, we can see a number of developer's communities welcoming the arrival of silverlight. And in response to the overwhelming developer's community for Silverlight, many developers and companies have become early adopters of the technology. Companies like the World Series of Poker, the Discovery Channel, the Emmys, Home Shopping Network (HSN), World Wrestling Entertainment (WWE), Major League Baseball (MLB), Fox, XBOX 360, Netflix and many more have all developed stunning applications by using Silverlight.
To view a silverlight application on your pc, you need to have silverlight plugins installed on your pc. If a client attempts to run a silverlight application on a pc where silverlight plugins are not installed, the client will be given the option to download and install the silverlight plug-in. Silverlight plug-in can be thought of as a scaled-down version of the full .NET Framework The Silverlight plug-in does not contain all the classes and functionalities contained in the full .NET Framework but only those classes and functionalities that are applicable to a Silverlight Web client. Furthermore, the classes and functionalities included in the Silverlight plug-in are streamlined and optimized for use on the Web client machine.
The design paradiagram used to design silverlight is the same as that of ASP .NET. Each page of a Silverlight application includes an associated code behind file that includes the code that handles events fired by the page just as in the case of ASP .NET. Silverlight is similar to WPF in that it uses Extensible Application Markup Language (XAML) to construct the user interface (presentation layer). Silverlight applications are composed of text-based files that include XAML and code. Silverlight applications can be created using any text editor, however more advanced tools and development environments, such as Visual Studio or Expression Suite, simplify the task significantly.

Creating a Silverlight Animation

2008-07-30T09:27:00.000-07:00

As we all know, animation in silverlight is one of the most interesting topics in silverlight. Here I will demonstrate how we can achievea simple animation in Silverlight.

To use this tutorial, make sure that you have the Expression Blend software installed on your computer. The Expression Blend is not a free software. So if you really need animations in your website, which is the beauty of silverlight, just get the Expression Blend software on your pc.

Creating animations in Silverlight can be a simple process, depending on the animation in mind. The tool that is used for creating animation in silverlight is Expression Blend 2. Let's create a simple spinning circle animation (similar to the one displayed in Windows Vista when waiting on a lengthy process to complete) and display it in a Silverlight application. We will start by creating a new Silverlight application in Visual Studio 2008. Once it has been created, open the solution for the application just created inside the Expression Blend. We can easily open a Visual Studio 2008 solution in Expression Blend by right-clicking the .xaml file in the Visual Studio 2008 Solution Explorer and selecting the option to open it in the Expression Blend. When we open a new solution in the Expression Blend, we will be provided with a blank slate to work with.
To create the spinning animation as described above, drag an ellipse from the toolbar onto the XAML design area. Select the ellipse and then use the Properties Window to configure the ellipse similar to the one shown in the figure below-

In the Objects and Timeline pane, select the Open, Create, or Manage Storyboards button. Now click the add (+) button to create a new timeline. We will be presented with the Create Storyboard dialog as shown in the following figure below-

Assign a name to the new timeline and click OK. Next, select a point on this timeline and modify the ellipse in some manner. Lets say we grab the corner anchor of the ellipse using the mouse and spin the ellipse around several times. Now we can test the animation by clicking the Play button on the timeline pane.
If we want the animation to continue in a loop forever,then we will select the timeline and in the Properties sheet, set the RepeatBehavior to "Forever". Now we will save the page and go back to Visual Studio 2008.
Now, if we run the Silverlight application in Visual Studio as it exists right out of Expression Blend, the animation may appear but won't play. In order to get the animation to play, we must call the Begin method of the StoryBoard and in order to be able to call the Begin method of the StoryBoard, the StoryBoard must have a name assigned to it. Once the StoryBoard is assigned a name, we can call the Begin method from the Silverlight code behind file as shown in the code snippet below-

public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
Spin.Begin();
}

The resulting animation is shown in the figure below-

I hope you are enjoying this tutorial session, just keep in touch with this site as there is a lot more coming for you in future.

Creating a Silverlight Application

2008-07-29T08:46:00.000-07:00

Now we have a basic understanding of some of the aspects of a Silverlight application, so we will get started by building the fantasy picks page by using Silverlight.

The Silverlight Project
The first step to do when creating a Silverlight application by using Visual Studio is to create a new project. We will choose C# as the programming language for the project. Lets name the application that we are about to create as MyFantacyPicks. The New Project dialog box is shown in the figure below-

As soon as the project is created, we will be provided with some files that we can see in the solution explorer. The names of these files and a brief description about them is shown below-

TestPage.html - This is a basic HTML page to start with. In this example, we won't be modifying this page at all.
TestPage.html.js - This is code behind file for the test HTML and it is, obviously, written in JavaScript as its extension .js signifies. In this example, we won't be modifying this file either.
Silverlight.js - This is a standard Silverlight framework file which is written in JavaScript. We won't be modifying this file ever.
Page.xaml - This is a basic XAML file to starting with. This is where we will be working for the maximum in this example.
Page.xaml.cs - This is the code behind file for the XAML document and is written in C#. We'll add a couple of lines of code to this file.

Our Goal
Our goal is to create a fantasy picks page as shown in the figure below-

The Silverlight XAML

First of all, open the TestPage.html page and assign it a new title say "My Fantasy Picks". You can also rename the TestPage.html and TestPage.html.js files if you like. Then, we need to set the background of the page. We must always remember that Silverlight XAML uses a

After this is completed, we will walk through the process of adding controls to our page. To gain a better understanding of XAML, we will add controls to our page declaratively by using XAML in Visual Studio 2008.
Keep in mind that we are now working on the client-side code in our code behind file. Since the code behind file is written in a server-side language, it's easy to forget that the code contained therein will execute on the client side. As such, if a Silverlight application has to display data from a server-side data source, it must connect to that data source over the Web. The easiest method to retrieve data over the Web is to utilize a Web service. The topic, Silverlight Using Web service will be discussed later. For now, to keep things simple, we will display a literal string value on the button click. The resulting silverlight application is shown below-

The XAML that is used to create the Silverlight form in the figure above is shown in the code below-

The click event handler that handles the button click is shown in the code below-
using System;
using System.Linq;
using System.Xml;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Net;
using System.Text;
using System.Windows.Browser;
using System.Windows.Browser.Net;
namespace MyFantasyPicks
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
}
protected void GetPicks(object sender, EventArgs e)
{
tbPicks.Text = "My fantasy picks for week 1 are blah, blah, blah...";
}
}
}

Silverlight Languages

2008-07-28T07:30:00.000-07:00

Silverlight plugin offers a CLR execution environment and a .NET Framework base class library (BCL) that is hosted in the user's browser and is used to execute code. Silverlight is a progression of the ASP.NET AJAX. ASP.NET AJAX extends the capabilities of JavaScript by providing a JavaScript library so that JavaScript is much more object oriented and provides more functionality. The Silverlight execution engine also further extends JavaScript and the browser-hosted execution environment.

<strong>Dynamic Language Runtime (DLR)</strong>
As said earlier, there are currently two versions of Silverlight, version 1.0 and version 2.0. In version 1.0, the only language that is available is the JavaScript. Version 2.0 extends the execution environment and provides more advanced programming languages to program Silverlight applications. Furthermore, version 2.0 not only opens up the Silverlight CLR for use by more than one language but also allows the languages to seamlessly intercommunicate through the use of a Dynamic Language Runtime (DLR).
A dynamic programming language is the one in which the language and the language runtime, are designed to dynamically extend application capabilities at runtime. For instance, a language might be able to load, compile, and assimilate a code that is read at runtime but did not exists at compile time. The Silverlight DLR enables the Silverlight to take advantage of the dynamic language functionality.

<strong>DLR Console</strong>
As a method of testing the DLR and prototyping Silverlight code and applications, Microsoft developed the DLR Console. Microsoft deployed the DLR Console to Microsoft CodePlex and made it freely available for developers to extend and experiment with. The DLR Console is available for download at http://silverlight.net/community/gallerydetail.aspx?cat=2&sort=2. The DLR Console version that is available on CodePlex supports prototyping XAML by using JScript and Python.

<strong>JavaScript</strong>
As mentioned earlier, in Silverlight 1.0, JavaScript was the only language that could be utilized. Creating Silverlight applications by using JavaScript is very easy but it is not directly available as an option in Visual Studio. Rather, a very tiny amount of hand coding will be necessary, in the simplest form, less than 10 lines of markup. In the simplest form, start with an HTML page and insert antag, it can be inside of a <div>tag as shown in the markup listing below. JavaScript supports most of the features that are available for a dynamic language, by design.

<html>
<head>
<title>Simple Silverlight Using JavaScript</title>
</head>
<body>
<div id="SilverlightHost">
</div></div><object id="sl" type="application/ag-plugin" height="400" width="800"><param name="source" value="Page.xaml">

</object>

Notice that the <param> tag in the HTML identifies the Page.xaml file to be loaded. The XAML file is also extremely simple in this example as shown below.

<canvas width="640" height="480" name="MyCanvas" xmlns="http://schemas.microsoft.com/client/2007" x="http://schemas.microsoft.com/winfx/2006/xaml" background="White">

<script type="text/javascript" src="TestPage.html.js">
<script type="text/javascript">
function onLoad (sender, args, root)
{
var MyText = root.findName("MyText");
MyText.FontSize = 50;
}
</script>
<style type="text/css">
.silverlightStyleClass { width: 640px; height: 480px; }
</style>

<div class="silverlightStyleClass " id="SilverlightControlHost">
<script type="text/javascript">
CreateSilverlight();
</script>
</div>

When coding Silverlight by using JavaScript, we will insert the JavaScript directly in the HTML page. The first thing we need to do is to add an id to the XAML.
Once the TextBlock has been assigned a name, it can be accessed as well as manipulated by using JavaScript. Next,what we need is to interact with the XAML through some type of event. The most commonly used event, just as with ASP.NET (the Load event), is the onLoad event in case of Javascript. The JavaScript is shown below-
function CreateSilverlight()
{
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
enableHtmlAccess: "true"
},
events: {onLoad:onLoad}
});
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControlHost');
if (silverlightControl)
silverlightControl.focus();
}
}
Finally, we need to create the onLoad handler in our HTML page. A JavaScript event handler for Silverlight will receive 3 parameters. The first parameter is a reference to the sending container object, or the element, the second includes some optional arguments that have not been passed in this example, and the third is a reference to the root element of the XAML document. We can use the root argument by finding it with the findName method(which is used to locate any element with a name attribute assigned to it in the XAML file).

<strong>C#</strong>
In Silverlight version 2.0, the only difference between coding a Silverlight application by using JavaScript and that by using a .NET programming language such as C# is that the XAML file identifies a code behind file through the x:Class attribute as shown below.

<canvas class="SL_Example_CS.Page;assembly=" width="640" height="480" name="parentCanvas" xmlns="http://schemas.microsoft.com/client/2007" x="http://schemas.microsoft.com/winfx/2006/xaml" loaded="Page_Loaded" background="White">
<textblock text="This is a my text" fontfamily="Segoe UI" fontsize="12" name="MyText">
</canvas>

Furthermore, the event handlers will now be wired into the Silverlight picture through the XAML file as shown above. As shown in the example above, the Loaded event is wired up to the Page_Loaded handler in the code behind file. The associated code behind file is shown below-

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SL_Example_CS
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
myText.FontSize = 50;
}
}
}
To illustrate the difference between the language syntax, the same example is written below using VB language-
Partial Public Class Page
Inherits Canvas
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
InitializeComponent()
myText.FontSize = 50
End Sub
End Class </div>

Silverlight Tools

2008-07-27T00:49:00.000-07:00

Because of silverlight's popularity, there are already many editors and design tools being planned by vendors. The two most common tools for Silverlight design and development are:

1. Visual Studio 2008
2. Expression Blend 2

1. Visual Studio 2008

Visual Studio is Microsoft's premiere integrated software development environment. Visual Studio now contains management utilities as well as development tools. The figure below shows Microsoft Visual Studio 2008.

2. Expression Blend 2

Microsoft has introduced a whole new bunch of cutting edge tools for use by designers, called Microsoft Expression Suite. Microsoft Expression Suite includes a tool called Microsoft Expression Blend, that is a Silverlight development tool targeting the designers.Microsoft designed the Expression suite of tools to integrate nicely with the Visual Studio similar to ASP.NET, which was redesigned with code behind files containing compilable code so that developers could work on programming language code and components while designers could work on the markup and user interface, thus separating the programming logic from the designing logic.
Microsoft's visual Silverlight design tool - Microsoft Expression Blend 2

Silverlight Vs WPF and Silverlight Tools

2008-07-27T00:46:00.000-07:00

Silverlight vs. WPF

Silverlight is a subset of Windows Presentation Foundation(WPF) that also extends and utilizes many of the features and aspects of ASP.NET AJAX. With the bulk of software development today targeting the Web, many developers question as to why they need to create WPF applications at all now that Silverlight has arrived. The answer is that both these technologies have their own strengths and weaknesses. The strength of silverlight lies in its portability over the web. However Silverlight is cross platform and cross browser compliant. As such, it cannot take advantage of or be reliant upon any particular environment or platform. For more advanced graphic features, hardware support is required and it must also take advantage of the platform features. WPF provides advanced 3D graphic features that perform very well where as Silverlight is not able to provide these features at this time.The powers and limitations of Silverlight and WPF are basically a result of the environment that each is designed to perform in.
Silverlight is a subset of WPF only because the all the functionalities provided by WPF cannot be utilized in the Silverlight's world.

Silverlight Framework

2008-07-26T05:31:00.000-07:00

SILVERLIGHT FRAMEWORK Microsoft Silverlight is the latest technology offered by Microsoft. Microsoft technologies progressed from separate and isolated development technologies to Active Server Pages (ASP), which was their first dynamic Web development technology. In order to stay competitive, Microsoft decided to redesign and consolidate all of their development technologies into a single platform, which was named as the .NET Framework. So far the dotnet framework has been widely successful and thus popular.One most popular technology in dotnet is the Asp.Net. Asp.Net is an extremely powerful web development technology. But by default, in asp.net the bulk of the processing occurs on the server side. Web applcations will perform better if more of the processing occurs on the client side. The more the processing occurs on the client side and thus the lesser the processing occurs on the server side, the better will be the performance. So Microsoft introduced Ajax.Net, to extend the client scripting capabilities and improve performance. However the main drawback of ajax is that the javascript is executed by the user's browser and the user has the full authority to enable-disable javascript on the browser. Clearly, for websites that were implemented using ajax technologies, it was required that the client side javascript is enabled.

In order to solve this problem, Microsoft began its investigations on how it can gain control of the Asp.Net client side environment and at the same time improve the performance and user experience for the websites further. Microsoft also wanted to find a way so as to offer the same ability to create incredible user interfaces on the client-side that Windows Presentation Foundation (WPF) offered on the server. As a result, Microsoft created a new downloadable plugin technology that extends the ASP.NET AJAX environment significantly and, at the same time, incorporates much of the functionalities and rendering capabilities of WPF. The resulting technology was originally named "WPF/E" (Windows Presentation Foundation / Everywhere) and was later renamed to Silverlight. Currently Silverlight is known by both these names.
There are currently two versions available for silverlight: version 1.0 and version 2.0. Version 1.0 of silverlight was fairly limited in functionality and JavaScript was the only language supported. But Version 2.0 includes a gamut of new features and many .NET-compliant programming languages are now supported. The figure illustrates the main differences between version 1.0 and version 2.0 (shown as version 1.1 in this diagram due to the original naming). I am updating this site regularly. For more information, keep visiting this site.