Creating a Silverlight 3 Out Of Browser Application

Posted Monday, April 27, 2009 1:09 PM by Nathan Zaugg

Silverlight Logo Small

Silverlight 2 is great! Silverlight 3 is AWESOME! My first experiences with the beta framework and tools have been overwhelmingly positive.  In this post I’ll go over my experience creating an application using some of the new features and I’ll show how easy it is to make your Silverlight application available offline.  To get started you’ll need the tools. Download the Silverlight Tools for Visual Studio 2008 SP1 from the official Silverlight website.  It is also recommended that you download and install the Silverlight Toolkit from the same site.

Getting Started

After installing the Silverlight tools open Visual Studio and click File –> New –> Project. Click Silverlight in the project types section and select Silverlight Application from the Templates group.

New Silverlight 3 Project

When prompted make sure you check the Host the Silverlight application in a new Web site checkbox and press the OK button.

New Silverlight Application Settings

Once your project comes up we can get started in code.  Open the MainPage.xaml file, open the toolbox and double click TwilightBlueTheme.  This will add some references to our project and update the background of our window.  That is how you use a built-in theme.  Any tool box item that ends with Theme will change the look of your application.

Another great feature of the Silverlight 3 runtime is that we finally have full binding support!  The most useful binding feature is binding the value of one control to another. 

<Grid x:Name="LayoutRoot" Background="White">
    <twilightBlue:TwilightBlueTheme />
    <Button Height="30" Width="150" Content="This is my button Fool" 
            HorizontalAlignment="Left" VerticalAlignment="Top" 
            Margin="5" Click="Button_Click"  />
    <TextBlock Name="tbValue" Margin="50" 
               Text="{Binding ElementName=slider1, Path=Value}" />
    <Slider Name="slider1" Height="80" Width="300" 
            Margin="0 0 0 0" Value="3" />

Now, lets run it.

First Run

You can see that when you move the slider we can see it’s slider position value in the TextBlock we have on our form.  Now that we have our ultra-simple app we want to make it available offline.  We do that by opening the Properties\AppManifest.xml file and add the following:

          ShortName="Nate Test Application" 
          Title="Nate Test App">
          <ApplicationIdentity.Blurb>This is a test silverlight 
                        3 application out of the browser.</ApplicationIdentity.Blurb>

Now run the application again.  This time right click the Silverlight app and there is a new option to install the application.

Install Silverlight 3 App

You will then get a very simple “install” dialog.  The install process is extremely fast!

Silverlight 3 Application Install 

And now we can launch our application from the start menu.  Here is what it looks like when it is run outside of the browser.

Silverlight 3 Application Running Outside of the browser

To remove the application from your system, just right click to uninstall.

Silverlight 3 Application Uninstall

And that is it!  Silverlight 3 works very well outside of the browser!