Silverlight tutorials for beginners

Learn Silverlight and practise how to write silverlight enabled web applications. This set of
silverlight tutorials will guide you from the basic concepts of Silverlight and lead you through
the advanced topics. The Silverlight tutorials in this section is prepared by the Microsoft
MVP 'Tony John' who is the founder of dotnetspider.com and SilverlightClub.com.

Tutorials
Chapter 1 : What is silverlight ?
Chapter 2 : Difference between Silverlight 1 and Silverlight 2
Chapter 3 : Difference between Silverlight and WPF
Chapter 4 : Tools required to develop Silverlight applications
Chapter 5 : Difference between Silverlight Runtime and Silverlight SDK
Chapter 6 : What is XAML ?
Chapter 7 : What is .xap file ?
Chapter 8 : "Hello World" Silverlight application
Chapter 9 : Files created by Visual Studio by default
Chapter 10 : Build and run your Silverlight hello World application
Chapter 11 : What is app.xaml ?
Chapter 12 : Page.xaml file
Chapter 13 : Getting started with XAML tags
Chapter 14 : How to place a Silverlight control in a web page ?
Chapter 15 : How to set default .xaml page in a Silverlight control ?
Chapter 16 : How to open XAML pages from another XAML page ?
Chapter 17 : Open a specific xaml page from a Silverlight control
Chapter 18 : Layout controls in Silverlight
Chapter 19 : Layout panel controls in Silverlight - Canvas
Chapter 20 : How to display image in a Silverlight control ?
Chapter 21 : How to drag and move an image or object in Silverlight ?
Chapter 22 : How to pass parameters to Silverlight controls from ASP.NET pages ?
Chapter 23 : How to call WCF methods from Silverlight controls ?
Chapter 24 : Calling WCF from Silverlight controls - Part II
Chapter 25 : Access Session variables from Silverlight controls
Chapter 26 : Create WCF service to retrieve session data - part II
Chapter 27 : How to call Javascript functions from Silverlight code ?
Chapter 28 : How to show a popup layer within a Silverlight web page?
Chapter 29 : Display Tooltip for Silverlight controls
Chapter 30 : How to play audio or sound files from Silverlight
Chapter 31 : How to display custom Rightclick context menu in Silverlight controls?
Chapter 32 : Introduction to DataBinding in Silverlight
Chapter 33 : How to set a background image for your Sivlerlight control
Chapter 34 : Javascript to detect if Silverlight is installed

What is silverlight ?
This gives an introduction to the new Microsoft Silverlight technology.

Silverlight is a web based technology, launched by Microsoft in April 2007. Silverlight is

considered as a competitor to Adobes Flash.

Silverlight applications are delivered to browsers in a text-based markup language called

XAML. One important difference between Flash and XAML is, Flash is a compiled
application where as XAML is text based. Search engines can analyze and index such
content, which is a huge benefit for webmasters.

For regular internet users, Silverlight is a browser plug-in that supports video, audio and
animations.

For web developers, Silverlight offers much more. Silverlight supports video and audio files
without need of much programming. It allows them to handle events from web pages (like
handle start/end of video playing etc)

Difference between Silverlight 1 and

Silverlight 2
This chapter explains some of the primary differences between Silverlight 1 and
Silverlight 2

Silverlight 1 is purely AJAX and Javascript based. All the code has to be written in Javascript
and XAML.

Silverlight 2 supports managed code. When Silverlight 2 runtime is installed, it installs a

limited version of .NET runtime on the client machine. This allows .NET programmers to
write managed code to be executed on the client PC and provide a better user experience to
the users. Of course, there is security and restrictions built in to it so that the code has limited
access to the client computer.

Developers must be aware that if the end user decline to install the .NET runtime on their
client computer, the Silverlight 2 applications will not run.

Difference between Silverlight and WPF

This chapter explains some core differences between Silverlight and WPF (Windows
Presentation Foundation)

Silverlight and Windows Presentation Foundation (WPF) are 2 different products from
Microsoft, but has lot of overlap. Silverlight is a sub set of WPF in terms of features and
functionality.

Silverlight is a Microsoft technology, competing with Adobes Flash and is meant for
developing rich browser based internet applications.

WPF is a Microsoft technology meant for developing enhanced graphics applications for
desktop platform. In addition, WPF applications can be hosted on web browsers which offers
rich graphics features for web applications. Web Browser Appliactions (WBA) developed on
WPF technology uses XAML to host user interface for browser applications. XAML stands
for eXtended Application Markup Language which is a new declarative programming model
from Microsoft. XAML files are hosted as descrete files in the Web server, but are
downloaded to the browsers and converted to user interface by the .NET runtime in the client
browsers.

WPF runs on .NET runtime and developers can take advantage of the rich .NET Framework
and WPF libraries to build really cool windows applications. WPF supports 3-D graphics,
complex animations, hardware acceleration etc.

Tools required to develop Silverlight

applications
This chapter talks about various development tools available to develop Silverlight
applications.

To run Silverlight applcations in a web browser, you need to have Silverlight run time
installed on the client browser as a plug in. This is a light weight version of .NET runtime.
However, to develop a Silverlight application, you need something more.

Silverlight SDK

This include a set of tools required to compile and build Silverlight controls.

If you are comfortable writing HTML using notepad and compiling .NET applications from
console tools, then you just need the Silverlight SDK to develop Silverlight applications.
However, most people use some kind of IDE to develop applications faster.

Microsoft offers 2 separate tools to develop Silverlight applications:

1. Microsoft Expression Studio - this tool is meant for web designers to create rich visual
elements for Silverlight applications. Expression Studio is recommended for web designers
who create rich internet applications with enhanced visual content and graphics. There are
several features provided for creating enhanced graphics elements with lot of options to pick
color, font etc.

