Basic files and referenced libraries of Silverlight project. The XAML page can be opened directly in Expression Blend

Getting Started
Once all the required tools have been installed, we can start creating Silverlight application using VS 2008. Launch VS 2008 and create a new project. In the New Project window, under Project Type pane, select Silverlight and under Template pane, select Silverlight Project template, name the project as 'SilverLightDemo,' and click OK. The project gets created with all the necessary references and foundation files required for Silverlight project. Among the basic files in the project folder, Page.xaml contains the application's user interface and Page.xaml.vb manages source code for the application. TestPage.html contains Silverlight control and reference to Silverlight.js, which is a JavaScript file to ensure the client browser has necessary Silverlight runtime installed to run the application. In the absence of Silverlight runtime, the script asks the client browser to download the appropriate runtime. HTML pages, used to host Silverlight apps, can contain other HTML elements and tags to make up the web page.

In our demo application we will build a clock component on an HTML page to display time and date. To design the interface for the application, open the Page.xaml file with Expression Blend 2. From the VS 2008 interface you can directly initiate to open an XAML file in Blend, right-click on Page.xaml file, and select 'Open in Expression blend' option. In the Expression Blend environment first add the Canvas control that will act as container for all the added controls. On this canvas create a button using Rectangle control and change the RadiusX and RadiusY properties to render a rounded shape to the rectangle. Likewise add TextBlocks on the button that will be used to display time and date.

Now, to make this button display time, we need to update it every second. For doing this we add a Timeline control: click on the > arrow in the Objects and Timeline pane. On the following window, click on + button to add the new StoryBoard and in the next popup window select Timeline control and click OK. Save the Page.xaml file and revert to Visual Studio interface, where it will ask you to re-load the Page.xaml to keep the changes made by the source editor. Now to make the canvas object accessible to the application logic, add the x:Name attribute and set it to showTime in the Page.xaml file. The following code snippet shows that:

<Canvas x:Name="showTime" Width="280" Height="160" Canvas.Left="136" Canvas.Top="56">

<< PREVIOUS NEXT>>

• MS raids Lucknow partners for piracy

• Win 7: Taskbar and Thumbnail Enhancements

• Stop spam posts on your phpBB3 forum

• Gameloft says it, others reining in Android plans

• Tips and tricks for using Windows 7