使用Javascript开发Silverlight - 这可能吗?

时间:2011-02-17 22:14:11

标签: javascript silverlight silverlight-4.0

我的技术负责人告诉我,只使用Javascript开发Silverlight应用程序是可能的。我做了一些谷歌搜索和binging;它喜欢这是开发Silverlight 2.0之前的主要开发方法。从SL 2.0开始,它似乎也失去了对C#的青睐。

是否仍然可以使用Javascript开发Silverlight应用程序?我知道Silverlight和浏览器具有广泛的脚本功能,可以通过JS编写脚本;但是我可以用它构建一个SL应用程序吗?

1 个答案:

答案 0 :(得分:5)

虽然经验非常不同,但仍有可能。您必须通过引用服务器上的XAML文件的Silverlight对象上的源属性加载初始Root可视元素,但之后您可以通过javascript完全访问可视树。

如果放在同一个文件夹中,下面的Test.html和Root.xaml文件将生成一个可测试的页面。

请注意与“标准”(即* .xap源)方案的区别 - SL对象标记上的“source”参数设置为.XAML文件而不是.XAP文件。 .XAML文件也与VS中的默认SL应用程序不同:根元素中缺少x:Class =“MyApp.MainPage”,根元素是Grid(或任何Visual元素)而不是UserControl元素。这是因为没有应用程序(至少没有从.XAP加载 - 我假设SL控件实际上在加载Root.XAML文件的过程中创建了一个默认的应用程序实例),而没有UserControl,因为没有代码隐藏。这与没有UserControls的Pre-SL1.1 / 2.0体验一致。

此外,您需要在javascript编码中引用Javascript API for Silverlight Reference。享受FindName方法和/或走视觉树!这些是从代码中获取对任何可视对象的引用的唯一方法!

的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>