Home Course Index C1 Guidance PDF Version of this Page

Course IPSL: Image processing with Silverlight
Chapter C1: The Complete Code of the Binary Image Project


Copyright © by V. Miszalok, last update: 17-06-2010
Mail me...
Let me know
what you think

Install 1) Visual Web Developer 2010 Express English
and    2) Web Platform.


 

Preliminaries

Guidance for Visual Web Developer 2010 Express:

1) Main Menu after start of VWD Express: Tools → Options → check lower left checkbox: Show all Settings →
→ Projects and Solutions → Projects location: → C:\temp.
→ Text Editor (double click) → All Languages (double click) → Tabs →
  Indenting: None → Tab size: 1 → Insert spaces
.
→ Text Editor (double click) → C# (double click) → Formatting → General → uncheck all three Automatically format ... check boxes.
→ Text Editor (double click) → C# (double click) → Formatting → Indentation → uncheck all check boxes.
→ Text Editor (double click) → C# (double click) → Formatting → New Lines → uncheck all check boxes.
→ Text Editor (double click) → C# (double click) → Formatting → Spacing → uncheck all 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 → General → uncheck all Auto-Formatting Events → OK.

2) Main Menu after start of VWD Express: File → New Project... → Installed templates: Visual C# (double click) → Silverlight → Silverlight Application
Name: Binary1 → Location: C:\temp → Create directory for solution:
switch off → OK.
A New Silverlight Application-Window appears.
Uncheck "Host the Silverlight application in a new Web site". Silverlight Version: Silverlight 4 → OK.
Start the default code by clicking Debug → Start Debugging F5. → Binary1 - Windows Explorer will appear and show an empty C:\temp\Binary1\Bin\Debug\Binary1TestPage.html.
Now you have to store 3 images into the directory C:\temp\Binary1\Bin\Debug\:
www.miszalok.de/Images/Lena256.png Format 256x256
www.miszalok.de/Images/Butterfly.jpg Format 295x250
www.miszalok.de/Images/Ferropolis.jpg Format 1200x1600.

If the Solution Explorer - Binary1 window doesn't appear as shown on the right, you must open it manually: View → Other Windows → Solution Explorer.
In the Solution Explorer - Binary1 window click the branch MainPage.xaml. A split window will appear containing a empty rectangle above the default XAML code. Hide the rectangle by shifting up the horizontal splitter line to the upper rim. Delete the red and blue XAML code completely and replace it by the code of Version 01: MainPage.xaml which follows.

 
 

Version 01: MainPage.xaml

MainPage.xaml:
<UserControl x:Class="Binary1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Viewbox>
  <Border BorderBrush="Black" BorderThickness="1" Margin="3">
   <StackPanel Orientation="Horizontal">
    <Slider x:Name="mySlider" Width="100" Height="20" Maximum="255"
            Value="128" ValueChanged="mySlider_ValueChanged"/>
    <Border BorderBrush="Black" BorderThickness="2"
            Width="25" Height="20" Margin="3">
     <TextBlock x:Name="myTextBlock" TextAlignment="Center"/>
     </Border>
    <Border BorderBrush="red" BorderThickness="1" Margin="3">
     <Image x:Name="myImage" Source="Lena256.png" ImageOpened="myImage_ImageOpened"/>
    </Border>
    <Button x:Name="myButton" Content="Reset" Width="40" Height="20"
            Margin="3" Click="myButton_Click"/>
   </StackPanel>
  </Border>
 </Viewbox>
</UserControl>
MainPage.xaml.cs:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
namespace Binary1
{ public partial class MainPage : UserControl
  { WriteableBitmap wb0, wb1;
    Byte threshold = 128;
    public MainPage()
    { InitializeComponent();
    }
    private void myImage_ImageOpened( object sender, RoutedEventArgs e )
    { wb0 = new WriteableBitmap( (BitmapSource)myImage.Source );
      wb1 = new WriteableBitmap((BitmapSource)myImage.Source);
    }
    private void mySlider_ValueChanged( object sender,
                                        RoutedPropertyChangedEventArgs<double> e )
    { if ( mySlider == null ) return;
      threshold = (Byte)mySlider.Value;
      myTextBlock.Text = threshold.ToString();
      for ( int i=0; i < wb0.PixelWidth*wb0.PixelHeight; i++ )
      { if ( (Byte)(wb0.Pixels[i] & 0xff) < threshold ) //red channel only
             unchecked { wb1.Pixels[i] = (Int32)0xff000000; } //black
        else unchecked { wb1.Pixels[i] = (Int32)0xffffffff; } //white
      }
      wb1.Invalidate();
      myImage.Source = wb1;
    }
    private void myButton_Click( object sender, RoutedEventArgs e )
    { myImage.Source = wb0;
    }
  }
}

Start this code by clicking Debug → Start Debugging F5. Binary1 - Windows Explorer will appear and show C:\temp\Binary1\Bin\Debug\Binary1TestPage.html with Lena256.png.
Experiments:
Try out the other images by changing the line
   <Image Source="Lena256.png"/> to:
   <Image Source="Butterfly.jpg"/>
   <Image Source="Ferropolis.jpg"/>.

Get Microsoft Silverlight
 

Insert the Silverlight content in an arbitrary HTML-file

Switch the compiler to produce a release-mode XAP-file via the main menu after start of VWD 2010 Express:
Debug → Build Binary1.
Your C:\temp\Binary1\bin\Release-directory will now contain a XAP-file Binary1.xap that can be incorporated into any HTML-page by:
1. Store it in the same directory as the housing HTML-page.
2. Copy your images into this directory.
3. Insert the following line into the <head>..</head>-clause of your HTML-page:
   <style type="text/css"> html, body { height: 50%; } </style>
4. Call the Siverlight object from inside the <body></body> tags of the HTML-page by inserting the following HTML-code:

 <object data="data:application/x-silverlight-2,"
        type="application/x-silverlight-2" width="100%" height="100%">
 <param name="source" value="Binary1.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>
 

Out of Browser = OOB Application

It is possible to detach Binary1.xap from its embedding Binary1TestPage.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 4 plug-in.

1. Main menu after start of VWD 2010 Express: Project → Binary1 Properties → Silverlight → Check the checkbox: Enable running application out of the browser. Click the button Out-of-Browser Settings .... An Out-of-Browser Settings-Window appears. Set Width to 400 and Height to 280. Check Use GPU Acceleration and Show install menu → OK → Click Debug → Build Binary1.
Directory C:\temp\Binary1\Bin\ will contain a new sub-directory Release.
Copy Lena256.png, Butterfly.jpg and Ferropolis.jpg into this new sub-directory Release.



  

Double click Binary1TestPage.html and the Silverlight application is rendered by the favorite browser.
Right click the application and a context menu will appear.
Click Install Binary1 Application onto this computer...
An Install application window asks where to install the shortcut.
Uncheck Start menu and check Desktop → OK.
Our program now starts a window: Binary1 Application - localhost and at the same time a persistent new icon named: Binary1 Application will appear on the desktop. From now our application behaves as any normal application.
Whenever you click it, you will obtain a new Binary1 Application - localhost-window.
Its home is the C:\Users\YourUserName\AppData\LocalLow\Microsoft\Silverlight\OutOfBrowser-directory.
To uninstall Binary1 Application - localhost start Binary1TestPage.html again.
Right click the application and a context menu will appear.
Click Remove this application....

top of page: