Create First Silverlight Application
To create Silverlight application Open Visual Studio 2010 => Create Project => Select Silverlight Application as Project Type from Templates.
There two options available to execute Silverlight application. You can execute your Silverlight application in .aspx pages(Asp.Net pages) or you can execute it on HTML pages. By default Microsoft provided two types of execution pages(both .aspx and HTML).
While creating the Silverlight application it will ask for "Hosting Page" or "Execution page". If we select the "Host the Silverlight Application in a new Website", Silverlight application will execute in a Asp.Net page otherwise it will execute in a HTML page.
Silverlight application will execute in client machine only, so Silverlight plug-in should be installed on client machine to run the Silverlight application.
In the Silverlight application we will get MainPage.xaml by default and this file have three modes. Those are Design Mode, XAML Mode and Code-behind window.
Design Mode: The Microsoft given flexible graphical features in the design mode, all Silverlight controls we can add in the Container using graphical features.
XAML Mode: The Microsoft designed Silverlight graphical tool using XAML. This Mark-up language supports only predefined tags, supports flexible graphical features & animations. This Mark-up language is Case sensitive, supports all Object Oriented Programming rules.
The Microsoft generated design mode control tags in the XAML mode. While implementing graphical features in the XAML mode, we can observe graphical features in the design mode as well as at run-time.
Code-behind Window: This windows supports C# features and XAML graphical features. When we are implementing graphical features in the Code-behind window, all graphical features we can get after executing the applications.
Now add some Silverlight Button Control to XAML mode in the Grid Container as shown below.
<UserControl x:Class="FirstSilverlightApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button x:Name="btn" Width="300" Height="100" FontSize="50" Content="Welcome"
Click="btn_Click">
</Button>
</Grid>
</UserControl>
Go to Code-behind mode and add below code to handle the button events.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace FirstSilverlightApplication
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btn_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hi, Welcome to Silverlight World: Mouse Entered");
}
}
}
If you want to run the Silverlight application in Asp.Net Page open .aspx page(for me FirstSilverlightApplicationTestPage.aspx) or if you want to execute Silverlight application in HTML page, open .html page(for me FirstSilverlightApplicationTestPage.html). In both pages you will find the Silverlight application with .xap extension as shown below.
In .aspx page:
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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" >
<head runat="server">
<title>FirstSilverlightApplication</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/FirstSilverlightApplication.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>
If you execute the .aspx page or .html page the output will display as shown below.
If you click the button, the output displays alert as shown below.
