CODEWITHSUNDEEP
javascriptsilverlightsilverlight-4.0
Frank Rosario
Frank Rosario

Reputation: 2661

Developing for Silverlight using Javascript - is this possible?

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?

Upvotes: 2

Views: 361

Answers (1)

Tim Erickson
Tim Erickson

Reputation: 2373

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>

Upvotes: 5

Related Questions