Many research projects use Java applets to show and demonstrate simulations. By day, I’m a Microsoft developer. I would like to keep synergy between my day job and my research so both can take advantage of items created and learned. So I will introduce a series of tutorials on using Silverlight for Research Simulations over the next few months.
Its difficult to find research simulations using Silverlight; there are a few basic examples (bugs). Like they say, “imitation is the sincerest form of flattery” – so I will try to imitate and convert the Substrate applet as inspiration and direction (picture above).
There are some Prerequisites that you must have:
Once you have these installed, you can test your Silverlight application by going to Microsoft’s Silverlight home page and ensure if all its content renders correctly.
Create the Container
Since Silverlight depends on the browser for delivery, it makes sense to first create an HTML page. So, let’s start by showing the entire HTML and dissect it. Create a file named Research000.html and put this HTML in that file (or download it here):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Silverlight Research</title>
</head>
<body>
<!-- Inline XAML Content. -->
<script type="text/xaml" id="xamlResearchContent">
<?xml version="1.0" ?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock Text="Silverlight Research"/>
</Canvas>
</script>
<!-- Silverlight Object Container. -->
<object type="application/x-silverlight" id="researchControl" width="200" height="200">
<param name="source" value="#xamlResearchContent" />
</object>
</body>
</html>
See it in action… click here… There… pretty simple. Similar to Flash, the Silverlight control lives as an embedded object in the page. Thus, we need to add the <object> tag.
Now, that we have the Silverlight control created, we need to make it write out “Silverlight Research”. Silverlight renders UI elements declared in XAML (Extensible Application Markup Language).
We declare a Canvas control. Think of a canvas as similar to the client area of a window on your desktop. Although you can draw anything on it, its mainly lives to hold other controls. The TextBlock control simply declares a text placeholder, and because our TextBlock resides within the Canvas declaration, the text appears within the Canvas.
As shown, we put the XAML inline to keep things simple. Finally we link up the XAML with the Silverlight control by placing the XAML id (xamlResearchContent) within the value property of the object tag.
We will stop here for the #000 tutorial. Get this working and on our next tutorial I will show how to draw on the canvas.
Thank You for listening.