2. Microsoft Visual Studio - this is the integrated development environment from Microsoft
to develop .NET applications. Programmers can use Visual Studio to develop Silverlight
applications which require programming. Visual Studio allows programmers to develop
sophisticated Silverlight applications in any .NET language (like C#, VB.NET etc).

If you are using Visual Studio, you can download the Silverlight development tools from
here. This download include the Service pack1 for VS.NET and the Silverlight SDK.

Which tool to use - Expression Studio or Visual Studio ?

If your Silverlight application include just graphics adn visual elements, then you can use
Expression Studio. However, if you are a programmer and if your Silverlight application
include programming logic, then you might want to choose Visual Studio.

Difference between Silverlight Runtime and

Silverlight SDK
In this tutorial, you can learn more about the difference between Silverlight Runtime
and Silverlight SDK

Silverlight Runtime is a plug-in for browsers to support Silverlight enabled applications. If

Silverlight runtime is not installed, browsers will not be able to run Silverlight elements in the
browser. You can set up your Silverlight tags such a way that your browser will automatically
prompt the user to download and install the Silverlight plug in when your application is
launched in the browser.

Installing the run time is a one time operation on the client. Once installed, it will be
automatically launched when any Silverlight application is loaded in the browser.
Silverlight SDK is a set of tools, documentation, samples and templates for the web
developers to help them easily develop Silverlight enabled applications. The SDK is not
really mandatory to develop Silverlight applications, however, SDK will make development
much easier.

What is XAML ?
This chapter gives an introduction to XAML - the eXtended Application Markup
Language
AML stands for eXtended Application Markup Language. XAML contain XML that is used
to declaratively specify the user interface for Silverlight or WPF applications.

For example, if you need to display a rectangle, this is the XAML you need to use:
<Canvas Width="500" Height="500" Background="White">
<Rectangle Canvas.Left="75" Canvas.Top="90" Fill="red" Width="100"
Height="100" />
</Canvas>

When the above xaml is executed, it will display a rectangle filled with red color.

You may notice is that XAML is very similar to HTML in nature.

"Hello World" Silverlight application

In this chapter, you will learn how to create your first Silverlight application

Open Visual Studio and select the menu "File" > "New" > "Project"
Select the Project Type as "Silverlight" under your favorite language and choose the template
"Silverlight Application". I have selected Visual C# as the tutorials here.

I have named my project as "MySilverlightApp" and have selected the option "Create
directory for solution" so that all my project files are organized within a folder structure.
We need a web page to host the Silverlight components that we develop. Visual Studio makes
this job easier in the next step by prompting you to automatically create a website. Choose
the options as shown in the attachment.

You are ready to rock ! Just press OK and Visual Studio will create 2 projects and a bunch of
files for you. We will analyze some of the files created by Visual Studio in the next chapter.

Files created by Visual Studio by default

In this chapter, let us analyze some of the files created by default by Visual studio

When we create a new Silverlight application using Visual Studio 2008, it creates several
files by default. See the solution explorer immediately after creating a new Silverlight project
with a host website:
We will analyse some of the files.

AppManifest.xml

This file defines the assemblies that are deployed to the client applications.

Build and run your Silverlight hello World

application
In this chapter, you will learn how to build and run your Silverlight application

It is time to build and run your first Silverlight application. Press Ctrl+F5 to build and run
your application. If everything is setup correctly, then Internet Explorer will be launched
automatically with your default page which hosts your Silverlight object.

Since you have not done much for your control, you will see a blank page opened in the
browser.

Go back to your Visual Studio and open your web page which hosts the Silverlight object. In
my sample project, the file is named "MySilverlightAppTestPage.aspx" and the content of the
file looks like this:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!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" style="height:100%;">
<head runat="server">
<title>Test Page For MySilverlightApp</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApp.xap"
MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>
</form>
</body>
</html>

Most of the stuff above look familiar to ASP.NET developers. Some of the lines that need
some attention are:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApp.xap"
MinimumVersion="2.0.30523" Width="100%" Height="100%" />

The second line defines the Silverlight control to be hosted in the web page. The attribute
"Source" defines the .xap file to be used by the web page. This .xap file contains the XAML
and code from your .xaml files and will be executed by the Silverlight plugin.

In the current sample, you have just one xaml file called Page.xaml. When you compile the
solution, this file is compiled into a special file (MySilverlightApp.xap) with the extension
.xap.

What is app.xaml ?
This chapter explains the significance of app.xaml file in a Silverlight application.

App.xaml is a file used by Silverlight applications to declare shared resources like brushes,
various style objects etc. Also, the code behind file of app.xaml is used to handle global
application level events like Application_Startup, Application_Exit and
Application_UnhandledException. (Similar to Global.asax file for ASP.NET applications)

When Visual Studio creates the app.xaml file automatically, it creates few event handlers
with some default code. You can change the code appropriately.
private void Application_Startup(object sender, StartupEventArgs e)
{
}

private void Application_Exit(object sender, EventArgs e)

{
}

private void Application_UnhandledException(object sender,

ApplicationUnhandledExceptionEventArgs e)
{
}

For ASP.NET developers, the above code will look familiar. This is similar to the aplication
level event handlers in Global.asax.

Page.xaml file
This chapter gives an introduction to the Page.xaml file automatically created by Visual
Studio while creating a Silverlight project.

When you create a Silverlight project using Visual Studio 2008, it creates a default xaml file
called "Page.xaml". This is just a dummy start page created by Visual Studio and it does not
contain any visible UI elements. The default content of the page.xaml file looks like this:
<UserControl x:Class="MySilverlightApp.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">

</Grid>
</UserControl>

The above code shows a user control and a Grid control. The UserControl is a high level
control that holds all other UI elements in a xaml file.

The Grid control is used as a layout panel and it can hold other UI elements. All UI elements
in a .xaml control must be placed within a layout panel. There 3 different types of layout
panels available in Silverlight 2.0. You will learn more about layout controls in a later
chapter.

When you compile your Silverlight Application project, it will compile all .xaml files and
various other resources in to a single assembly file. This assembly file will have the extension
.xap and will have the same file name as your project name.

To place your Silverlight control in a web page, you must refer to this .xap file in your web
page. When the .xap file is referred in a web page, the default .xaml page will be shown.
Based on user actions, you may open or close various .xaml files included in your .xap
assembly (Silverlight Application project).

Getting started with XAML tags

This chapter gives an introduction to the XAML tags in Silverlight applications.

Let us add a xaml tag to your Page.xaml file and see how it works.

Open page.xaml file from your Visual Studio project and place the following code within the
Grid element:

<Rectangle Fill="Blue" Width="100" Height="100"/>

Now compile and run the application. You can see a blue rectangle displayed in your web
page.

As demonstrated above, the elements in a Silverlight xaml page are declared using XAML
tags. Silverlight 2 offers several XAML tags including common form tags like textbox,
button etc and various other UI elements like rectangle.

One nice thing about Visual studio is, it will show you a preview of the page as you type the
xaml tags. When you complete typing the above xaml tags in your .xaml page, you will see
the design preview in Visual Studio as shown below:
You can swap the position of the code and preview by pressing the icon with 2 arrows in the
middle of the screen (between the tabs "XAML" and "Design". Also, you can use the icons
on the right end between the code and design panes to change the position of the code pane
and design preview.

How to place a Silverlight control in a web

page ?
This chapter explains how to place silverlight controls in a web page.

Each Silverlight Application project can have multiple .xaml pages. When you create a new
Silverlight Application project, Visual Studio creates a default .xaml file called Page1.xaml.
To add more .xaml pages, right click on the project in the Solution Explorer and select "Add"
and "New Item". Then select "Silverlight User Control"

One or more Silverlight Applications can be placed in a web page using xaml tags as shown
below:
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApp.xap"
Width="300" Height="300" />

In the above tag, the attribute "source" represents the name of the xap file which is the
compiled output of the Silverlight project. The .xap files contains the compiled version of
all .xaml files included in the Silverlight Application project.

When you compile the Silverlight Application project, it will be compiled to an assembly
with the extension .xap. For example, if your Silverlight project name is
"MySilverlightControl", when compiled, it will produce the assembly
MySilverlightControl.xap

Each Silverlight project can have multiple .xaml files. Each .xaml file is like a page or form
by itself. When you place a Silverlight Application in a web page, only one .xaml control will
be visible at a time. Based on various user actions, you may dynamically open various .xaml
pages (Just like you open forms in a windows application).

How to set default .xaml page in a

Silverlight control ?
This chapter demonstrates how to change the default .xaml page used in a Silverlight
control

Each Silverlight project can have multiple .xaml files. However, only one .xaml file will be
visible at a time.

When you create a Silverlight project in Visual Studio, it will create a .xaml file called
"Page1.xaml" by default and this .xaml control will be displayed by default when you open
the web page.

You can change the default .xaml page by setting the property "Application.RootVisual".

To try this, add a .xaml file called "Page2.xaml" in your silverlight project.

Now, open your App.xaml.cs file in the Silverlight project. Look at the Application_Startup
event handler. There you can see the default .xaml page being set. To change the default
.xaml page, you have to specify the name of the class used in the .xaml page and set it to the
Application.RootVisual property as shown below:
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Page2();
}

After you change the value here, compile the application and run. When the web page is
opened, you can see that the new .xaml control is displayed in the web page.

How to open XAML pages from another

XAML page ?
This chapter shows how to open a xaml page from another xaml page.

In a Silverlight application, you can have multiple XAML pages. When you use the .xap file
in the web page, only one XAML control will be displayed at a time. The default XAML file
displayed is determined by the following code in the App.xaml file:
this.RootVisual = new Page1();

You can change the above line to the class name of any oher xaml file to open that file by
default.

Another scenario is, you may want to open different xaml files from the default xaml page.
For example, consider that you have a xaml control that prompt user to enter login
information. After the login credentials are validated, you may want to redirect to another
xaml file when the user click the "Submit" button.

This can be done by setting the "Content" property of the xaml page.
private void SubmitButton_Click(object sender, RoutedEventArgs e)
{
this.Content = new NewXamlPage();
}

The above code shows how to set the "Content" property of the xaml control in the button
click event handler. When the user click on the submit button, the new xaml file
(NewXamlpage) will be opened and original xaml file will be recycled.
Open a specific xaml page from a
Silverlight control
This chapter shows how to open a specific xaml file from a Silverlight control which
include multiple xaml pages.

Each Silverlight application project may include multiple xaml pages. When you refer to a
.xap file from a web page, the xaml page set using the Application.RootVisual property will
be displayed by default.

There may be cases where you want different XAML files to be displayed when you refer to
the same .xap file from different web pages. You can do this by passing the xaml file name or
some other kind of identification using InitParameters property of the Silverlight control.
This property can be set to the Silverlight control from the web page. The value set from web
page will be read by the Silverlight control and appropriate xaml page will be opened.

To demonstrate this, let us create a sample Silverlight project with the name
"OpenSpecificXaml". (You can read the steps to create a new Silverlight project.)

After you compile and build your project, place the Silverlight control in your web page as
shown below:

<asp:Silverlight
InitParameters="PageName=Page1"
ID="Xaml1"
runat="server"
Source="~/ClientBin/OpenSpecificXaml.xap"
MinimumVersion="2.0.30923.0"
Width="100%" Height="100%" />

In the above code, see the code:

InitParameters="PageName=Page1"

Here we are setting the property "InitParameters" with a key-value pair indicating which
xaml page we want to open by default.

Now, we will read this property in the App.xaml file and set the appropriate page to the
Application.RootVisual property. Here is the sample code to use in the App.xaml.cs to
achieve this:

private void Application_Startup(object sender, StartupEventArgs e)

{
IDictionary parameters = e.InitParams;

if (parameters == null)
{
// No parameter passed.. open the default xaml
this.RootVisual = new DefaultPage();
}
 else if (parameters["PageName"] == "Page1")
{
this.RootVisual = new Page1();
}
else if (parameters["PageName"] == "Page2")
{
this.RootVisual = new Page2();
}
else
{
// Open the default xaml
this.RootVisual = new DefaultPage();
}
}

You can download a sample project demonstrating how to pass xaml page name
using the InitParameters property.

Layout controls in Silverlight

This chapter explains various layout controls available in Silverlight 2.0

There are 3 different types of layout panels provided by Silverlight. The Grid control is one
of them.

These are the 3 different types of layout panels provided by Silverlight:

1. Canvas - Position child elements absolutely in x,y space.

2. StackPanel - Position child elements relative to one another in horizontal or vertical stacks.

3. Grid - Position child elements in rows and columns.

You have to add a layout panel to every xaml page we create. All other UI elements must be
added inside one of the layout panels. Each page can have exactly one layout panel control.

Layout panel controls in Silverlight -

Canvas
This chapter explains the Canvas control in Silverlight.

Silverlight offers 3 panel controls which can be used to define the layout and positioning of
the controls in a page. Canvas is one of the available layout controls.

Canvas defines a area within which you can place other controls by specifying the x and y
coordinate position. It is possible to overlap multiple controls within a canvas. Contrary to
regular HTML, when controls are overlapped in a Canvas, overlapped controls can hide other
controls.

When controls are placed within a Canvas, the x and y coordinates must be specified for each
control using the attributes Canvas.Left and Canvas.Top

This sample shows how to place a rectangle control within a Canvas by specifying x and y
coordinates:
<Canvas Width="500" Height="500" Background="White">
<Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100"
Height="100" />
</Canvas>

The above xaml tags defines a rectangle, filled with green color, of size 100x100 pixels. The
rectangle will be placed 25 pixels from the left of the Canvas and 40 pixels from the top of
the Canvas.

The below example shows 3 rectangles overlapped each other:

<Canvas Width="500" Height="500" Background="White">
<Rectangle Canvas.Left="25" Canvas.Top="40" Fill="green" Width="100"
Height="100" />
<Rectangle Canvas.Left="50" Canvas.Top="65" Fill="yellow" Width="100"
Height="100" />
<Rectangle Canvas.Left="75" Canvas.Top="90" Fill="red" Width="100"
Height="100" />
</Canvas>

The below images shows how the output look like:

How to display image in a Silverlight

control ?
This tutorial shows how to display an image in a Silverlight control.

In Silverlight, the image control can be used to display images. The usage is pretty straight
forward. The syntax of using Image control is shown below:
<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" >
<Image x:Name="MyImage" Source="/images/basket.jpg" Stretch="Uniform"
></Image>
</Grid>

Image.stretch Property

The Stretch attribute can have the following values:

1. None

This will do no modification on the size of the image. If the image size is more than the size
of the container, then the image will be cut to fit in the container.

2. Fill

In this case, the image will be expanded to fill the region of the container. The aspect ratio
(proportion of width and height) will not be maintained.

3. Uniform

This is the default value. In this case, the image will be resized to fit the container, but the
aspect ratio will be maintained. So, there may be blank space in the container depending on
the width and height of the image and container.

4. UniformToFill

In this case, the image will be resized and will fill the container, but aspect ratio will be
maintained by trimming some portion of the image if required.

Width and Height properties

The width and height properties of the image can be used to override the stretch property. If
width and height properties are specified, then Stretch property will be ignored.

Image.Clip property

The clip property of Image control can be used in Silverlight to make certain portion of the
image visible and hide some part of it.

See an example of how to display an image in a elliptical form:

<Grid x:Name="Layout" Width="200" Height="220"

Background="YELLOW" >
<Image x:Name="MyImage" Source=" Images/AppleTree.png"
Stretch="Fill">
<Image.Clip>
<EllipseGeometry x:Name="Ellipse" RadiusX="100"
RadiusY="100" Center="100,110"/>
</Image.Clip>
 </Image>
</Grid>

The above code will produce an image like this:

How to drag and move an image or object

in Silverlight ?
This tutorial shows how to drag and move an image within a Silverlight canvas control.

The control that you like drag or move with the mouse can be embedded within a Border
control and then handle the mouse down, up and move events to make the object move within
your layout panel.

See sample .xaml code:

<Canvas x:Name="LayoutRoot" Background="White">

<Border x:Name="border1"
Canvas.Top="100"
Canvas.Left="10"
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove">

<Image x:Name="MyImage" Source="images/Basket.png"

Stretch="Uniform" ></Image>
</Border>

</Canvas>

In the above code, a Border control is placed in the Canvas. The most important code to note
is:
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove"

The above lines define 3 events that we like to handle. As the name indicates, we are
handling the mouse button down, mouse button up and mouse move events for the left
mouse.
In the code behind, when the left button is pressed, we will set a global variable to indicate
that user has started moving. In the mouse move event, we will get the current location of the
mouse pointer and then set the new position for the border control. When the left mouse
button is released, we will reset the global variable so that we will not move the object any
more.

See the code for the code behind class:

public partial class Page : UserControl
{
// Global variable to indicate if user has clicked border
// and started/stopped moving.
private bool moving = false;

private double offSetX;

private double offSetY;

public Page()
{
InitializeComponent();
}

private void border1_MouseLeftButtonDown(object sender,

MouseButtonEventArgs e)
{
// Left mouse button clicked within border. start moving.
moving = true;

Point offset = e.GetPosition(border1);

offSetX = offset.X;
offSetY = offset.Y;
}

private void border1_MouseLeftButtonUp(object sender,

MouseButtonEventArgs e)
{
// Left mouse button release. Stop moving.
moving = false;
}

private void border1_MouseMove(object sender, MouseEventArgs e)

{
if (moving)
{
// Get the new mouse pointer position
Canvas parent = (Canvas)this.border1.Parent;
Point p = e.GetPosition(parent);
double x = p.X - offSetX;
double y = p.Y - offSetY;

// Set the new position for the border control.

this.border1.SetValue(Canvas.LeftProperty, x);
this.border1.SetValue(Canvas.TopProperty, y);
}
}
}

You can download a sample project for this tutorial.

How to pass parameters to Silverlight
controls from ASP.NET pages ?
In this chapter, you can learn how to pass parameters to Silverlight controls from
within your aspx pages

You can pass parameters from your aspx pages and html pages to the Silverlight controls.
This chapter explains how to pass parameters to Silverlight controls from your aspx page and
code behind files.

InitParameters

The Xaml page user control has a property called InitParameters. You can set a value in the
form of key-value pairs from your ASPX pages. Since this property accepts key-value pairs,
you can pass any set of string values.

How to set InitParameters

Example - Set InitParameters property from ASPX page:

<asp:Silverlight
ID="Xaml1"
runat="server"
Source="~/ClientBin/MySilverlightApp.xap"
InitParameters="City=Houston,State=Texas,Country=USA"
Width="300"
Height="300" />

You can set this property from the code behind file of your ASPX page as well.

Example - Set InitParameters property from the code behind file:

Xaml1.InitParameters = "City=Houston,State=Texas,Country=USA";

How to retrieve the InitParameters value ?

The value you pass to a Silverlight control through the InitParameters property can be
retrieved from the Application_Startup even handler in the App.xaml page.
private void Application_Startup(object sender, StartupEventArgs e)
{
IDictionary parameters = e.InitParams;

this.RootVisual = new Page1();

Now, in most cases, you may want to pass this value to the xaml page itself instead of doing
anything with in it the App.xaml.
Pass parameters from App.xaml to other pages

To pass the parameters from the App.xaml pages to other pages, you must modify the
constructor of xaml page class to accept parameters.
private IDictionary<string, string> parameters = null;

public Page1()
{
InitializeComponent();
}

public Page1(IDictionary<string, string> p)

{
this.parameters = p;

InitializeComponent();
}

The above sample shows an additional constructor added which takes a parameter of type
IDictionary and then sets the value to a member variable.

Now go back to your App.xaml and pass the parameters to the page:
private void Application_Startup(object sender, StartupEventArgs e)
{
IDictionary parameters = e.InitParams;

this.RootVisual = new Page1(parameters);

Use the IDictionary parameter values in the XAML pages

If you have followed the above steps correctly, you should be able to access the IDictionary
values in your XAML page.
textblock1.Text = this.parameters["City"];

Here is the complete code from the XAML page:

<UserControl x:Class="MySilverlightApp.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" Loaded="UserControl_Loaded">

<Grid x:Name="LayoutRoot" Background="White">

<TextBlock x:Name="textblock1" Width="200" Height="30"></TextBlock>

</Grid>
</UserControl>

In the code behind file for your page1.xaml, you can set the Text for the textblock1 control as
shown below:
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
textblock1.Text = parameters["City"];
}

You can download a sample project for this tutorial.

How to call WCF methods from Silverlight

controls ?
This tutorial and the attached sample project demonstrates how to access server side
data from Silverlight controls using WCF.

Silverlight controls get executed on the client browser. It does not have direct access to the
data on the serverside. So, if your Silverlight controls need to retrieve data from database or
other data sources on the server, we have to use various approaches like WCF calls or depend
on the InitParameters property of the Silverlight controls.

The recommended approach to get server side data to Silverlight controls is using WCF
method calls. The most important benefit is the type safety.

The following sample demonstrates how to use WCF to retrieve data from Server side to
Silverlight controls on the client side.

In this sample, we will create a Silverlight project and another web project to host the
Silverlight control. Also, we will add a WCF Service to the web project.

Silverlight with WCF sample

Create a new Silverlight project with a web project to host the Silverlight control.

Open Visual Studio and select the menu "File" > "New" > "Project"
Select the Project Type as "Silverlight" under your favorite language and choose the template
"Silverlight Application". I have selected Visual C# as the tutorials here.

I have named my project as "MySilverlightApp" and have selected the option "Create
directory for solution" so that all my project files are organized within a folder structure.
In the next screen, choose the option "Add a new web to the solution for hosting the control".

Right click on the web project in the Solution Explorer and select "Add New Item".

Select the category "Silverlight" from the left panel in the dialog box.

From the right panel, select the template "Silverlight-enabled WCF Service"

Choose the default name "Service1.svc" and press the "Add" button.

(The current beta version of Visual Studio may show you an error object reference not set to
an instance .... Ignore this error and proceed.)

You can see the below code:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public void DoWork()
{
return;
}
}

Explaining the concepts of WCF is beyond the scope of this tutorial. However, I just want to
point out 2 things here:
[ServiceContract(Namespace = "")]
- This attribute above the class name indicates that this class is a WCF service.
[OperationContract]
- This attribute above the method name indicates that this method can be called from a
WCF client.

Calling WCF from Silverlight controls -

Part II
This chapter is a continuation of the previous chapter and explains how to call WCF
methods from the Silverlight controls.

This chapter is the continuation of the previous chapter. If you havent read the previous
chapter, please read it before you continue here.

Let us add a new method to our WCF service class, decorated with the [OperationContract]
attribute. Add a method as shown below:
[OperationContract]
public string GetName()
{
return "John";
}

As you can see, it is a simple method which returns a hard coded name.

Open your solution explorer. Right click on the file "Service1.svc" and select "Set as Startup
Page".

Now run the application by pressing Ctrl + F5 (or, using the menu "Debug" > "Start Without
Debugging")

The browser will be opened and Service1 meta data will be displayed. Ignore the content in
the page, but copy the URL from the browser. The URL will look something like this:
http://localhost:1873/Service1.svc
The port number may be different in your case, but that is OK.
Return to your Solution Explorer in Visual Studio. Right click on your Silverlight project (not
web project) and select "Add Service Reference".

In the field for Address, specify the URL you copied from the browser and press "GO".

In the bottom left, change the namespace to "MySampleService".

You should see a screen like this:

Press "OK" to add the service reference.

Now you can call our WCF service from the Silverlight client.

To test this, follow these steps:

1. Open the Page1.xaml file and add a textblock to display the string returned from the WCF
method call.

2. Add an event handler for the "Loaded" event of the UserControl.

Complete code from Page1.xaml is given below:

<UserControl x:Class="Silverlight_With_WCF.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300"
Loaded="UserControl_Loaded">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="textblock1" Width="200" Height="30"></TextBlock>
</Grid>
</UserControl>
Now go to the code behind file (Page1.xaml.cs) and add the WCF service call as shown
below:

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{
MySampleService.Service1Client client = new
MySampleService.Service1Client();
client.GetNameCompleted += new EventHandler(client_GetNameCompleted);
client.GetNameAsync();
}
void client_GetNameCompleted(object sender,
MySampleService.GetNameCompletedEventArgs e)
{
textblock1.Text = (string)e.Result;
}

Open the web project in Solution Explorer and set the Silverlight test page as the startup
page. Now run the project. You can see that the WCF service is called from Silverlight client
and the result is displayed in the browser. (In our sample, the result from the WCF call is the
name "John" and this name will be displayed in the screen).

You can download a sample project for this tutorial.

Access Session variables from Silverlight

controls
This tutorial explains how to access Session variables from a Silverlight control.

Silverlight controls are client side controls. They get executed on the browser on the client
machines and they do not have direct access to the server side data.

Since Session variables live on the web server, Silverlight controls cannot access them
directly. However, there are several ways Silverlight can retrieve the server side data
including Session information.

Let us explore some of the possible options to make Session data available to Silverlight
controls.

Option 1: Push session data to the client in the form of VIEWSTATE data or data for UI
controls. The dis advantage with this approach are no type safety, only minimal data can be
sent, data is visible to users etc.

Option 2: Use the InitParameters property of the Silverlight controls to push data to the
Silverlight controls. This approach also have problems like no type safety, only minimal data
can be sent etc.

Option 3: Use WCF service calls to retrieve data from server. Using this approach, Silverlight
controls can call WCF services to retrieve larger volume of data without having the
disadvantages of the above 2 options.
To use WCF to get Session data from server to Silverlight controls, all you need to do is
create a simple WCF service. This service should have a method that takes the session key as
input parameter and return the corresponding value from the session, as shown below:
[OperationContract]
public object GetSessionVariable(string key)
{
return System.Web.HttpContext.Current.Session[key];
}

Create WCF service to retrieve session data

- part II
This chapter explains how to create a WCF service to return Session data to Silverlight
controls.

This chapter is the continuation of the previous chapter. If you havent read the previous
chapter, please read it before you continue here.

Create a new Silverlight project with a web project to host the Silverlight control.

Steps:

1. Open Visual Studio and select the menu "File" > "New" > "Project"

2. Select the Project Type as "Silverlight" under your favorite language and choose the
template "Silverlight Application". I have selected Visual C# as the tutorials here. I have
named my project as "AccessSessionFromSilverlight" and have selected the option "Create
directory for solution" so that all my project files are organized within a folder structure.

3. In the next screen, choose the option "Add a new web to the solution for hosting the
control".

4. After Visual Studio creates the solution, right click on the web project in the Solution
Explorer and select "Add New Item".

5. Select the category "Silverlight" from the left panel in the dialog box. From the right panel,
select the template "Silverlight-enabled WCF Service"

6. Choose the default name "Service1.svc" and press the "Add" button.

7. You can see the below code:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public void DoWork()
{
 return;
}
}

Add another mthod as shown below:

[OperationContract]
public object GetSessionVariable(string key)
{
return System.Web.HttpContext.Current.Session[key];
}

8. Open your solution explorer. Right click on the file "Service1.svc" and select "Set as
Startup Page".

9. Now run the application by pressing Ctrl + F5 (or, using the menu "Debug" > "Start
Without Debugging")

The browser will be opened and Service1 meta data will be displayed. Ignore the content in
the page, but copy the URL from the browser. The URL will look something like this:
http://localhost:1873/Service1.svc
The port number may be different in your case, but that is OK.

10. Return to your Solution Explorer in Visual Studio. Right click on your Silverlight project
(not web project) and select "Add Service Reference".
In the field for Address, specify the URL you copied from the browser and press "GO".
In the bottom left, change the namespace to "MySampleService".
Press "OK" to add the service reference.

Now you can call our WCF service from the Silverlight client.

To test this, follow these steps:

1. Open the Page1.xaml file and add a textblock to display the string returned from the WCF
method call.

2. Add an event handler for the "Loaded" event of the UserControl.

Complete code from Page1.xaml is given below:

<UserControl x:Class="Silverlight_With_WCF.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300"
Loaded="UserControl_Loaded">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="textblock1" Width="200" Height="30"></TextBlock>
</Grid>
</UserControl>

Now go to the code behind file (Page1.xaml.cs) and add the WCF service call as shown
below:
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
MyService.Service1Client client = new
AccessSessionFromSilverlight.MyService.Service1Client();
client.GetSessionVariableCompleted += new
EventHandler(client_GetSessionVariableCompleted);
client.GetSessionVariableAsync("Name");
}

void client_GetSessionVariableCompleted(object sender,

AccessSessionFromSilverlight.MyService.GetSessionVariableCompletedEv
entArgs e)
{
if (e.Result == null)
textblock1.Text = "Session variable not set";
else
textblock1.Text = e.Result.ToString();
}

Open the web project in Solution Explorer and set the Silverlight test page as the startup
page. Now run the project. You can see that the WCF service is called from Silverlight client
and the result is displayed in the browser.

You can download a sample project for this tutorial.

How to call Javascript functions from

Silverlight code ?
This Silverlight shows sample how to call Javascript functions from Silverlight controls
code behind file

One of the advantages of Silverlight is, it has access to the Html document of the web page in
which it is hosted. This enables Silverlight to access HTML elements in the page and also
call Javascript methods.

The following steps shows how to call a Javascript method from Silverlight.

Open the ASP.NET or HTML page which hosts the Silverlight control. Add the Javascript
method as shown below:

<script language="javascript"&Gt;
function SayHello()
{
alert("Hello from JavaScript, invoked by Silverlight");
}
</script>

Now, open your XAML control file and add a button control as shown below:

<Grid x:Name="LayoutRoot" Background="White">

<Button x:Name="btnSayHello" Content="Say Hello"
Click="btnSayHello_Click"></Button>
</Grid>

Go to the code behind file for the XAML Page and add the event handler for the button click
event:
private void btnSayHello_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("SayHello");
}

