Portal of Knowledge The blog of Sam Leach. Years late.

Silverlight 3 Introduction

Let’s get Silverlight 3.0 installed and setup. Download the Silverlight 3 Toolkit. If you are using Visual Studio 2008 you will have to update to the latest version for Silverlight toolkit to install. This is done through windows update.

In Visual Studio Start a new project and select ”Silverlight” which will be under “Other Languages”. You will be presented with a dialog asking you to “Host the Silverlight application in a new Web site”.

Checking this will create an ASP.NET Web project to hold our new Silverlight project. I’ve had problems with applications not loading so I usualy keep this unchecked. If you don’t encounter any problems leave it checked as you will then have a web server for your Silverlight application.

In Visual Studio you will be presented with 4 files. App.xaml, App.xaml.cs and MainPage.xaml, MainPage.xaml.cs

Xaml, as you may have guest stands for Extensible Application Markup Language. It looks like xml so for now that’s all I care about. It works using tags just like any markup language. It is how we are going to create our Silverlight UI. Any functionality is written in C#. We are only going to look at MainPage.xaml for the time being.

Let’s create a Hello World button!

First thing we may want to do is change the name of the default Grid which was automatically created for us by Visual Studio. “x:Name” gives a name to our grid so we can use it or reference it from our C# code. Pretty self explanitory. Call it MyGrid, or MyFirstGrid or leave it as LayoutRoot!. Now let us change the background colour from white to comething else. After you named your grid and still inside the Grid tags type “Background” and Visual Studio should auto complete and display a drop down with many colours. So you should have something like:

<Grid x:Name="MyGrid" Background="Tan">

</Grid>


Press F5 to start debugging, Visual Studio will launch your default web browser and you will be presented with a blank page with the background you chose. It’s a start but still not very exiting, let us add some text and a button.
Inside our grid open a Button tag like so and give it a name just like we did for the Grid.

<Button x:Name="EvilButton"

Followed by what we want the button to say

Content="I am a nice Button, Press Me!"

Next we set the size of the button in the form of Width and Height

Width="200" Height="50"

And for now we’re done so we close the button tag with a

>

Visual Studio will automatically create the ending tag

You will end up with a button in the center of your browser.

<Button x:Name="EvilButton" Content="I am a nice Button, Press Me!" Width="200" Height="50">
</Button>

Next let’s add some text to the left of this new button. We have limited layout formating options at this point. Canvases, StackPanels and more on Grids will be explained in the next tutorial.
A TextBlock tag is used to display text in Silverlight. I won’t walk you through it this time. Here is the code.


<TextBlock x:Name="WarningMsg" Foreground="Coral" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center">
What evar u do, do NOT press dat button ------->
</TextBlock>

Now finally let’s make our button do something or add behavior. This is acomplished by adding an event handler. We want something to happen when the button is clicked so let’s add a “Click” event handler.

After setting the button’s Height, type Click = “”. Click from the drop down. Visual Studio will create an event handler name for you. In my case EvilButton_Click. Also in our C# or VB source file VS implemented the event handler. Now we want to go and find that stub and add our behaviour. Add

EvilButton.Content = "Pushed, releasing evil..."

To end up with (VB)

Private Sub EvilButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
EvilButton.Content = "Pushed, releasing evil..."
End Sub


or (C#)

Void EvilButton_Click(object sender, RoutedEventArgs e){
EvilButton.Content = "Pushed, releasing evil...";
}

Now run and push the button...or don’t.