SilverLight - Making Hello World Program

Dear All,

Following Topic is about how to make Hello World Program with SilverLight, i have taken reference from Tim Heuer blog

Before you start make sure you have installed Visual Studio SP1, Silverlight Runtime, SilverLight SDK and SilverLight Tools, if not get it downloaded from microsoft.com

Understanding the development environment

Once you install Visual Studio and the Silverlight Tools you will notice a new grouping in the VS New Project dialog box:

You will see some new templates under the category Silverlight which include at least Silverlight Application, Silverlight Class Library and Silverlight Navigation Application.  Some others you may see depending on additional tools you may have installed.
For this step, choose the Silverlight Navigation Application template and give it a name for the application (I’m calling mine TwitterSearchMonitor).
The next window you will see will ask you if you would like to create a web project:

If this is a new project, I highly recommend choosing to create a web project for you.  By doing this you will have a web context to run the application for you.  This is helpful in avoiding issues around accessing web services from the local file system.  Running your application under HTTP from the start will help you avoid some of the most common mistakes in debugging web service access.  You can choose the ASP.NET Web Application Project, ASP.NET Web Site or ASP.NET MVC Project if you have that installed.  If you aren’t sure, just use the defaults.

The Project Structure

Once your app is created you will see something similar like this:

This shows your web application (which will host the Silverlight application) with pre-created test pages for the Silverlight application and the Silverlight application itself.  Let’s focus first on the Silverlight application project.
There are some key files you should be aware of here that we’ll explore in this series:

• App.xaml – this is an application-wide resource file.  If you put resources in here (we’ll explore in styling) or global events upon startup, they will happen here.  This file is also the entry point to your application and tells the Silverlight plugin what to do next.
• MainPage.xaml – this is a page that is a part of the template you chose.  It doesn’t have to be called MainPage, but that is what the project template uses by default.  This represents the starting user interface for your application.  Don’t be confused by details just yet.
• Assets/Views folders – these contain assets (files, images, styles, etc.) and other UI views for your application.

The XAML files are the files that make up the UI of your application.  They are just XML files with the XAML markup language.  We will be altering these in later steps.
When you build the solution (go ahead and do that) you’ll notice in the web application’s ClientBin folder a new file with a XAP extension will show up.  This is your compiled Silverlight application.  It’s actually an archive (aka ZIP) file with a different extension file name.  If you rename it to .ZIP and open it using an archive tool you can see the contents.
The XAP file is what is served to your browser.  This is the file that is hosted on the web server and gets delivered to the end user.  The XAP is hosted within a standard HTML page that hosts the Silverlight application using the

NOTE: Silverlight is a client technology and can be hosted on any web server.  It can be any type of web server that is capable of delivering the XAP file along with the correct content MIME type from the server (application/x-silverlight-app).  As long as it does that, we don’t care what type of web server it is delivering the XAP file.

Test pages for ASP.NET and HTML are created for you with the standard template.  Since both of them are the same essentially, I usually delete one of them for simplicity.

Adding UI to the XAML pages

The template we chose is a navigation application template, meaning it has some navigation features built into it.  This is a fairly new feature to Silverlight and enables you to have a “master page” kind of view in your application.  If you look in the Views folder you will see About.xaml, ErrorWindow.xaml and Home.xaml.  For now let’s focus on Home.xaml since that is the first view that is loaded.  Open that file up by double-clicking it and you’ll see the XAML load in Visual Studio.
In this page you’ll see some XAML code that defines the view in a Grid that uses some other layout controls like a StackPanel and TextBlocks (we’ll go into StackPanel in the next step 2).  These are all part of the core control set that Silverlight provides.  A TextBlock enables you to present text to the user.  If you run the application now (hit F5 to run in debug mode – go ahead and choose to modify the web.config to enable debugging) you should see something like this:

Notice the text in the running application matches the text in the TextBlock of the XAML.  Also notice the link style buttons in the upper right.  These represent our navigation points which go to our separate views.  Let’s add some more XAML and see how to write code.
In the Home.xaml view, after the second TextBlock, add a Button using this XAML:

   1: <Button Content="Click me" x:Name="MyButton" FontSize="18" Width="150" Height="45" />

This will display a button on the view just underneath the “Home page content” text area.  Notice the x:Name attribute?  This is the unique identifier for this element and helps us reference it in code.  Think of this as the ID attribute of the control.  Now let’s make it do something when clicked.  There are two ways we can add events to the Button (or other elements) with simplicity.  In the XAML for Button itself we can add a Click attribute and you will see VS Intellisense automatically ask us if we want to generate a new event handler:

We can also wire up the event handler in code directly and keep it out of our XAML using this code in the Home.xaml.cs page:

   1: public Home()

   2: {

   3:     InitializeComponent();

   4:     MyButton.Click += new RoutedEventHandler(MyButton_Click);

   5: }

Either way will work.  For simplicity for now you can use whatever you like…I will use the XAML method for now.  Now in the function MyButton_Click we can write managed code in the function to manipulate our user interface or other functions.  Let’s finish our Hello World sample by changing the HeaderText TextBlock (HeaderText is the x:Name value so we can reference it easily in code) to “Hello World” output.  To do that we’ll write this function code:

   1: void MyButton_Click(object sender, RoutedEventArgs e)

   2: {

   3:     HeaderText.Text = "Hello World!";

   4: }

After making these changes and running the application again (F5) we will see our button and when clicked it will change the text like below:

Thanks & Regards

l¯¯l)¯¯)
l__l\__\aju
.      l¯¯l
(¯¯(/_ /etla