A First Look at Silverlight 3

Silverlight 3 is here and there are a lot of new goodies to check out. Let's take a first look :)

Installing Silverlight 3

Naturally, you will need to have Visual Studio 2008 SP1 installed. Uninstall Silverlight 2 if you already have it installed, and then install all the new Silverlight 3 tools, which you can download from Silverlight.net/GetStarted/

Make sure that you also install Expression Blend 3 with Sketchflow, as well as the Silverlight 3 browser plugin.

Hello Silverlight 3!

Open Visual Studio and navigate to File > New > Project and choose 'Silverlight Navigation Application'. I called my project 'Hello', and clicked 'Ok'. If you are working on my computer, Visual Studio will crash at this point (>.<) but the project is created. If this happens to you as well, just open Visual Studio again and attach the Web and Silverlight projects by navigating to File > Add > Existing Project.

Now we can build the project (by pressing F5) and see what it looks like in the browser. You can see placeholder text on the top left, 'Application Name' and on the top right you should see the navigation links to the 'home' and 'about' pages. In the browser's URL bar, you should see a URL ending with 'TestPage.html#/Home' or 'TestPage.html#/About' when you click on the 'about' link.

Adding Your Own Content

Open Mainpage.xaml and find the line below:

<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="Application Name"/>

Change the Text="Application Name" attribute to read Text="Hello Silverlight 3". When you hit F5, you will see the text in the top right corner has changed.

Now, let's add a new page by right-clicking on the 'Views' folder in the Silverlight project and choosing 'Add > New Item > Silverlight Page'. Call it 'Info.xaml' and add the following inside the default Grid:

<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
<StackPanel x:Name="ContentStackPanel">
    <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
    Text="Info"/>
    <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
    Text="This is the info page"/>
</StackPanel>
</ScrollViewer>

We need to add the info page to the navigation. In MainPage.xaml add the following lines after the 'about' hyperlink:

<Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" NavigateUri="/Info" TargetName="ContentFrame" Content="info"/>

Themes

Let's choose a theme for our Silverlight application. First, go to the Microsoft Expression themes gallery

You can download all the Silverlight 3 themes if you want to :)

Each theme should contain a .png that shows a preview of what the theme looks like and a Styles.xaml file. You can just drag and drop the Styles.xaml file to replace the Styles.xaml in your assets folder, to give your application a vastly different (and quite professional looking) look and feel.