Silverlight 3 Tutorial - Browser and Web Page Integration

	Silverlight 3 Tutorial - Browser and Web Page Integration

Krzysztof Mossakowski

Tutorials

Demonstrated issues:

Integration with a Web page
- Embedding Silverlight objects using HTML code
- Embedding Silverlight objects using JavaScript code
HTML Bridge
- Calling JavaScript code from Silverlight
- Calling Silverlight code from JavaScript
Custom splash screen
Full-screen
Out-of-browser
- Updating an application

Prerequisities:

Visual Studio 2008 SP1
Silverlight 3 Tools for Visual Studio 2008 SP1

Steps:

Integration with a Web page

Create a new Silverlight Application project. Do not allow Visual Studio to create the hosting Web application. Name the project 'WebPageIntegration'.

Add to the MainPage a TextBlock embedded in a Border and make the colours of the text and its background random:

Create a class with a property creating a SolidColorBrush with random colour:

public class BrushRandomizer

    private static readonly Random random = new Random();

    public Brush RandomSolidColorBrush

get

            Color c = new Color

                A = 255,

                R = (byte)random.Next(256),

                G = (byte)random.Next(256),

                B = (byte)random.Next(256)

};

            return new SolidColorBrush(c);

Add an instance of this class to resources of the MainPage:

<UserControl.Resources>

    <local:BrushRandomizer x:Name="BrushRandomizer"/>

</UserControl.Resources>

Remember to add a definition of the 'local' namespace:

<UserControl

    x:Class="WebPageIntegration.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   xmlns:local="clr-namespace:WebPageIntegration"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"

Add a Border with a TextBlock and use the BrushRandomizer for their colours:

<Border

    Background="{Binding RandomSolidColorBrush, Source={StaticResource BrushRandomizer}, Mode=OneWay}"

    BorderBrush="Black"

    BorderThickness="1"

    CornerRadius="5"

    <TextBlock

        x:Name="MainTextBlock"

        Foreground="{Binding RandomSolidColorBrush, Source={StaticResource BrushRandomizer}, Mode=OneWay}"

        Text="Something"

        VerticalAlignment="Center"

        HorizontalAlignment="Center"

/>

</Border>

Compile and test - refresh the page to check if colours are random:

Add to the project an HTML page:

Set properties of the new HTML page: 'Build Action' to 'None' and 'Copy to Output Directory' to 'Copy if newer':

Add a table to the HTML page with 4 cells. Embed an object with our Silverlight application in each cell:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

    <head>

        <title></title>

    </head>

    <body>

        <p>This is an HTML test page for the WebPageIntegration Silverlight application.</p>

        <table cellpadding="5" cellspacing="5" style="width:100%;">

            <tr>

                <td>

                    <object width="100%" height="50"

                            data="data:application/x-silverlight-2,"

                            type="application/x-silverlight-2">

                        <param name="source" value="WebPageIntegration.xap" />

                    </object>

                </td>

                <td>

                    <object width="100%" height="50"

                            data="data:application/x-silverlight-2,"

                            type="application/x-silverlight-2">

                        <param name="source" value="WebPageIntegration.xap" />

                    </object>

                </td>

            </tr>

            <tr>

                <td>

                    <object width="100%" height="50"

                            data="data:application/x-silverlight-2,"

                            type="application/x-silverlight-2">

                        <param name="source" value="WebPageIntegration.xap" />

                    </object>

                </td>

                <td>

                    <object width="100%" height="50"

                            data="data:application/x-silverlight-2,"

                            type="application/x-silverlight-2">

                        <param name="source" value="WebPageIntegration.xap" />

                    </object>

                </td>

            </tr>

        </table>

    </body>

</html>

The width and height attributes are required for cross-browser compatibility.
The type attribute is required.
The data attribute is recommended to avoid performance issues on some browsers.
The param element named source is required.

Check the result:

Silverlight objects can also be added to the Web page dynamically using JavaScript. To demonstrate this option, add a new HTML page to the project. Name it 'TestJSPage.html', set its properties: 'Build Action' to 'None' and 'Copy to Output Directory' to 'Copy if newer'.

There are a few ways to add a Silverlight object dynamically using JavaScript. In all cases the Silverlight.js file is required. This file contains JavaScript code which allow to interact dynamically with the Silverlight plugin.

