Home/ Questions/Q 3999642
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:41:01+00:00

My tech lead told me its possible to develop Silverlight apps solely with Javascript.

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0