In order to use the HtmlPage class, you need to include the System.Windows.Browser
using System.Windows.Browser;

You are done. Run your Silverlight application and see. When you click on the button in the
Silverlight control, you can see the popup message from the Javascript function.

You can download a sample project for this tutorial.

How to show a popup layer within a

Silverlight web page?
In this chapter, you will learn how to display a non-annoying popup layer in a web page
using Silverlight.

Add a button to your xaml page as shown below:

<Grid x:Name="LayoutRoot" Background="White" >
<Button Width="100" Height="50" x:Name="showPopup"
Click="showPopup_Click" Content="Show Popup" />
</Grid>

Add the following code to your code behind file (page.xaml.cs)

Popup p = new Popup();
private void showPopup_Click(object sender, RoutedEventArgs e)
{
// Create a panel control to host other controls
StackPanel panel1 = new StackPanel();
panel1.Background = new SolidColorBrush(Colors.Gray);

// Create a button
Button button1 = new Button();
button1.Content = "Close";
button1.Margin = new Thickness(5.0);
button1.Click += new RoutedEventHandler(button1_Click);

// Create a text label

TextBlock textblock1 = new TextBlock();
textblock1.Text = "The popup control";
 textblock1.Margin = new Thickness(5.0);

// Add text label and button to the panel

panel1.Children.Add(textblock1);
panel1.Children.Add(button1);

// Now, make the panel a child of the popup so that

// the panel will be shown within the Popup when displayed.
p.Child = panel1;

// Set the position.

p.VerticalOffset = 25;
p.HorizontalOffset = 25;

// Show the popup.

p.IsOpen = true;
}

