My tech lead told me its possible to develop Silverlight apps solely with Javascript. I did some googling and binging; it likes this was the primary development method for developing pre Silverlight 2.0. It also seems to have lost favor to C# as of SL 2.0.
Is it still possible to develop Silverlight apps solely with Javascript? I know Silverlight and the browser have extensive scripting capabilities and can be scripted via JS; but can I build an SL app with it?
It is still possible, though the experience is very different. You must load an initial Root visual element via a source property on the Silverlight object referencing a XAML file on the server, but after that you have full access to the visual tree via javascript.
The below Test.html and Root.xaml files together will produce a testable page if placed in the same folder.
Note the differences from a "standard" (i.e. *.xap source) scenario - the 'source' parameter on the SL object tag is set to a .XAML file instead of a .XAP file. The .XAML file is also different from what you would get in a default SL application in VS: the x:Class="MyApp.MainPage" is missing from the root element, and the root element is a Grid (or any Visual element) instead of a UserControl element. This is because there is no application (at least not loaded from the .XAP - I assume the SL control actually creates a default application instance in the process of loading the Root.XAML file), and no UserControl because there is no code-behind. This is consistent with the Pre-SL1.1/2.0 experience of no UserControls.
Additionally, you will need to reference Javascript API for Silverlight Reference in your javascript coding. Have fun with the FindName method and/or walking the Visual Tree! Those are the only ways to get references to any visual objects to manipulate from your code!
Test.html
<html>
<body>
<object id="slObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="300">
<param name="source" value="Root.xaml"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<input type="button" onclick="sayGoodBye();" value="Say Goodbye, Silverlight!" />
<script>
function sayGoodBye() {
var slObject = document.getElementById('slObject');
var slContent = slObject.Content;
var layoutRoot = slContent.FindName('LayoutRoot');
var message = layoutRoot.FindName('Message');
message.Text = 'Goodbye';
}
</script>
</body>
</html>
Root.xaml
<Grid x:Name="LayoutRoot" Background="White"
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">
<TextBlock x:Name="Message" Text="Hello, Silverlight!" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
