Introduction
It is possible to configure Silverlight-based applications so that users can install them from their host Web pages and run them outside the browser. This feature is known by the name ‘OOB’ or ‘Out-of-Browser’ support, and sometimes just ‘Offline’ support.
Try a sample online or download the source code.
Try a sample online or download the source code.
Configuration
- Go to the Project Properties window (Right click on the Silverlight project in Visual Studio 2008 and choose ‘Properties’).
- On the ‘Silverlight’ tab, select ‘Enable running application out of the browser’.
- Click on the ‘Out-of-Browser Settings…’ button.
- Fill or change the details like Window Title (Appears in the title bar of the out-of-browser application window), Width and Height (Indicates the dimensions of the out-of-browser application window; default is 800x600), Shortcut name (Appears in the out-of-browser installation dialog box and on the installed application shortcut or shortcuts), and Download description (Appears as a tooltip on the installed application shortcuts). Also assign application icon in a set of standard sizes (The operating system chooses the most appropriate icon to display in the installation dialog box, the application window, Windows Explorer, and Windows taskbar/Macintosh dock bar). These icons must be ‘png’ files and need to be added to the project initially with ‘Build Action’ set as ‘Content’. Optionally, 'Enable GPU Acceleration' can be turned on for graphics rich applications to enhance graphics performance by using hardware acceleration.
The values in the ‘Out-of-Browser Settings’ dialog box is used to generate an ‘OutOfBrowserSettings.xml’ file located in the project Properties folder. Any changes to this file are reflected in the designer. This file is used to populate the application manifest (AppManifest.xaml) with the specified values.
<OutOfBrowserSettings ShortName="MySloob Application" EnableGPUAcceleration="False" ShowInstallMenuItem="True"> <OutOfBrowserSettings.Blurb>MySloob Application on your desktop; at home, at work or on the go.</OutOfBrowserSettings.Blurb> <OutOfBrowserSettings.WindowSettings> <WindowSettings Title="MySloob Application" Height="400" Width="600" /> </OutOfBrowserSettings.WindowSettings> <OutOfBrowserSettings.Icons> <Icon Size="16,16">Icons/MySloob16.png</Icon> <Icon Size="32,32">Icons/MySloob32.png</Icon> <Icon Size="48,48">Icons/MySloob48.png</Icon> <Icon Size="128,128">Icons/MySloob128.png</Icon> </OutOfBrowserSettings.Icons> </OutOfBrowserSettings>
When an application is properly configured for OOB, a new right-click menu option will be available as ‘Install <ApplicationName> Application onto this computer…’. Clicking on this will launch the installer dialog where the user can choose to create shortcuts on Start menu and Desktop. When ‘OK’ is clicked, the application will be installed to the local computer and it will be launched in a new application window. ‘Remove this application…’ right-click menu will now be available within this application to uninstall it from the computer.
Internals
If you look at the installed application’s shortcut properties, you will see that the target points to ‘C:\Program Files\Microsoft Silverlight\sllauncher.exe 1527765212.localhost’.
If you search for that random number (in my case: 1527765212) in Windows explorer, you will find a folder like this:
C:\Users\<user.name>\AppData\LocalLow\Microsoft\Silverlight\OutOfBrowser\1527765212.localhost
sllauncher.exe is the ‘Microsoft Silverlight Out-of-Browser Launcher’ application that gets installed along with Silverlight. It is a win32 application that loads the Silverlight application in its own browser host.
When you install a Silverlight OOB application, the XAP file is downloaded to the local computer and is stored in a folder within the user’s local app data called as ‘offline application cache’. The folder is named with a unique AppId which consists of a random number and the source of origin of the application (in this case: localhost). This folder will also have the application meta data and an index.html which has an object tag to load the Silverlight application.
sllauncher.exe takes this AppId (Examples: 1527765212.localhost, 1930341777.wayfarer.bizhat.com) as a parameter and then sets its window according to the metadata available in the specified offline application cache. It then loads the index.html in its browser host which in turn will display the Silverlight application.
metadata:
ShortcutName=MySloob Application
Name=MySloob ApplicationTitle=MySloob Application Description=MySloob Application on your desktop; at home, at work or on the go. AppID=1527765212.localhost RuntimeVersion=3.0.40624.0 FinalAppUri=file:///C:/Temp/MySloob/MySloob/Bin/Debug/MySloob.xap OriginalSourceUri=file:///C:/Temp/MySloob/MySloob/Bin/Debug/MySloob.xap SourceDomain=localhost WindowHeight=400 WindowWidth=600 EnableGPUAcceleration=False TrimmedName=MySloob Application TrimmedTitle=MySloob Application TrimmedSourceDomain=localhost CustomIcon=1 LaunchPath=C:\Users\sameer.thiruthikad\AppData\LocalLow\Microsoft\Silverlight\OutOfBrowser\1527765212.localhost\index.html
<!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" > <!-- saved from url=(0014)about:internet --> <head> <style type='text/css'> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; } </style> </head> <body scroll="no" onload="document.getElementById('_sl').focus()"> <div id="silverlightControlHost"> <object id='_sl' data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%"> <param name="source" value="offline://1527765212.localhost"/> <param name="background" value="White"/> <param name="enableGPUAcceleration" value="False"/> <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> </a> </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe> </div> </body> </html>
Sample Application
There are a set of classes and methods available in Silverlight to install an application through code, to check for updates, to determine network status, etc. These are illustrated through the sample below:XAML:
<Grid x:Name="LayoutRoot"
Background="Beige"> <StackPanel HorizontalAlignment="Center"> <TextBlock Text="Welcome to 'MySloob' - A sample Silverlight Out-Of-Browser Application!" HorizontalAlignment="Center" /> <TextBlock x:Name="uxDescription" Text="()" HorizontalAlignment="Center" /> <Button x:Name="uxInstall" Margin="20" Height="50" Width="200" Content="Install Me" Click="uxInstall_Click" /> <Ellipse Height="100" Width="{Binding ElementName=uxSlider,Path=Value}"> <Ellipse.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Orange" Offset="0" /> <GradientStop Color="Red" Offset=".5" /> <GradientStop Color="Yellow" Offset="1" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <Slider x:Name="uxSlider" Margin="25" Width="300" Value="200" Minimum="100" Maximum="300" /> <Button x:Name="uxCheckUpdate" Height="50" Width="200" Content="Check Update" Click="uxCheckUpdate_Click" /> <TextBlock x:Name="uxOOBStatus" Margin="0,25,0,0" Foreground="Blue" Text="OOB Status" HorizontalAlignment="Center" /> <TextBlock x:Name="uxInstallStatus" Foreground="Brown" Text="Install Status" HorizontalAlignment="Center" /> <TextBlock x:Name="uxNetworkStatus" Foreground="Black" Text="Network Status" HorizontalAlignment="Center" /> <TextBlock Text="Last Modified: 2009-August-18, 05:00 PM IST by Sameer C Thiruthikad" HorizontalAlignment="Center" /> </StackPanel> </Grid>
public MainPage()
Try this sample online or download the source code.
{
InitializeComponent();
UpdateUI();
Application.Current.InstallStateChanged += new EventHandler(app_InstallStateChanged);
Application.Current.CheckAndDownloadUpdateCompleted += new CheckAndDownloadUpdateCompletedEventHandler(app_CheckAndDownloadUpdateCompleted);
System.Net.NetworkInformation.NetworkChange.NetworkAddressChanged += new System.Net.NetworkInformation.NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);
}
private void uxInstall_Click(object sender, RoutedEventArgs e)
{
try
{
Application.Current.Install();
}
catch (InvalidOperationException)
{
MessageBox.Show("The application is already installed.");
}
}
void app_InstallStateChanged(object sender, EventArgs e)
{
UpdateUI();
}
private void uxCheckUpdate_Click(object sender, RoutedEventArgs e)
{
Application.Current.CheckAndDownloadUpdateAsync();
}
void app_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)
{
if (e.UpdateAvailable)
{
MessageBox.Show("An application update has been downloaded. Please restart.");
}
else
{
MessageBox.Show("There is no update available.");
}
}
void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)
{
UpdateUI();
}
private void UpdateUI()
{
if (Application.Current.InstallState == InstallState.Installed)
{
this.uxInstall.IsEnabled = false;
}
else
{
this.uxInstall.IsEnabled = true;
}
this.uxOOBStatus.Text = "OOB Status: " + Application.Current.IsRunningOutOfBrowser.ToString();
this.uxInstallStatus.Text = "Install Status: " + Application.Current.InstallState.ToString();
this.uxDescription.Text = "(" + Deployment.Current.OutOfBrowserSettings.Blurb + ")";
bool online = System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable();
if (online)
{
this.uxNetworkStatus.Foreground = new SolidColorBrush(Colors.Green);
this.uxNetworkStatus.Text = "Network Status: Online";
}
else
{
this.uxNetworkStatus.Foreground = new SolidColorBrush(Colors.Red);
this.uxNetworkStatus.Text = "Network Status: Offline";
}
}