void button1_Click(object sender, RoutedEventArgs e)

{
// Close the popup.
p.IsOpen = false;
}

Now run the application. You can see the page with a button. When you click on the button, a
popup layer will appear with a text label and a button in it. When you click on the button in
the popup, it will close the popup.

Display Tooltip for Silverlight controls

This chapter explains how to display tool tips for Silverlight controls using
ToolTipService class.

Silverlight offers a class called "ToolTipService" which can be used to display tooltips for
Silverlight controls. This class can be attached to most of the UI elements in Silverlight to
display tooltips.

Simple Tooltip text

The below sample code shows how to display a simple text tooltip for a Button control:
<Button Width="60" Height="20" Content="My Button">
<ToolTipService.ToolTip>
<ToolTip Content="This is tool tip for Button"></ToolTip>
</ToolTipService.ToolTip>
</Button>

See this example which sets a tooltip for a textbox control:

<TextBlock Width="60" Height="20" Text="My Text">
<ToolTipService.ToolTip>
<ToolTip Content="This is tool tip for TextBlock"></ToolTip>
</ToolTipService.ToolTip>
</TextBlock>
Display rich UI elements in tooltip

Silverlights ability to support UI elements in tooltip can be used to provide great user
experience. We can use almost any UI element within a Tooltip. See various examples below.