The Silverlight.js file can be found in directory: %ProgramFiles%\Microsoft SDKs\Silverlight\v3.0\Tools
It is recommended to take the most current version of this file from: http://code.msdn.microsoft.com/silverlightjs

There are two functions in the Silverlight.js file which allow to create Silverlight objects: createObject and createObjectEx. Both these functions expect a lot of parameters. To make it easier to use, write another JavaScript function with lower number of parameters:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>TestJSPage.html</title>

   <script type="text/javascript" src="Silverlight.js"></script>

    <script type="text/javascript">

        function embedSilverlight(parentElement, pluginId, userContext) {

            var altHtml = pluginId == "sl1" ? null : "<!--not installed-->";

            return Silverlight.createObject("WebPageIntegration.xap",

                parentElement, pluginId,

                    width: "200", height: "50",

                    background: "white", alt: altHtml,

                    version: "3.0.40624", autoUpgrade: "true"

},

                { onError: onSLError, onLoad: onSLLoad },

                "myParam=myValue", userContext);

        function onSLLoad(plugIn, userContext, sender) {

            window.status += plugIn.id + " loaded into " + userContext + ". ";

        function onSLError(sender, args) {

            // Display error message.

    </script>

</head>

<body>

    <table>

    </table>

</body>

</html>

Notice the reference to the Silverlight.js file

The first way is to use the return value of an embedding function to set the innerHTML property of an HTML element. In this case, the parentElement parameter of the createObject function must be set to null. In the following example, it is done in the window.onload event:
```
<script>
```
```
    window.onload = function() {
```
```
        document.getElementById("sl1Host").innerHTML = embedSilverlight(null, "sl1", "row1");
```
```
    }
```
```
</script>
```
```
<tr>
```
```
    <td>- 1 -</td>
```
```
    <td id="sl1Host" />
```
```
</tr>
```

The second way (much more elegant) is similar to the first one, but specifying the parentElement parameter allows the createObject function to dynamically inject the generated code into a proper place:

<tr>

    <td>- 2 -</td>

    <td id="sl2Host">

        <script type="text/javascript">

            embedSilverlight(document.getElementById("sl2Host"), "sl2", "row2");

        </script>

    </td>

</tr>

Obviously, the createObject function can be called directly (this is the 3rd way):

<tr>

    <td>- 3 -</td>

    <td id="sl3Host">

        <script type="text/javascript">

            Silverlight.createObject(

                "WebPageIntegration.xap",

                document.getElementById("sl3Host"),

                "sl3",

                    width: "200", height: "50",

                    background: "white", alt: "<!--not installed-->",

                    version: "3.0.40624.0"

},

                    onError: onSLError,

                    onLoad: onSLLoad

},

                "myParam=myValue3",

                "row3");

        </script>

    </td>

</tr>

And also the createObjectEx function can be called directly (the 4th way). The difference in comparison with the createObject function is the consistent way of passing all parameters:

<tr>

    <td>- 4 -</td>

    <td id="sl4Host">

        <script type="text/javascript">

            Silverlight.createObjectEx({

                source: "WebPageIntegration.xap",

                parentElement: document.getElementById("sl4Host"),

                id: "sl4",

                properties: {

                    width: "200",

                    height: "50",

                    background: "white",

                    alt: "<!--not installed-->",

                    version: "3.0.40624.0"

},

                events: {

                    onError: onSLError,

                    onLoad: onSLLoad

},

                initParams: "myParam=myValue4",

                context: "row4"

});

        </script>

    </td>

</tr>

In all of the 4 above callings of either the createObject or createObjectEx functions, the initParams parameter was used. This parameter allows to pass to the Silverlight application hosted in the object one or more parameters (for many parameters use a semicolon as a separator).
- All initialization parameters are available in the Startup event of the Silverlight application, e.g.:
```
private void Application_Startup(object sender, StartupEventArgs e)
```
```
{
```
```
    const string paramKey = "myParam";
```
```
    string paramValue = "";
```
```
    if (e.InitParams.ContainsKey(paramKey))
```
```
    {
```
```
        paramValue = e.InitParams[paramKey];
```
```
    }
```
```
 
```
```
    this.RootVisual = new MainPage(paramValue);
```
```
}
```
- We need to pass the initialization parameter to the page, so we need to modify the page's constructor:
```
public MainPage(string paramValue)
```
```
{
```
```
     InitializeComponent();
```
```
 
```
```
    MainTextBlock.Text = paramValue;
```
```
}
```
- Test the appplication:

HTML Bridge

HTML Bridge allows to communicate between the JavaScript code of the HTML page and Silverlight appplications embedded on that page. As an exercise we will try to add communication between 4 instances of our application.

Add to our application a TextBox and a Button (modify the MainPage.xaml file):

<Border

    Background="{Binding RandomSolidColorBrush, Source={StaticResource BrushRandomizer}, Mode=OneWay}"

    BorderBrush="Black"

    BorderThickness="1"

    CornerRadius="5"

    <StackPanel

        VerticalAlignment="Center"

        HorizontalAlignment="Center"

        <TextBlock

            x:Name="MainTextBlock"

            Foreground="{Binding RandomSolidColorBrush, Source={StaticResource BrushRandomizer}, Mode=OneWay}"

            Text="Something"

            VerticalAlignment="Center"

            HorizontalAlignment="Center"

/>

        <StackPanel

            Orientation="Horizontal"

            <TextBox

                x:Name="SendTextBox"

                Width="120"

/>

            <Button

                x:Name="SendButton"

                Content="Send"

                Click="SendButton_Click"

/>

        </StackPanel>

    </StackPanel>

</Border>

Check if it looks good:

Calling a function written in JavaScript from Silverlight code is quite simple:
- Add the JavaScript function to the page:
```
<script type="text/javascript">
```
```
    function MyJSFunction(param) {
```
```
        alert(param);
```
```
    }
```
```
</script>
```
- In response for the Click event of the Send button, call this function using the HtmlPage.Window.Invoke method:
```
private void SendButton_Click(object sender, System.Windows.RoutedEventArgs e)
```
```
{
```
```
    HtmlPage.Window.Invoke("MyJSFunction", SendTextBox.Text);
```
```
}
```
- Compile and test the application:

Calling from the JavaScript code a method written in a Silverlight application is somewhat more difficulty, but in the simplest scenario it is still quite easy:

Add to the MainPage class a method to be called from JavaScript. Be sure to apply the ScriptableMember attribute:
```
[ScriptableMember]
```
```
public void SetText(string text)
```
```
{
```
```
    MainTextBlock.Text = text;
```
```
}
```

public MainPage(string paramValue)

    InitializeComponent();

    MainTextBlock.Text = paramValue;

    HtmlPage.RegisterScriptableObject("MainPage", this);

Modify the MyJSFunction in JavaScript:

<script type="text/javascript">

    function DoIt(controlId, param) {

        var slControl = document.getElementById(controlId);

        slControl.Content.MainPage.SetText(param);

    function MyJSFunction(param) {

        DoIt("sl1", param);

        DoIt("sl2", param);

        DoIt("sl3", param);

        DoIt("sl4", param);

</script>

Compile and verify that the text changes in all instances of the appplication:

Custom Splash Screen

Create a new Silverlight application, name it 'CustomSplashScreen'. Do not create a hosting ASP.NET application.

Add some content to the MainPage.xaml file, e.g.:

<Border

    Background="Yellow"

    BorderBrush="Black"

    BorderThickness="1"

    CornerRadius="5"

    Margin="10"

    <TextBlock

        Text="CustomSplashScreen is working now!"

        HorizontalAlignment="Center"

        VerticalAlignment="Center"

        FontSize="18"

        FontWeight="Bold"

/>

</Border>

Test if everything is OK:

The standard splash screen does not appear, because the application is loaded by a browser too fast. To make the loading phase slower, add to the project a big file, e.g. a film (ca. 100 MB). Set the 'Build Action' setting for this file to 'Content':
- If you experience OutOfMemoryException during compilation of the project, restart Visual Studio.
- Refreshing the page hosting our application in the Web browser should cause the splash screen to appear now:

Create a minimum HTML page hosting the application:

Add this page to the project, set its 'Build Action' to 'None' and 'Copy to Output Directory' to 'Copy if newer'. Name it TestHTMLPage.html:

Add an object for the Silverlight application:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

    <head>

        <title></title>

    </head>

    <body>

        <p>This is an HTML test page for the CustomSplashScreen Silverlight application.</p>

        <object width="100%" height="80%"

                data="data:application/x-silverlight-2,"

                type="application/x-silverlight-2">

            <param name="source" value="CustomSplashScreen.xap" />

        </object>

    </body>

</html>

Test the new page:

Add a new item to the project of type 'Text File', name it CustomSplash.xaml:

Ensure that the 'Build Action' setting has 'Page' value and the file is copied to the output directory if changed:

Add to this file the XAML code to draw the custom progress indicator, e.g.:

<Canvas

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    <Rectangle

        x:Name="Border"

        StrokeThickness="1"

        Stroke="LightGray"

        Height="20"

        Width="200"

/>

    <Rectangle

        x:Name="Bar"

        Fill="LightGray"

        Height="20"

        Width="0"

/>

    <TextBlock

        x:Name="Text"

        Canvas.Left="0"

        Canvas.Top="2"

        Width="200"

        TextAlignment="Center"

/>

</Canvas>

Modify the TestHTMLPage.html file:

Add to the definition of the Silverlight application an object identifier (id), name of the XAML file with the custom splash screen (splashscreensource), and name of the JavaScript function called to change the progress of loading the application (onSourceDownloadProgressChanged):

<object width="100%" height="80%"

        id="theApp"

        data="data:application/x-silverlight-2,"

        type="application/x-silverlight-2">

    <param name="source" value="CustomSplashScreen.xap" />

    <param name="splashscreensource" value="CustomSplash.xaml"/>

    <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

</object>

Add the onSourceDownloadProgressChanged JavaScript method:

<script language=javascript>

    function onSourceDownloadProgressChanged(sender, eventArgs) {

        var myHost = document.getElementById("theApp");

        var bar = myHost.content.findName("Bar");

        var border = myHost.content.findName("Border");

        var text = myHost.content.findName("Text");

        var perc = 0;

        if (eventArgs.progress) {

            perc = eventArgs.progress;

        } else {

            perc = eventArgs.get_progress();

        bar.Width = perc * border.Width;

        text.Text = parseInt(perc * 100) + "%";

</script>

See the custom splash screen in action:

Full screen

Create a new Silverlight application, name it 'FullScreen'. Do not create a hosting ASP.NET application.

Set the content of the MainPage.xaml file to display information about the actual size of the application's area. Add also a button to toggle the full screen mode:

<UserControl

    x:Class="FullScreen.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"

    <UserControl.Resources>

        <Style x:Key="LabelStyle" TargetType="TextBlock">

            <Setter Property="Margin" Value="0,0,5,0"/>

        </Style>

        <Style x:Key="ValueStyle" TargetType="TextBlock">

            <Setter Property="FontWeight" Value="Bold"/>

        </Style>

    </UserControl.Resources>

    <Border

        Background="LightBlue"

        BorderThickness="1"

        BorderBrush="Black"

        CornerRadius="5"

        Margin="5"

        <Grid

            Margin="5"

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>

            <Button

                x:Name="ToggleFullScreenButton"

                Content="Toggle Full Screen"

                Click="ToggleFullScreenButton_Click"

                Margin="5"

/>

            <TextBlock

                Grid.Row="1"

                Style="{StaticResource LabelStyle}"

                Text="Host.Content.ActualWidth:"

/>

            <TextBlock

                x:Name="ContentActualWidthTextBlock"

                Grid.Row="1" Grid.Column="1"

                Style="{StaticResource ValueStyle}"

/>

            <TextBlock

                Grid.Row="2"

                Style="{StaticResource LabelStyle}"

                Text="Host.Content.ActualHeight:"

/>

            <TextBlock

                x:Name="ContentActualHeightTextBlock"

                Grid.Row="2" Grid.Column="1"

                Style="{StaticResource ValueStyle}"

/>

            <TextBlock

                Grid.Row="3"

                Style="{StaticResource LabelStyle}"

                Text="Host.Content.IsFullScreen:"

/>

            <TextBlock

                x:Name="ContentIsFullScreenTextBlock"

                Grid.Row="3" Grid.Column="1"

                Style="{StaticResource ValueStyle}"

/>

        </Grid>

    </Border>

</UserControl>

Write C# code to display some information in response for the events:

public partial class MainPage : UserControl

    private readonly Content hostContent;

    public MainPage()

        InitializeComponent();

        hostContent = Application.Current.Host.Content;

        hostContent.Resized += HostContent_SizeChanged;

        hostContent.FullScreenChanged += HostContent_SizeChanged;

        DisplayInformation();

    void HostContent_SizeChanged(object sender, System.EventArgs e)

        DisplayInformation();

    private void DisplayInformation()

        ContentActualHeightTextBlock.Text = hostContent.ActualHeight.ToString();

        ContentActualWidthTextBlock.Text = hostContent.ActualWidth.ToString();

        ContentIsFullScreenTextBlock.Text = hostContent.IsFullScreen.ToString();

    private void ToggleFullScreenButton_Click(object sender, RoutedEventArgs e)

        hostContent.IsFullScreen = !hostContent.IsFullScreen;

Notice that the object exposing information about the current size of the Silverlight object embedded on the Web page is available as Host.Content property of the current application.

Test the application by changing size of the browser's window and clicking the 'Toggle Full Screen' button:
- The information about the full-screen mode visible on the above picture is displayed automatically by the Silverlight plugin.
An interesting aspect of setting the full screen mode is that it can be set only in response for the user's action, i.e. clicking a button. That's why the following code placed in the constructor of the MainPage class has no effect:
```
hostContent = Application.Current.Host.Content;
```
```
// The following line has no effect:
```
```
hostContent.IsFullScreen = true;
```

Out-of-browser

Out-of-browser support is a matter of configuration of the application, so to demonstrate this feature we can use any of existing projects, e.g. FullScreen.
Configuration a Silverlight application to run out-of-browser allows to specify icons displayed for the application by the operating system. To support this feature, add to the project the 'images' folder and place in it 4 icons in .png format and sizes 16x16, 32x32, 64x64, and 128x128. Be sure to set the 'Build Action' setting to 'Content' for all the icons:
In the properties of the FullScreen project (right click on the project in the Solution Explorer window), on the Silverlight tab, set the option 'Enable running application of the browser':

Using the 'Out-of-Browser Settings...' button configure the application:

Notice that a new file has appeared in the Properties folder of the FullScreen project - OutOfBrowserSettings.xml. In this file, all the settings done in the previous step are saved:

<OutOfBrowserSettings ShortName="FS &amp; OoB App" EnableGPUAcceleration="False" ShowInstallMenuItem="True">

  <OutOfBrowserSettings.Blurb>

    This application demonstrates the full screen and out-of-browser features of Silverlight 3.

   </OutOfBrowserSettings.Blurb>

  <OutOfBrowserSettings.WindowSettings>

    <WindowSettings Title="FullScreen &amp; OutOfBrowser Application" Height="200" Width="200" />

  </OutOfBrowserSettings.WindowSettings>

  <OutOfBrowserSettings.Icons>

    <Icon Size="16,16">images/16.png</Icon>

    <Icon Size="32,32">images/32.png</Icon>

    <Icon Size="48,48">images/48.png</Icon>

    <Icon Size="128,128">images/128.png</Icon>

  </OutOfBrowserSettings.Icons>

</OutOfBrowserSettings>

To allow the user to use the application outside the browser, the application must be installed using the Application.Install method.

Add a new button to the MainPage.xaml file:

<Button

    x:Name="OutOfBrowserButton"

    Grid.Column="1"

    Content="Out of Browser"

    Click="OutOfBrowserButton_Click"

    Margin="5"

    Width="120"

    HorizontalAlignment="Left"

/>

In response for the Click event of the button, call the Application.Install method:
```
private void OutOfBrowserButton_Click(object sender, RoutedEventArgs e)
```
```
{
```
```
    Application.Current.Install();
```
```
}
```
- As for the full screen feature, this action can be taken only in response for the user's action. Application can try to install itself in the system only in response for one of user-initiated events.
Compile, run, and test the new button:

The reason of failure is that we have used the '&' character in the short name of the application. It is enough modify content of the OutOfBrowserSettings.xml file (or modify this setting using the Properties window):

<OutOfBrowserSettings ShortName="FS OoB App" EnableGPUAcceleration="False" ShowInstallMenuItem="True">

  <OutOfBrowserSettings.Blurb>This application demonstrates the full screen and out-of-browser features of Silverlight 3.</OutOfBrowserSettings.Blurb>

  <OutOfBrowserSettings.WindowSettings>

    <WindowSettings Title="FullScreen &amp; OutOfBrowser Application" Height="200" Width="200" />

  </OutOfBrowserSettings.WindowSettings>

  <OutOfBrowserSettings.Icons>

    <Icon Size="16,16">images/16.png</Icon>

    <Icon Size="32,32">images/32.png</Icon>

    <Icon Size="48,48">images/48.png</Icon>

    <Icon Size="128,128">images/128.png</Icon>

  </OutOfBrowserSettings.Icons>

</OutOfBrowserSettings>

Compile and run the project again. This time, the 'Out of Browser' button works properly:
After pressing the OK button, application runs in a separate window and optionally shortcuts in the Start menu and on the Desktop have been created:

There are 2 useful properties of the Application class to check if the application has been installed and if it is running out of browser.

Add two rows to the grid displayed information and place in them TextBlock controls:

<TextBlock

    Grid.Row="4"

    Style="{StaticResource LabelStyle}"

    Text="InstallState:"

/>

<TextBlock

    x:Name="InstallStateTextBlock"

    Grid.Row="4" Grid.Column="1"

    Style="{StaticResource ValueStyle}"

/>

<TextBlock

    Grid.Row="5"

    Style="{StaticResource LabelStyle}"

    Text="IsRunningOutOfBrowser:"

/>

<TextBlock

    x:Name="IsRunningOutOfBrowserTextBlock"

    Grid.Row="5" Grid.Column="1"

    Style="{StaticResource ValueStyle}"

/>

Modify the C# code to display the interesting information:

private readonly Application app;

public MainPage()

    InitializeComponent();

    app = Application.Current;

    hostContent = app.Host.Content;

    // The following line has no effect:

    hostContent.IsFullScreen = true;

    hostContent.Resized += HostContent_SizeChanged;

    hostContent.FullScreenChanged += HostContent_SizeChanged;

    app.InstallStateChanged += HostContent_SizeChanged;

    DisplayInformation();

private void DisplayInformation()

    ContentActualHeightTextBlock.Text = hostContent.ActualHeight.ToString();

    ContentActualWidthTextBlock.Text = hostContent.ActualWidth.ToString();

    ContentIsFullScreenTextBlock.Text = hostContent.IsFullScreen.ToString();

    InstallStateTextBlock.Text = app.InstallState.ToString();

    IsRunningOutOfBrowserTextBlock.Text = app.IsRunningOutOfBrowser.ToString();

Compile and run the application:

Note, that the new version works only in the browser's window, the installed version of the appplication remains old. Fortunately, Silverlight has also support for application updates.

To remove the installed version of the application, run it, right click anywhere inside the window, choose the 'Remove this application..' option, and confirm removing:

Add to the MainPage.xaml file a new row into the grid control and place there a button to check for updates:

<Button

    x:Name="CheckUpdateButton"

    Grid.Row="6"

    Content="Check Update"

    Click="CheckUpdateButton_Click"

    Margin="5"

/>

Modify the C# code of the MainPage class:

public MainPage()

    InitializeComponent();

    app = Application.Current;

    hostContent = app.Host.Content;

    // The following line has no effect:

    hostContent.IsFullScreen = true;

    hostContent.Resized += HostContent_SizeChanged;

    hostContent.FullScreenChanged += HostContent_SizeChanged;

    app.InstallStateChanged += HostContent_SizeChanged;

    app.CheckAndDownloadUpdateCompleted += CheckAndDownloadUpdateCompleted;

    DisplayInformation();

void CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)

    string info = "";

    if (e.UpdateAvailable)

        info = "A new version has been installed, restart the application.";

    else if (e.Error == null)

        info = "There is no new version";

    else if (e.Error is PlatformNotSupportedException)

        info = "There is a new version of the application, but it requires a new version of Silverlight";

    else

        info = string.Format("Error: {0}", e.Error.ToString());

    MessageBox.Show(info);

private void CheckUpdateButton_Click(object sender, RoutedEventArgs e)

    app.CheckAndDownloadUpdateAsync();

To test the Application.CheckAndDownloadUpdateAsync method, the application must be hosted at HTTP address. Create a virtual directory in IIS pointed to the output directory of the project, test if it works. Install the application from this new address:
Compile, run, and install the application. Test the new 'Check Update' button:

Modify the content of the MainPage.xaml file to visualize the new version, e.g.:

<TextBlock

    Grid.Row="6" Grid.Column="1"

    Text="This is an updated version!"

    Foreground="Red"

    FontWeight="Bold"

    VerticalAlignment="Center"

/>

Compile the application. If the virtual directory configured in IIS points to the output of the project, we don't need to do anything. Check again for an update and this time something happens:
After restarting the application, a new version is running:

[Source code]