HTML Silverlight 桥和 WriteableBitmap

Question

我正在尝试实现 Silverlight HTML Bridge，但当从 HTML 端触发时，该函数未正确执行。

我正在使用 Silverlight 5。

问题

我已将示例简化为在 WriteableBitmap. My actual code will be doing pixel manipulations using the Pixels property 上渲染矩形。

单击 Silverlight 按钮时，函数将执行并且图像显示呈现的矩形。单击 HTML 按钮时，函数仍然执行，但图像不显示任何内容。

我可以通过使用断点进行调试来验证参数是否正确传递，以及当任一按钮被单击时该函数确实执行。唯一的区别是图像的渲染。

我也尝试过使用this answer中的代码触发Silverlight按钮点击。触发事件并执行函数，但同样没有呈现任何内容。

代码

HTML 页

<!DOCTYPE html>
<html>
<head>
    <title>Page1</title>
    <script src="Silverlight.js"></script>
    <script>
        function onSilverlightError(sender, args) {
            // autogenerated things
        }
    </script>
</head>
<body>
    <button id="go" type="button">Button in HTML</button>
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
            <param name="source" value="ClientBin/dynamicbitmap.xap">
            <param name="onError" value="onSilverlightError">
            <param name="onLoad" value="pluginLoaded">
        </object>
        <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
    </div>
    <script>
        var slCtl = null;
        function pluginLoaded(sender, args) {
            slCtl = sender.getHost();
        }

        document.getElementById('go').attachEvent('onclick', function () {
            slCtl.Content.MainPage.doThings(300, 300);
        });
    </script>

MainPage.xaml

<UserControl x:Class="dynamicbitmap.MainPage"
    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">

    <Grid x:Name="LayoutRoot">
        <Button HorizontalAlignment="Left" VerticalAlignment="Top" Content="Button in Silverlight" Height="23" Name="button1" Width="150" Click="button1_Click" />
        <Image HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Margin="0, 30, 0, 0" />
    </Grid>
</UserControl>

MainPage.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

using System.Windows.Browser;
using System.Windows.Media.Imaging;

namespace dynamicbitmap
{
    public partial class MainPage : UserControl
    {
        WriteableBitmap bm;

        public MainPage()
        {
            InitializeComponent();
        }

        [ScriptableMember()]
        public void doThings(int width, int height)
        {
            bm = new WriteableBitmap(width, height);
            image1.Source = bm;

            Rectangle rect = new Rectangle();
            rect.Width = 250;
            rect.Height = 250;
            rect.Fill = new SolidColorBrush(Color.FromArgb(255, 0, 0, 99));
            bm.Render(rect, null);
            bm.Invalidate();
        }

        public void button1_Click(object sender, RoutedEventArgs e)
        {
            doThings(300, 300);
        }
    }
}

Answer 1

在您的 javascript onclick 事件处理程序中，您尝试访问 MainPage 但未在 html 页面中注册。

尝试用这个替换你的构造函数：

public MainPage()
{
    InitializeComponent();

    HtmlPage.RegisterScriptableObject("MainPage", this);
}

至于我，我还必须更改事件订阅代码才能使其正常工作：

document.getElementById('go').addEventListener('click', function () 
{
    slCtl.Content.MainPage.doThings(300, 300);
});

HTML Silverlight 桥和 WriteableBitmap

HTML Silverlight bridge and WriteableBitmap

html

javascript

c#

silverlight

writeablebitmap

问题

代码

HTML 页

MainPage.xaml

MainPage.xaml.cs