Display image within a tooltip

This sample code shows how to display an image within a tooltip in Silverlight:
<TextBox Width="60" Height="20" Text="My Text">
<ToolTipService.ToolTip>
<Image Source="http://www.dotnetspider.com/images/spiderlogo.jpg"
></Image>
</ToolTipService.ToolTip>
</TextBox>

Tooltip for entire Silverlight control

You can set a tooltip for the entire Silverlight control. See the below sample code:
<UserControl x:Class="SilverlightToolTip.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">

<StackPanel x:Name="LayoutRoot" Background="White">

</StackPanel>

<ToolTipService.ToolTip>
<ToolTip Content="This is tool tip for entire control"></ToolTip>
</ToolTipService.ToolTip>

</UserControl>

Programmatically set Tooltip

You can set or change Tooltips from the code behind file. This example shows how to set a
Tooltip for a button control from the code behind file:
ToolTipService.SetToolTip(MyButton, "This is new tooltip");

How to play audio or sound files from

Silverlight
This sample shows how to play an audio file from Silverlight controls.

Silverlight provides a class called MediaElement which can be used to play audio or video
files.
Silverlight MediaElement supports playing video/audio files in MP3 and WMV formats. The
current version of Silverlight does not support .WAV files and .AVI files.

If you attempt to use .WAV or .AVI files with the MediaElement control, you will get the
following error:

