Silverlight Introduction

What is Silverlight?

What Silverlight is has been explained in an earlier article, but a lot has changed since the first release of Silverlight. Microsoft developed Silverlight to help evolve the Internet in the form of content and media rich applications.

Microsoft is trying to take on Adobe’s Flash, which is dominating the market right now. Microsoft has been pushing out many updates since the first release. Now that the fourth version is being finalized, we are seeing many new features, such as the use of video cameras, being incorporated.

Many people are starting to make the switch from Flash to Silverlight. One of the biggest implementations was broadcasting all the NCAA tournaments online by CBS. Silverlight offered impressive quality with the amount of streams going on and no glitches.

It showed Silverlight is ready to hang with the big dogs like Flash. Are you interested in jumping in and developing with Silverlight? Read on!

What you need

To get programming, you may need to download some new software. If you have developed websites and applications with ASP.Net, you probably have almost everything you need already. If you haven’t, it’s best to go to Silverlight.net to grab what you need.

First, you need a program with which to develop. The most common program is Visual Studio. It’s the professional tool used by most developers and offers a vast array of features. The downfall for Visual Studio is the price; it starts at over $200 for the cheapest version.

I recommend that you get Microsoft’s Visual Web Developer. It’s a free program from Microsoft; while it doesn’t offer as many features as the full-fledged version, it is completely free and a great start for beginners to programming.

Next you need to download the Silverlight SDK. This provides the Web Developer application with the needed controls and files to develop for Silverlight. The most current version is Silverlight 3, though there is a beta version of Silverlight 4 out now for downloading. I always prefer to use the latest and greatest, as it usually offers more features.

That is all you really need, but there are some other recommended applications that will help you program. Deep Zoom composer allows you to create some cool collages and a new ability to share pictures. Microsoft’s Expressions suite is trying to take on Adobe’s suite; while it works well with Silverlight, I struggle with it after learning Photoshop.

The Silverlight Toolkit provides some special controls and sample code to help you get going. I highly recommend getting it. The last recommended download is .NET RIA Services. This helps integrate ASP.Net and Silverlight.

Now that you have the tools to develop Silverlight applications, it's time to start developing.

Programming

I will be using Visual Web Developer 2010 instead of Visual Studio, as many new beginners won’t want to plop down the money when the free version will do everything that you need it to at the start. 

First, you need to choose to create a new project.

Next will pop up a window that will set you up with the type of project you want to create. We first get to choose which language to program in, either Visual Basic or Visual C #. I chose Visual Basic, since I understand it. From there we want to select Silverlight. You can create many different types of programs, and maybe we can cover some of the other ones another time, but we want to select Silverlight for this demo. So select Silverlight Application, give it a name, and hit Ok.

Finally, you are asked if you want to create an ASP.Net application or an ASP.Net Website. You can also select for which version of Silverlight you wish to create. Only the ones you have installed will be shown. You need to download the SDK for any versions you want to use.

Next, your project will begin to initialize. It doesn’t give you a note pad and tell you to go at it. It sets you up to begin doing what you want to. It creates the files needed to build a Silverlight web page and some basic code to create the Silverlight.

So what are all these files it created?

• App.xaml and App.xaml.vb – These files allow you to create and change resources available to the Silverlight application. These are universal to the application, so they can be used in different pages.

• MainPage.xaml and MainPage.xaml.vb – This is the user interface for the Silverlight application. Here you can add text boxes, pictures, and more. You can create more of these to have different pages for the Silverlight application. These will all have access to the App.xaml resources.

First we will open up MainPage.xaml. For our first program we will keep it very simple and easy to understand. I used the toolbox and first created a button. This is an object that triggers an event when you click it. In more complex applications, you may have dozens of buttons, so for best practices and ease of understanding what button triggers what event, we will call it btnClick. It’s not too descriptive, but with only one button it will be work.

Next I created a textbox called txtSaying. This is a blank box in which we can put text to tie into events. We will set it up to put in text when we click the button.

Silverlight UI

The more advanced users and those who have learned more than what is taught here can use coding to create the Silverlight UI. It’s nowhere near as easy as dragging and dropping objects on the screen, but it offers a lot more control over the UI and can be better managed. Now that we have the User Interface done, we have to move to the event coding aspect.

If we simply double click the button we created earlier, up will pop MainPage.xaml.vb. While you can click on this folder in the solution explorer, clicking the button will also create the event that the button triggers. This saves time and the chance of errors. The code generated should be as follows:

Private Sub btnClick_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnClick.Click

End Sub

We will be putting the changes the event will make between the end of the Private Sub and the End Sub. This program will add a message in the textbox, and change the font size. I added the following text in the event.

txtSay.Text = "Hello Silverlight!!"

txtSay.FontSize = 11

First we put in the object with which we want to work, in this case “txtSay.” After we hit the “.” we get a bunch of attributes. The first one we will select is the text in the textbox. We select that attribute, and then set it equal to what we want it to display. Second, we will set the font size. While there is a default font size, we will set it to 11. Notice that the text required parentheses and numbers do not.

Now we are ready to run the Silverlight application. If you select the green “play” button, it will start up. This is the debug mode, so if something makes an error while it's running, we can see where it went bad. It may take a little time to load up, but when it’s done, it should launch your Internet browser with the same UI you developed. Click the button that says “Click Me!!” and the textbox you made should say “Hello Silverlight!!”. If everything ran correctly, then you are finished developing your first Silverlight application. 

Additional Resources

If you are interested in learning more about Silverlight, there are a lot of resources available. There are more tutorials available at ASPFree.com; you can also check our forum for helpful members to answer any questions you have. Microsoft’s official site, Silverlight.net, has a huge amount of resources available.

Another great resource is books. There are many books on the market available about Silverlight. They can cover a vast amount of information in a single book. You can even learn Silverlight while in the bathroom!

There are a couple of downfalls to books, however. First, there are a ton out there, and they cover a vast array of topics; it can be tricky to find the right book for your skill level and what you want to learn. Microsoft is on their fourth version of Silverlight already, so the shelf life of the latest and greatest books is very short by the time they hit the stores.

Conclusion

Congratulations, you have successfully completed your first Silverlight how-to. Silverlight was developed to enrich the Internet by providing powerful tools for anyone from beginner to expert. While this demo wasn’t great and powerful, or something you’d instantly add to your website, it hopefully got you started in the right direction and interested to see what Silverlight is capable of when implemented to its fullest.