SilverLight for Beginners
Hi Everyone,
Here i have done an article for Silverlight for the Beginners who have installed the silverlight and going to start work on this,
After installing everything that is needed to run/build Silverlight alpha application easily.
You can launch VS Orcas and select “Silverlight Project" from the new project dialogs.
I thought I would spend some time explaining what it creates…Test HTML Page:
This is the page that is run when you hit F5 in VS. This page hosts the Silverlight control that runs the application. This page refers to TestPage.html.js file.
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0014)about:internet -->
<head>
<title>Silverlight Project Test Page </title>
<script type="text/javascript" src="Silverlight.js">
</script>
<script type="text/javascript" src="TestPage.html.js">
</script>
</head>
<!-- Give the keyboard focus to the Silverlight control by default -->
<body onload="document.getElementById('SilverlightControl').focus()">
<div id="SilverlightControlHost" >
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
This page refers to TestPage.html.js and Silverlight.js files. These files create Silverlight browser plugin at runtime.
So far we have,
@Testpage.Html.js
@SilverLight.js
@Page.xaml
In Page.XAML we have code like,
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Basic.Page;assembly=ClientBin/Basic.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>
Root of this page is Canvas class and it sets various properties such as Height/Width/Background. One different thing from Silverlight 1.0 Beta is the x:Class attribute.
This attribute defines the fully qualified name of a class. That means it includes Namespace, Classname and relative path to assembly in which this class can be found.
This information is used to hookup the events that are specified in the markup. This means when parser (at runtime) comes across line Loaded="Page_Loaded". it will look for Page_Loaded method on the Basic.Page class that exists in the Basic.dll. Few people have asked question about why event handler don't work and it was because they were missing the x:Class attribute. If this method is not found then parser throws error and it shows up as follows…
Parser also uses this information to download the Basic.dll. So when parser sees the like x:Class or xmlns:Custom (for use of custom control), it asks the downloader to download the assembly required. If the assembly is already downloaded then it does not redownload it but otherwise downloader downloads the assembly and parser uses it to do the resolution. It uses Browser semantic to download the uploaded files rather than using the versioning information.
Now in Code-Behind File of Page.XAML,
TestPage.html: This is the page that is run when you hit F5 in VS. This page hosts the Silverlight control that runs the application. This page refers to TestPage.html.js file
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0014)about:internet -->
<head>
<title>Silverlight Project Test Page </title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
</head>
<!-- Give the keyboard focus to the Silverlight control by default -->
<body onload="document.getElementById('SilverlightControl').focus()">
<div id="SilverlightControlHost" >
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
This page refers to TestPage.html.js and Silverlight.js files. These files create Silverlight browser plugin at runtime.
TestPage.html.js: This javascript file contains the definition of createSilverlight() function. This function calls into Sys.Silverlight.createObjectEx from Silverlight.js file. Using this function, Page.xaml is also set as the starting page for the Silverlight plugin.
Silverlight.js: this javascript file contains the definition of Sys.Silverlight.createObjectEx that actually creates the browser plugin using information that is passed in.
Page.xaml: This file contains the XAML definition of the page that will be displayed.
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Basic.Page;assembly=ClientBin/Basic.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>
Root of this page is Canvas class and it sets various properties such as Height/Width/Background. One different thing from Silverlight 1.0 Beta is the x:Class attribute.
This attribute defines the fully qualified name of a class. That means it includes Namespace, Classname and relative path to assembly in which this class can be found.
This information is used to hookup the events that are specified in the markup. This means when parser (at runtime) comes across line Loaded="Page_Loaded". it will look for Page_Loaded method on the Basic.Page class that exists in the Basic.dll. Few people have asked question about why event handler don't work and it was because they were missing the x:Class attribute. If this method is not found then parser throws error and it shows up as follows…
Parser also uses this information to download the Basic.dll. So when parser sees the like x:Class or xmlns:Custom (for use of custom control), it asks the downloader to download the assembly required. If the assembly is already downloaded then it does not redownload it but otherwise downloader downloads the assembly and parser uses it to do the resolution. It uses Browser semantic to download the uploaded files rather than using the versioning information.
Page.xaml.cs: This is a code behind file that defines the class mentioned in x:Class attribute.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Basic
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
}
}
}
This file is interesting when you add something like this to Page.xaml
Just add like this,
<:Canvas x:Name="myCanvas" Height="50" Width="50"/>
This is the way you get intellisense when you type in myCanvas in Page.xaml.cs file,
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Basic {
public partial class Page
{
// variable declarations
Canvas myCanvas;
private void InitializeComponent()
{
myCanvas= this.FindName("myCanvas") as Canvas;
}
}
}
Thanks,
Mani
Reformat your resource to get it approved
remove space between & l t; and & g t;
++
Thanks and Regards
Meetu Choudhary
Sr. Editor