Error: Unhandled Error in Silverlight 2 Application <Application Name>Code: 3001

Category: MediaError
Message: AG_E_INVALID_FILE_FORMAT

In order to play an .MP3 or .WMV file, you must first include the file in your Silverlight
project and then set it as an Embedded Resource.

In order to make an audio file an embedded resource, right click on the file in your project
and select 'properties'. Then set the 'Build Action' as 'Embedded Resource. This will make the
audio file embedded in to your .XAP file when compiled.

Once you make the audio file as an embedded resource, you can play the file either by
defining the MediaElement within your XAML or by using the code. Here is the sample code
to play an audio file:
MediaElement media = new MediaElement();
Stream stream =
Assembly.GetExecutingAssembly().GetManifestResourceStream("MyNamespace.Soun
d1.wav");
media.SetSource(stream);
media.AutoPlay = false;

media.Stop();
media.Play();

Let us analyze the code.

Stream stream =
Assembly.GetExecutingAssembly().GetManifestResourceStream("MyNamespace.Soun
d1.wav");

The above line retrieves the audio stream from the executing assembly. Remember that the
audio file is embedded in to the assembly since we set the Build Action as 'Embedded
Resource.

In the above code, "MyNamespace" represents the namespace of your application.

"Sound1.wav" is the name of the audio file, assuming the file is located in the root of the
application. If the file is within a sub directory, you may have to include the directory name
as well, separated by a period.
media.SetSource(stream);

In the above line, we are setting the source for the media player.
media.AutoPlay = false;

The above line says that the player should not play the audio until we explicitly start it to
play.
media.Stop();
media.Play();

In the above code, you can see that I am doing a .Stop() before .Play(). The Stop is required
only if you have to play the same MediaElement more than once.

How to display custom Rightclick context

menu in Silverlight controls?
This sample shows how to intercept the default context menu and display a custom
context menu in a Silverlight control

When you right click on any Silverlight controls in a web page, it display the default
Silverlight context menu which with a single option view the Silverlight Configuration. You
may intercept this context menu and display your own menu.

The first step you have to do is, go to the aspx page where you are hosting the Silverlight
control and set the property "Windowless" to "True"
<asp:Silverlight ID="Xaml1"
runat="server"
Windowless="true"
Source="~/ClientBin/ContextMenu.xap"
MinimumVersion="2.0.30923.0"
Width="100%" Height="100%" />

Now, you can use the "AttachEvent" property of the browsers Document object to attach
your own event handler to the "oncontextmenu" event from your xaml pages.

Sample code:
System.Windows.Browser.HtmlPage.Document.AttachEvent("oncontextmenu",
this.OnContextMenu);

You may attach your event handler from the constructor of your XAML page. You can even
do this from the constructor of your App.xaml, in which case the event handler will be
triggered from every xaml page you use in the project.

And here is the code to handle the event:

private void OnContextMenu(object sender,
System.Windows.Browser.HtmlEventArgs e)
{
MessageBox.Show("You click at " + e.OffsetX + "," + e.OffsetY);
 e.PreventDefault();
}

The above code sample displays the coordinates you clicked. You may replace that code to
display your own menu or popup window.

The code e.PreventDefault();" prevents the events from being propagated to other child
controls

You can download a sample project for this tutorial.

Introduction to DataBinding in Silverlight

This chapter introduces databinding in Silverlight with some examples.

DataBinding can be used to dynamically bind properties of objects to properties of UI

controls in Silverlight.

For example, take a simple Silverlight control which accepts user's name and address. You
can create a xaml control which has the following text fields:

1. Name
2. Address1
3. Address2
4. City
5. State
6. Zip code

Here is the XAML which defines a grid and places the appropraite controls for our sample:
<Grid x:Name="LayoutRoot" Background="White"
Loaded="LayoutRoot_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

<TextBlock Text="Name" Grid.Row="0" Grid.Column="0"></TextBlock>

<TextBlock Text="Address 1" Grid.Row="1"
Grid.Column="0"></TextBlock>
<TextBlock Text="Address 2" Grid.Row="2"
Grid.Column="0"></TextBlock>
<TextBlock Text="City" Grid.Row="3" Grid.Column="0"></TextBlock>
 <TextBlock Text="State" Grid.Row="4" Grid.Column="0"></TextBlock>
<TextBlock Text="Zipcode" Grid.Row="5" Grid.Column="0"></TextBlock>

<TextBox x:Name="txtName" Text="{Binding Name, Mode=TwoWay}"

Grid.Row="0" Grid.Column="1"></TextBox>
<TextBox x:Name="txtAddress1" Text="{Binding Address1,
Mode=TwoWay}" Grid.Row="1" Grid.Column="1"></TextBox>
<TextBox x:Name="txtAddress2" Text="{Binding Address2,
Mode=TwoWay}" Grid.Row="2" Grid.Column="1"></TextBox>
<TextBox x:Name="txtCity" Text="{Binding City, Mode=TwoWay}"
Grid.Row="3" Grid.Column="1"></TextBox>
<TextBox x:Name="txtState" Text="{Binding State, Mode=TwoWay}"
Grid.Row="4" Grid.Column="1"></TextBox>
<TextBox x:Name="txtZipcode" Text="{Binding Zipcode, Mode=TwoWay}"
Grid.Row="5" Grid.Column="1"></TextBox>

<Button Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Width="50"

Content="Save" x:Name="btnSave" Click="btnSave_Click"></Button>
</Grid>

The above XAML defines a grid with 7 rows and 2 columns. The controls are places in
appropriate rows and columns using the Grid.Row and Grid.Column property of individual
controls. When placed in a web page, our Silverlight control will look like this:

Now create a class called "Address" which has properties representing various fields we
need. See the sample code for the "Address" class:
public class Address
{
public string Name { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zipcode { get; set; }
}

Go to the code behind file of the xaml class and create an instance of the Address class as
shown below:
Address address;

In the constructor of the XAML page class, initialize the Address class and bind it to the UI
elements as shown below:
address = new Address();
txtName.DataContext = address;
txtAddress1.DataContext = address;
txtAddress2.DataContext = address;
txtCity.DataContext = address;
txtState.DataContext = address;
txtZipcode.DataContext = address;

In the above code, we are setting the DataContext property of each UI control to our
"Address" object. But how do the control know which property of the address object to be
used ? This is handled in the XAML. Take a look at the "txtAddress1" control. You can see
that the property "Text" is set as shown below:
Text="{Binding Address1, Mode=TwoWay}"

The above line defines that we are using data binding for the "Text" property of this control,
and it will use the property "Address1" of whatever object it is bound to. Also, it states that
the Mode is "TwoWay" which means the value will be read from the object and set to the
"Text" property and also when the value is changed in the textbox control, it is saved back to
the data source. In our case, we are binding our Address object to the textbox control. When
loaded, it will display the default value from our object in the textbox. When the value is
changed by the user, the datasource object will be updated with the new value from text box.

Typically, when we add a new address, the object will be initialized to empy values and the
textboxes will be empty. When we edit an existing address, the object will have values
populated from database and it will be displayed in the UI controls using the databinding.
When values are modified by the user, the datasource object will be automatically modified.
All we have to do is, save the modified datasource object in to the database.

You can download a sample project for this tutorial.

How to set a background image for your

Sivlerlight control
This tutorial shows how to set a background image for the Silverlight controls using an
ImageBrush element.

In Silverlight, the ImageBrush element can be used to fill an area with an image. The area
could be various shape elements or the entire Canvas itself.
This code sample shows how to use the ImageBrush to set a background image for the
Silverlight canvas control.
<Canvas x:Name="SnowCanvas" Width="600" Height="480">
<Canvas.Background>
<ImageBrush x:Name="backgroundImageBrush"
Stretch="UniformToFill"
ImageSource="Images/Background.png">
</ImageBrush>
</Canvas.Background>
</Canvas>

The below example shows how to Fill an ellipse area with an image control. In addition, I am
using the Mouse Enter and Mouse Leave events to dynamically change the image used to fill
the Ellipse shape.
<Ellipse x:Name="ellipse1"
MouseEnter="ellipse1_MouseEnter"
MouseLeave="ellipse1_MouseLeave"
Width="100"
Height="100">
<Ellipse.Fill>
<ImageBrush x:Name="imageBrush1"
Stretch="UniformToFill"
ImageSource="Images/Flower2.png">
</ImageBrush>
</Ellipse.Fill>
</Ellipse>

Here is the C# code to handle the Mouse Enter and Mouse Leave events and dynamically
change the image in these events:
private void ellipse1_MouseEnter(object sender, MouseEventArgs e)
{
ImageBrush brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new
Uri(@"Images/Flower1.png", UriKind.Relative)); ;
ellipse1.Fill = brush;
}

private void ellipse1_MouseLeave(object sender, MouseEventArgs e)

{
ImageBrush brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new
Uri(@"Images/Flower2.png", UriKind.Relative)); ;
ellipse1.Fill = brush;
}

Javascript to detect if Silverlight is installed

This code sample shows how to use Javascript to determine if Silverlight is installed on
the client browser.
The current versions of Internet Explorer consider Silverlight as a kind of ActiveX control.
So, in order to determine if Silverlight is installed, we can attempt to create this ActiveX
control using Javascript. If it fails to create the ActiveX control, we can assume that
Silverlight is not installed.

For other browsers like Google Chrome, Netscape, FireFox, Safari etc, this can be
determined by looking in to the Plugin array of the navigator object. The Silverlight plugin is
installed with the name 'Silverlight Plug-In'.

The below sample code shows how to find if Silverlight is installed on the client browser or
not.

<script language="javascript">
var browser = navigator.appName; // Get browser
var silverlightInstalled = false;

if (browser == 'Microsoft Internet Explorer')

{
try
{
var slControl = new ActiveXObject('AgControl.AgControl');
silverlightInstalled = true;
}
catch (e)
{
// Error. Silverlight not installed.
}
}
else
{
// Handle Netscape, FireFox, Google chrome etc
try
{
if (navigator.plugins["Silverlight Plug-In"])
{
silverlightInstalled = true;
}
}
catch (e)
{
// Error. Silverlight not installed.
}
}

alert(silverlightInstalled);
</script>