Building Silverlight Apps
In a previous post I documented the steps to install the latest in tools and technologies to support development of Silverlight Applications. One comment I received was that it seemed like allot to do to just start developing Silverlight Applications. This may have mislead other people and so I will document how to get started with a minimal software install.
To begin with you can write a silverlight app in note pad! Here is an example: Open a new file and save the following with an .htm extension. Then open it IE and you can see the result!
<html>
<script type="text/xaml" id="MySilverlight">
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock Text="Hello World from my Script Tag"/>
</Canvas>
</script>
<object
type="application/ag-plugin"
id="myControl"
width="400"
height="100">
<param name="background" value="Red" />
<param name="source" value="#MySilverlight" />
</object>
</html>
Obviously this is a simple example but we can see here how this simple xaml fragment and object tag can enable the basic UI instantiation. There is a lot you can do with XAML but to really enable interactivity you need to support some eventing framework. We will start with java Script. Add the attribute Loaded="Page_Loaded" to the base canvas element and the following script block:
<script type="text/javascript">
function Page_Loaded(){
alert("Loaded");
}
</script>
We could then extend the integration to other entry points of the control and embrace the full range of functionality in the Silverlight 1.0 framework.
Notepad is not the best tool for development and there are many more examples of tools for editing HTML and Javascript. Microsoft produces some express tools that have this functionality and are freely available for download. Microsoft's Expression Suite is also a good place to go to view some of our latest in design tools.
To take advantage of Silverlight 1.1 ability to host a subset of the .Net CLR functionality, we will have to compile assemblies and while this can be done with a command line interpreter, Visual C# Express edition is what I will use next. I will also need to download and install the Silverlight 1.1 SDK. This will provide me with the assemblies I will need in order to compile my project.
Start by launching C# Express and selecting File-New Project and select a Class Library Template.
Remove the auto generated class1.cs file and add three code files and Modify them as below:
SampleSL.xaml
<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="DemoSilverlight.SampleSL;assembly=bin/Release/DemoSilverlight.dll">
<TextBlock x:Name="MyText" Text="This is the start"/>
</Canvas>
SampleSL.xaml.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
namespace DemoSilverlight
{
public partial class SampleSL : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
Canvas can = o as Canvas;
TextBlock txt = (TextBlock)can.FindName("MyText");
txt.Text = "Hello from C#";
}
}
}
ShowMySilverlight.htm
<html>
<object
type="application/ag-plugin"
id="myControl"
width="400"
height="100">
<param name="background" value="Red" />
<param name="source" value="SampleSL.xaml" />
</object>
</html>
Remove all references in the project and then right click on the project file and select "Properties" and then "Build".
Click on the "Advanced.." button and check the setting to remove the automatic inclusion of mscorlib.dll during compile.
Now go to the references section of the project and add the following references from the directory you installed the Silverlight SDK in (default=C:\Program Files\Microsoft Silverlight).
agclr.dll
mscorlib.dll
system.dll
system.core.dll
system.silverlight.dll
system.xml.core.dll
Compile the project and then view the html file in the browser. You should see the SIlverlight 1.1 control and have an example of how to access xaml objects.
One thing to keep in mind is that in these examples I have avoided using the Silverlight.js helper file to instantiate the host objects to improve the clarity of what is happening. Therefore these examples will only work in an IE browser. If you would like to use firefox / safari to view them, replace the object tag references with embed tag or use the helper file provided. Details on this file can be found here.
Let me know if this helps
