Home Course Index << Prev. Next >> PDF Version of this Page

Course API Comparison
Chapter C6: A Silverlight 4 Browser Application written in Xaml and C#


Copyright © by V. Miszalok, last update: 2011-10-02
For an introduction into Microsoft Silverlight see: Silverlight

Microsoft Silverlight is a lightweight subsets of WPF aimed to compete with Adobe Flex 3 for RIAs.
Advantages: own SDK, integration in DotNet, all DotNet-languages, seamless with server programming.
Disadvantages: fewer graphical components, smaller developer community, fewer browser plug-ins.

Preliminaries

Install 1) Visual Web Developer 2010 Express Edition English
and     2) Silverlight 4 Tools for Visual Studio 2010 .

Guidance for Visual Web Developer 2010 Express and Silverlight 4:

1) Main menu after start of VWD Express: Tools → Options... → check lower left checkbox: Show all Settings →
→ Projects and Solutions → General → Projects location: → C:\temp.
→ Text Editor (double click) → All Languages (double click) → Tabs →
  Indenting: None → Tab size: 2 → Insert spaces.
→ Text Editor (double click) → C# (double click) → Formatting → uncheck all three check boxes → OK.
→ Text Editor (double click) → XAML (double click) → Tabs →
  Indenting: None → Tab size: 1, Indent size: 1 → Insert spaces.
→ Text Editor (double click) → XAML (double click) → Formatting → uncheck all Auto-Formatting Events → OK.

2) Main menu after start of VWD 2010 Express: File → New Project... → Project types: Visual C# (double click) → Silverlight → Silverlight Application
Name: compareSilverlight_Browser → Location: C:\temp\API → Create directory for solution: switch off → OK.
An Add Silverlight Application-Window appears.
Uncheck the checkbox "Host the Silverlight application in a new Web site" → OK.

Open View → Solution Explorer. The Solution Explorer-window is shown on the right.

 
 

MainPage.xaml

Replace the default code of MainPage.xaml by the following lines:

<UserControl x:Class="compareSilverlight_Browser.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Viewbox x:Name="viewbox">
    <Border BorderBrush="Black" BorderThickness="2">
      <StackPanel Orientation="Horizontal" Margin="2">
        <Button Content="Talk!" Click="button1Click" HorizontalAlignment="Left"/>
        <TextBox Margin="2,0,2,0" MinWidth="300" TextAlignment="Center"/>
        <Button Content="Clear" Click="button2Click" HorizontalAlignment="Right"/>
      </StackPanel>
    </Border>
  </Viewbox>
</UserControl>
 

MainPage.xaml.cs

Because of the bug in the Viewbox from the Toolkit we have to declare a new TextBox and link it manually in 3 steps to the TextBox that already has been defined in MainPage.xaml.
Replace the default code of MainPage.xaml.cs by the following lines:

using System;
using System.Windows;
using System.Windows.Controls;
namespace compareSilverlight_Browser 
{ public partial class MainPage : UserControl
  { TextBox textBox;                         //because of Viewbox bug
    public MainPage()
    { InitializeComponent();
      Border     b = (Border)viewbox.Child;  //because of Viewbox bug
      StackPanel s = (StackPanel)b.Child;    //because of Viewbox bug
      textBox      = (TextBox)s.Children[1]; //because of Viewbox bug
    }
    private void button1Click( object sender, RoutedEventArgs e )
    { textBox.Text = "Silverlight Browser Application in XAML + C#. Resize!";
    }
    private void button2Click( object sender, RoutedEventArgs e )
    { textBox.Text = "";
    }
  }
}

Click Debug → Start Without Debugging Ctrl F5.
Click the Talk!-button and resize the browser.
Switch the compiler to produce a release-mode XAP-file via the main menu after start of VWD 2010 Express:
Build → Configuration Manager... → Active solution configuration: Release → Close. Click Debug → Start Without Debugging Ctrl F5.
Your C:\temp\API\compareSilverlight_Browser\bin\Release-directory will contain a XAP-file compareSilverlight_Browser.xap that can be incorporated into any HTML-page by:
1) Store it in the same directory as the housing HTML-page.
2) Call it at any line from inside the <body></body> tags of the HTML-page by inserting the following HTML-code:

<div id="silverlightControlHost" Align="Center">
 <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100">
  <param name="source" value="compareSilverlight_Browser.xap">
  <param name="minRuntimeVersion" value="4.0.50401.0" >
  <param name="autoUpgrade" value="true" >
  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none;">
   <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none"></a>
 </object>
</div>

The current HTML-page has these lines here:

Get Microsoft Silverlight
 

Out of Browser OOB

It is possible to detach compareSilverlight_Browser.xap from its embedding compareSilverlight_BrowserTestPage.html and to create a stand-alone program that can be started in its own window. This mechanism works with all platforms and all browsers running the Silverlight plug-in.
See: www.microsoft.com/getsilverlight/Get-Started/Install/Outside-the-Browser-Sandboxed.aspx.

1. Main menu after start of VWD 2010 Express: Project → compareSilverlight_Browser Properties... → Check the checkbox: Enable running application out of the browser →
Click Debug. → Start Without Debugging Ctrl F5.
VWD 2010 Express will no show compareSilverlight_Browser.xap in a stand-alone-out-of-the-browser-window.
Right click this window and Remove this application....
Look for C:/temp/compareSilverlight_Browser/Bin/Release/TestPage.html and start it with your browser.
Your browser will show compareSilverlight_Browser.xap inside compareSilverlight_BrowserTestPage.html as before.

2. Right-click the browser content. A context menu will appear showing a line: Install compareSilverlight_Browser... onto this computer.... Click it. → An Install application-window appears. → Uncheck the checkbox Start menu and check the checkbox Desktop → OK.

3. Our program now starts a window: compareSilverlight_Browser... - localhost and at the same time a persistent new icon named: compareSilverlight_Browser... will appear on your desktop. From now our application behaves on any platform as any normal application does.

4. You can de-install everything and remove the icon from your desktop by a Right-click onto the content of a running compareSilverlight_Browser... - localhost. A context menu will appear. Click the line: Remove this application... → Are you sure you want to permanently remove this application ? → Yes.

For more information how to make better "Out of Browser Silverlight Applications" see: Tim Heuer's video.

top of page: