March 2008 - Important Note
This tutorial is no longer valid. It was written for Microsoft Silverlight 1.1 Alpha Refresh, which no longer exists - it has been replaced by Silverlight 2. We have left the page up for historical purposes (and because there are incoming links). Once again, the information below is invalid and in some cases misleading for Silverlight 2.
Since the release of Silverlight 1.1 alpha refresh and Visual Studio 2008 beta 2, I decided to start a series of tutorials for Microsoft's Silverlight. If you haven't heard of Silverlight, I strongly suggest checking it out. It's a new web technology developed by Microsoft meant to compete with Flash and Flex.
What makes Silverlight attactive (to me at least), is that applications are developed on top of a subset of the .NET framework. Silverlight's UI elements are created with XAML and the code behind can be written in C#. As a C# developer, this caught my interest immediately. This tutorial is going to demonstrate how to create a pretty simple 'Hello World' style application using Silverlight and Visual Studio 2008 beta 2.
Step 1: Download and Install Everything
In order to easily and quickly develop Silverlight applications, I strongly suggest getting Visual Studio 2008 beta 2 and the Silverlight plugins.
Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2
You'll also need the Microsoft Silverlight 1.1 Alpha Refresh Runtime in order to view your Silverlight applications in your browsers.
Step 2: Create the Silverlight Project
After you have Visual Studio 2008 beta 2 installed, we can create our Silverlight project and begin developing code.
Depending on how you set up your Visual Studio install, you should see something similar to the image above. The Silverlight Tools for Visual Studio will automatically add the Silverlight projects to the 'New Projects' dialog. After choosing your project name and clicking 'OK', Visual Studio will automatically generate some XAML code for you.
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class= "HelloWorld.Page;assembly=ClientBin/HelloWorld.dll"
Width="640"
Height="480"
Background="White">
</Canvas>
Step 3: Write Some Code
Basically, Visual Studio has created a blank, 640x480 canvas with a white background. Let's add some text to make things more interesting.
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="HelloWorld.Page;assembly=ClientBin/HelloWorld.dll"
Width="640"
Height="480"
Background="White">
<TextBlock x:Name="myTextBlock" Text="Hello World"
FontSize="40" FontFamily="Arial"/>
</Canvas>
Now the text "Hello World" in size 40 font will be displayed in the top left corner. Let's hook up some events to the TextBlock to make it even more interesting. We are going to make the text turn italic and blue when the user mouses over it and turn red when the user clicks it. Since we assigned the attribute x:name the value "myTextBlock" we can refer to the TextBlock by this name in the C# code-behind.
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 HelloWorld
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
this.myTextBlock.MouseEnter +=
new MouseEventHandler(myTextBlock_MouseEnter);
this.myTextBlock.MouseLeave +=
new EventHandler(myTextBlock_MouseLeave);
this.myTextBlock.MouseLeftButtonDown +=
new MouseEventHandler(myTextBlock_MouseLeftButtonDown);
this.myTextBlock.MouseLeftButtonUp +=
new MouseEventHandler(myTextBlock_MouseLeftButtonUp);
}
void myTextBlock_MouseEnter(object sender, MouseEventArgs e)
{
this.myTextBlock.FontStyle = FontStyles.Italic;
this.myTextBlock.Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255));
}
void myTextBlock_MouseLeave(object sender, EventArgs e)
{
this.myTextBlock.FontStyle = FontStyles.Normal;
this.myTextBlock.Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 0));
}
void myTextBlock_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
this.myTextBlock.Foreground = new SolidColorBrush(Color.FromRgb(255, 0, 0));
}
void myTextBlock_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
this.myTextBlock.Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255));
}
}
}
If you're familiar with C#, the above code should look pretty straight forward. In the Page_Loaded function, I assign event handlers for the TextBlock's MouseEnter, MouseLeave, MouseLeftButtonDown, and MouseLeftButtonUp events.
Step 4: Preview the Ouput
You can preview your results any time during development by hitting F5. Visual Studio will launch TestPage.html in your default browser. Click here (Edit: example obsoleted and removed) to view the output from the above code. What's nice about the Visual Studio plugin, is that it creates all the required code to embed the Silverlight application into an HTML page (located in TestPage.html). If the user doesn't have the Silverlight Runtime installed, they will be presented with a graphic and link to download the required files.
That's all that is required to make a basic "Hello World" application in Silverlight. As we familiarize ourselves more with the features of abilities of Silverlight, we'll continue to post new tutorials. If you have questions, please post them in the comments and we'll do our best to answer them.
07/31/2007 - 06:22
Interesting, but I keep on getting the "Install Firelight Beta" logo and even after it's installed, I still get that logo...
07/31/2007 - 07:56
Did you make sure you're using the same version of the Runtime and the SDK? If you're using Visual Studio beta 2 and the Alpha Tools, you also need the Alpha Refresh of the runtime. If you installed RC1 of the runtime you'll get the logo.
03/04/2008 - 01:33
In my application, I have got a situation where i have to resuse a Silverlight Control(say an Ellipse or a Rectangle) dynamically at runtime, once if it defined it an .xaml file.
It is something like define it once and use it many times.
Iam trying to replace the SVG code with Silverlight.
We use the for reusing the SVG components, do we have any similar functionality available with Silverlight???
Iam using JavaScript as the scripting language.
Thank You in advance.
03/12/2008 - 10:04
Hello there, I have run through the tutorial you have posted above! When I click “New Project” I get the box you have shown in this tutorial, I name the project “HelloWorld” then I click ok and I get another box pop up asking if I need to create a webserver or just a test.html file… I have tried both ways and I don’t see the Testpage.html on the list of all the files its loads up!! Is there somethink im doing wrong cos I cant work it out!!
Thanks for your time, Simon
03/15/2008 - 19:48
As noted at the top, this tutorial is no longer valid and only listed here for historical purposes. Because of this, comments are now closed for this post.