Sample: Hello World

This topic will guide you how to creating a new Silverlight Application "Hello World" using ESL.

We'll start by create a new Silverlight Web Project, select New->Silverlight Web Project.

Named the project "HelloWorld".

Expand the project, it looks like below.

Right click the project, select Open With-> Open Expression Blend.

Click Yes to agree the Security Warning.

Now, the project opend by Expression Blend. Click the project tab in the upper right-hand corner of the screen to see the file listing.

Double click on the Button control.

The Button will appear in the page, click the Properties tab to switch the properties for the button, change the Name to btn, the Width(under Layout) to 100, Height(under Layout) to 50, and the Content(under the Common Properties) to Click here.

The button should be looks like the image below.

Double click on the TextBlock control to add it to the page.

Click on the Direct Selection tool and click on the TextBlock (which was just add to the page) to select it.

In it's Properties, enter HelloWorld for it's Name and also HelloWorld! for it's Text.

Drag the HelloWorld TextBlock so that it is outside and to the left of the main canvas..

From the menu bar select Window->Active Workspace->Animation Workspace.

In the Objects and Timeline menu, click "+" button to create a new storyboard.

Name the Storyboard Storyboard1 and click OK.

Click the Record Keyframe button.

A key frame will appear for the Helloworld control. Drag the yellow time line bar to 0:01.000 and move the HelloWorld box to the center of the main canvas. Click the Record Keyframe button.

In the Properties for the HelloWorld box, select Scale in the Transform section. Enter 4 for X and Y.

The HelloWorld Textblock will apear larger.

Drag the yellow time line bar to 0:02.000. Click the Record Keyframe button.

Drag the yellow time line bar to 0:00.000 and click to preview the animation.

Save and close the Expression Blend.

Now open the project with Visual Studio. Right click project, select Open With->Open Visual Studio.

In the XAML for Page.xaml, find x:Name="btn". Click immediately after it and press the space bar. An intelliSense menu will appear. Double-click on Click.

New Event Handler will appear, Press the Tab button.

The event name generate automatically, right click on it and select Navigate to Event Handler.

The screen will automatically switch to Page.xaml.cs page and create a btn_Click method. Enter "this.Storyboard1.Begin();" in the method.

Save and Close Visual Studio.

Come back to Eclipse, click Yes in File Changed dialog.

Run the application. Right click HelloWorldTestPage.html, select Run As->Silverlight Web Application.

Click the button.